My participating in the course
- 0 - Git Basics
- 1 - Linux CLI and Networking
- 2 - VCS (hello gitty), Github and Collaboration
- 3 - Intro to HTML & CSS
- 4 - Responsive Web Design
- 5 - HTML & CSS Practice
- 6 - JavaScript Basics
- 7 - Document Object Model - practice
Completing the task, I've learned basics of Git. Since this tool is new for me, I was really surprised by incredible important possibilities of version control.
Now, using command line, I can initialize repositories, add files on staging index, make commits, point tags; create branches, developing safely and isolated, merge branches together; undo or modify changes that have been saved to the repo.
As I am newbie to Linux, finishing this chapter was actually valuable. The command line seems very powerful tool, especially with git, and I am glad to know how to perform basic tasks with it.
Some commands to remember:
- cp -r, rm -r - copy/remove files on trees
- chmod(ugo-rwx) - change file permission
- finger - show user info
- ~ - home directory
- df - show free disk space
- ps - show system processes
- kill, kill -9
- grep - find words in text
- man - manual
Reading articles about Networking, I got known some of HTTP's basics: request verbs, status codes, request/response headers, using HTTP in web frameworks; also HTTP connections, connection handling, authentication, HTTPS, and cache processing.
In this task I've learned how to work with remote repositories: how to push or get changes from remote repos; forking a repository; looking in CONTRIBUTING.md file and project issues, before start doing any work; working on "topic" branches; creating pull requests; squashing commits with rebase command, and the importance of communicating clearly and frequently with other stakeholders in the project.
Mostly I have refreshed HTML/CSS knowledges; some were new for me, such as !important
flag, which overrides any style; CSS Grid properties: grid-area
(a shorthand which specifies an item's location and size), grid-template-areas
(allows the naming of sections of a webpage), grid-auto-flow
(specifies whether implicity-added elements should be added as rows or columns within a grid), grid-auto-rows
(implicitly-added rows or columns occur when there are more grid items than cells available); also I find CSS transition
pretty cool tool, which allows you to provide visual feedback to users.
By finishing this task, I've learned some basic concepts of repsonsive design , such as:
- always set
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- use responsive design mode in dev tools
- set relative units in specifying widths for elements(preventing from overflow)
- set tap targets size for 48x48 px
- start responsive design for smaller viewport, prioritizing content for users
- use media queries to control styles for different viewports
- use flexbox/grid for creating responsive layouts
- use the
picture
element for responsive images (provides multiple versions of an image based on different characteristics, like device size, device resolution, orientation etc) - ideal measure for the lenght of a line is 65 cpl > use measures as a factor for picking breakpoints
- add minor breakpoints too
There are 4 evolving patterns for responsive design:
- Column Drop - the simplest one, at narrowest viewport, each element simply stacks vertically, one on top of the other
- Mostly Fluid - very similiar to Column Drop, but with more columns fitting in different ways; at narrowest is the same, at its widest margins are added on the left and right, instead of expanding
- Layout Shifter - the most responsive layout, using flex
order
attribute to move content, instead of reflowing or dropping columns - Off Canvas - at smaller viewport places less frequetly using content off screen, showing it when user taps on burger icon(for eg); on wider viewport the content is shown by default
Creating responsive tables, there are 3 techniques to decide:
- Hidden Columns - using
display:none;
, hides columns based on their importance, as the viewports size gets smaller - No more tables - positioning table's content way off screen
- Contained tables - wrapped in a div table with scroll; set
width:100%;
andoverflow-x: auto;