Get start
What is HTML&CSS?
HTML is resonsible for the content of the page. That’s the text, images, buttons, etc.
CSS is resonsible for the presentation of the content. That’s the color, layout, etc.
Web designers create the overall look and fell of a website.
Web developers implement the design using HTML, CSS and JavaScript code.
Configure VIM as HTML code-editor
Finally in the arms of
vscode🙉
Add vim plugin:
- emmet: Coding HTML faster.
CSS autocomplete key: <C-x> <C-o>
HTML and CSS live previes plugin: bracey
HTML Fundamentals
Anatomy of an HTML element
<p> THML is a markup language</p>
The HTML element is composed of opening tag, content, closing tag.
HTML good styles
<img/>element should addaltattritube at all time, for the convenience of the blind.- An important principle in web design is
making the HTML elements meaningful. That is semantic HTML.
CSS Fundamentals
CSS describes the visual style and presentation of the contend in HTML.
Anatomy of an HTML element
h1 {
color: blue;
text-align: center;
font-size: 20px;
}
h1 is Seletor, every style has proporty and value.
CSS good styles
- Class selector is more commonly used than ID selector, as
IDis unique in HTML. For scalability, remember always using class selector. - We should always specify all the four state of
<a>element in order, which includinglink,visited,hoverandactive.
Priority conflicts between selectors
CSS style priority from high to low:
- Inline style(style attribute in HTML)
- ID selector
- class or pseudo-class selector
- element selector
- universal element selector
The CSS box model
The box model defines how elements are displayed on a webpage and how they are sized.
In the box model, every element on a webpage can be seen as a rectangular box.
Universal element & <body> element
Styles in <body> selector take effect because of inheritance. But the text-independent elements do not support inheritance.
That is where universal element selector is needed. It’s styles take effect on all element.
When we want to set padding and margin of all elements to 0. Must put the code in universal element selector.
Inline elements & Block elements
Inline elements:
- Occupies only the space necessary for its content.
- Box model applies in different way: heights and widths do no apply.
- Paddings and margins are applied only horizontally(left and right).
Block elements:
- 100% of parent’s width
- vertivally, one after another
Inline-Block elements:
- Good example is
<img>.
The 3 ways of building layouts with CSS
Float Layouts: The old way of building layouts, using the float CSS property. Still used, but getting outdated fase.
- Element is removed from the normal flow: out of flow. Like absolutely positioning.
- Text and inline elements will wrap around the floated elements. Different from absolutely elements.
- The container will NOT adjust its height to the elements.
FlexBox: Modern way of laying out elements in a 1-dimensional row without using floats. Prefect for component layouts.
- One of its most useful applications is vertical centering.
- Flex container property:
gap: To create space between items.justify-content: To align items along main axis(horizontally, by default)align-items: To align items along cross axis(vertically, by dedauly)flex-wrap: To allow items to wrap into a new line if they are too largealign-content: Only applies when there are multiple lines(flex-wrap: wrap)
- Flex Items property:
align-self: To overwrite align-items for individual flex items.flex-grow: To allow an element to grow.flex-shrink: To allow an element to shrink.flex-basis: To define an item’s width, instead of the width property.flex: Recommended shorthand for flex-grow, -shrink, -basis.
CSS Grid: For laying out elements in a fully-fledged 2-dimensional grid. Perfect for page layouts and complex components.
CSS grid is a set of CSS properties for building 2-dimensional layouts
The main idea behind CSS Grid is that we divide a container element into rows and columns that can be filled with its child elements
CSS grid is not meant to replace flexbox!. Instead, they work perfectly together. Need a 1D layouts? Use flexbox. Need a 2D layout? Use CSS grid
Grid container
- grid-template-rows/grid-template-columns: To establish the grid row and column tracks. One length uniit for each track. Any unit can be used, new fr fills unused space
- row-gap/colum-gap: To create empty space between tracks
- justify-items/align-items: To align items inside rows/columns(horizontally/vertically)
Grid items
- grid-column/grid-row: To place a grid item into a specific cell, based on line numbers. span keyword can be used to span an item across more cells
- justify-self/align-self: To overwrite justify-items/align-items for single items