WeekOne — The beginning
Hello world! My name is Pavol and I’ve set out to become a full stack web developer.
This series of weekly posts will be my way of:
- documenting the process
- reviewing what I’ve learned and sharing it with you
- practicing my writing skills
I’m part of the first cohort of Lambda School that opened in Europe this January.
Today is 13.1.2019 and I finished my first week focused on web fundamentals, introduction to user interface and Git.
Quick weekly summary:
- 2 code challenges in Javascript
- pair-programmed twice for about an hour each
- first peer code review
- wrote about 1500 lines of code (HTML+CSS) excluding Codepen practices
- build 3 simple websites with HTML and CSS
Now I understand these metrics might not mean that much, however I want to keep some statistic of how much I’ve done during every week. These metrics might change in the future.
What I learned this week:
Semantic HTML
Semantic HTML means giving the markup of your content meaning.
<header> <!-- This is header -->
<nav> <!-- This is navigation bar -->
<a href="#">About</a> <!-- This is hyperlink -->
<a href="#">Blog</a>
<a href="#">Carrers</a>
</nav>
</header>This has some obvious advantages when it comes to recognizing what is what, but it goes deeper. HTML markup (tags) is used by search engines to better understand what is the content of the page about. This leads to better SEO optimization and higher ranking of your web site in search results.
Resources:
- Interneting is hard — a great resource for basics of HTML and CSS
- w3school list of HTML semantic tags
CSS Selectors
CSS selectors allow us to style specific HTML element while not changing other elements. The basic CSS selectors are:
- Types selectors — let you apply specific style to all elements of given type
nav {color: crimson}- Class selectors— select an element with given class attribute
HTML syntax:
<div class="red-border">
...
</div>CSS syntax:
.red-border {
border-color: red;
}
- ID selectors — select an element with unique ID attribute
HTML syntax:
<div id="abc1">
...
</div>CSS syntax:
#abc1 {
background-color: green;
}
- Universal selector — select all elements
* {
color: red
}- Pseudo-classes — allow you to select elements based on their state (:hover, :first-child, :visited, etc… for full list see resources)
There are more selectors, which can be used (see the resources), however these were the ones I used the most.
Resources:
CSS Specificity
Specificity is weight given to each selector type. Browsers calculate the specificity and based on its value give precedence to given style over others. Therefore style with lower specificity can not override style with higher specificity even if it’s lower in the cascade.
The result of specificity calculation is in a form of four values separated by comma (a, b, c, d), where the first value is the most important and the last value is the least important.
A selector’s specificity is calculated as follows:
- count 1 if the HTML element does have a ‘inline-style’ attribute , otherwise count 0 (= a)
- count the number of ID attributes in the selector (= b)
- count the number of other classes, attributes and pseudo-classes in the selector (= c)
- count the number of element names and pseudo-elements in the selector (= d)
div {} /* a=0 b=0 c=0 d=1 => specificity = 0,0,0,1 */
div h1.red {} /* a=0 b=0 c=1 d=2 => specificity = 0,0,1,2 */
ul li#a1 {} /* a=0 b=1 c=0 d=2 => specificity = 0,1,0,2 */
style="" /* a=1 b=0 c=0 d=0 => specificity = 1,0,0,0 */
p {... !important} /* WIN */Couple of notes to calculate specificity:
- universal selector (*) has no specificity value (0, 0, 0, 0)
- the
!importantrule overrides any specificity and is always applied (only exception is when it’s overwritten by other!importantrule with higher specificity or if it’s declared lower in the cascade) - if you have two rules with the same specificity applied to the same element, then the last rule in the cascade is applied
Resources:
CSS Inheritance
Inheritance controls what style is applied to an element, when no value was assigned to some of its property. CSS inheritance is similar to human inheritance, where some characteristics are passed from parents to children. The same applies to CSS. Some property value (e.g. color) applied to a parent element will be inherited by that elements nested child element, and some won’t. Which properties are inherited and which are not is largely down to common sense.
Resources:
- CSS Inheritance (MDN)
CSS Box model
CSS treats every element (text, header, img, navigation bar,…) in the HTML file as a box. There are two types of boxes — block boxes and inline boxes. Block boxes always appear below the previous block box. They take the whole width of parent element and the height depends on the height of the content. Inline boxes width depends on the width of its content. They are displayed “in-line”, not on a new line like block boxes are.
Each box has a content area surrounded by (optional) padding area, border area and margin area. The size of each area is defined by its respective properties. Each area has four “edges” — top, right, bottom, left.
The area of each box can be described:
- Content — The content within the element (text, img, video…)
- Padding — The space between the content and its border
- Border — The line between the padding and margin
- Margin — The space between the box and surrounding boxes
We can overwrite the default box type by changing the {display: ...} property of an HTML element.
This <div> element will behave like inline element:
div {
display:inline;
}This <span> element will behave like block element:
span {
display: block;
}
Resources:
- Box-model (MDN)
- Internetingishard — Box model
- w3schools — Box model
CSS Reset
CSS reset serves as a tool for developers to start with the same default properties in every browser. It is necessary, because browsers can have different default values for some properties (line heights, margins, …).
The most basic CSS reset can be achieved by using the universal selector (*)and adding some parameters into it. However there are other tools available — see resources.
Resources:
Flexbox
Flexbox is a CSS Flexible Box Layout Module. You enable it by display:flex property. Flexbox layout deals with 2 type of boxes:
- flex container — element where Flexbox is called
- flex items — elements nested inside this flex container
This relationship do not go deeper than just single level! If you want to go deeper, you have to define Flexbox deeper in the nest.
Flexbox is one dimensional. It always deals in rows or columns. So the question I’m asking when working with Flexbox is — what is the line I’m working on? Identify the “biggest” line (highest parent) and start working with it and go deeper step-by-step.
Properties for flex container and flex items are well documented in Resources.
Resources:
- Flexbox froggy
- CSS-Tricks guide to flexbox
- Flexbox cheatsheet
- Flexbox in gifs
Git
Git is a version-control system for tracking changes in computer files and coordinating work on those files among multiple people.
The above wiki explanation is pretty self explanatory. Git is used by developers to track changes when working on a project with multiple people.
Basic git commands are linked in the resources.
Resources:
Weekly Sprint Challenge
Sprint challenge is a tool for Lambda School to test and apply what we learned during the week in a concrete project. This sprint was focused on user interface and Git.
The result of my project:
Thank you for reading this far. If you enjoyed your stay please click/hold 👏. I’m very grateful for any feedback whether it’s regarding my writing or understanding of topics I write about.
