- Building a header
- CSS animations
- Building a complex animated button
- The 3 pillars to writing good HTML and CSS
- The Cascade and Specificity
- How CSS values are processed
- Inheritance
- CSS Units
- How CSS renders a website
- Box Types
- Positioning schemes
- The Think-Build-Architect Mindset
- What is Sass?
- Sass syntax vs SCSS syntax
- Basic responsive design principles
- Layout types
- Building a Custom Grid with Floats
- Building an About Section
- Building a Features Section
- Building a Tours Section
- Building a Stories Section
- Building a Booking Section
- Building a Beautiful Navigation
- Building a Pure CSS Popup
- The best way to perform a basic reset using the universal selector.
- Setting up project-wide font definitions.
- Clipping parts of elements using
clip-path. - The easiest way to center anything with the
transform,topandleftproperties.
- Creating CSS animations using
@keyframesand theanimationproperty.
- Using pseudo-classes and pseudo-elements such as
::after. - Creating a hover animation using the
transitionproperty.
- Responsive design
- Fluid layouts
- Media queries
- Responsive images
- Correct units
- Desktop-first vs mobile-first
- Maintainable and scalable code
- Clean
- Easy-to-understand
- Supports potential for future growth
- Reusable
- How to organize files
- How to name classes
- How to structure HTML
- Web performance
- Make less HTTP requests
- Write less code
- Compress code
- Use a CSS preprocessor
- Use as few images as possible
- Compress images
- Cascade: the process of combining different stylesheets and resolving conflicts between different CSS rules and declarations when more than one rule applies to a certain element.
- To resolve conflicts between conflicting declarations, the Cascade first looks at the importance (weight), then at the selector specificity, and lastly at the source order.
- Importance
- User
!importantdeclarations - Author
!importantdeclarations - Author declarations
- User declarations
- Default browser declarations
- User
- Specificity
- Inline styles
- IDs
- Classes, pseudo-classes, attribute
- Elements, pseudo-elements
- Source order
- The last declaration in the code will override all other and will be applied.
- CSS declarations marked with
!importanthave the highest priority. - But, only use
!importantas a last resource. It's better to use correct specificities – more maintainable code! - Inline styles will always have priority over styles in external stylesheets.
- A selector that contains 1 ID is more specific than one with 1000 classes.
- A selector that contains 1 class is more specific than one with 1000 elements.
- The universal selector
*has no specificity value (0, 0, 0, 0). - Rely more on specificity than on the order of selectors.
- But, rely on order when using 3rd-party stylesheets – always put your author stylesheet last.
- Each property has an initial value, used if nothing is declared (and if there is no inheritance).
- Browsers specify a root
font-sizefor each page (usually16px). - Percentages and relative values are always converted to pixels.
- Percentages are measured relative to their parent's
font-size, if used to specifyfont-size. - Percentages are measured relative their parent's
width, if used to spefify lengths. emare measured relative to their parentfont-size, if used to specifyfont-size.emare measured relative to the currentfont-size, if used to specify lengths.remare always measured relative to the document's rootfont-size.vhandvware simply percentage measurements of the viewport'sheightandwidth.
- Inheritance passes the values for some specific properties from parents to children – more maintainable code.
- Properties related to text are inherited:
font-family,font-size,color, etc. Other properties likepaddingandmarginare not inherited. - The computed value of a property is what gets inherited, not the declared value.
- Inheritance of a property only works if no one declares a value for that property.
- The
inheritkeyword forces inheritance on a certain property. - The
initialkeyword resets a property to its initial value.
8. CSS Units
- Absolute Lengths vs Relative Lengths.
- The
emandremunits are practical in creating perfectly scalable layouts.
- The Visual Formatting Model: an algorithm that calculates boxes and determines the layout of these boxes, for each element in the render tree, in order to determine the final layout of the page. It takes into account:
- Dimensions of boxes: the box model.
- Box type: inline, block, and inline-block.
- Positioning scheme: floats and positioning.
- Stacking context.
- Other elements in the render tree.
- Viewport size, dimensions of images, etc.
- The Box Model:
- Content: text, images, etc.
- Padding: transparent area around the content, inside the box.
- Border: goes around the padding and the content.
- Margin: space between boxes.
- Fill area: area that gets filled with background color or background image.
- Block-level boxes
- Elements formatted visually as blocks
- 100% of parent's width
- Vertically, one after another
- Box-model applies as showed
display: block (display: flex) (display: list-item) (display: table)
- Inline-block boxes
- A mix of block and inline
- Occupies only content's space
- No line-breaks
- Box-model applies as showed
display: inline-block
- Inline boxes
- Content is distributed in lines
- Occupies only content's space
- No line-breaks
- No heights and widths
- Paddings and margins only horizontal
display: inline
- Normal flow
- Default positioning scheme
- NOT floated
- NOT absolutely positioned
- Elements laid out according to their source order
position: relative
- Floats
- Element is removed from the normal flow.
- Text and inline elements will wrap around the floated element
- The container will not adjust its height to the element
float: left float: right
- Absolute positioning
- Element is removed from the normal flow
- No impact on surrounding content or elements
- We use
top,bottomandrightto offset the element from its relatively positioned containerposition: absolute position: fixed
- Think about the layout of your webpage or web app before writing code.
Component Driven Design:- Modular building blocks that make up interfaces.
- Held together by the layout of the page.
- Re-usable across a project, and between different projects.
- Independent, allowing us to use them anywhere on the page.
- Build your layout in HTML and CSS with a consistent structure for naming classes.
BEM – Block Element Modifier:- BLOCK: standalone component that is meaningful on its own.
- ELEMENT: part of a block that has no standalone meaning.
- MODIFIER: a different version of a block or an element.
- Low-specificity selectors:
.block {} .block__element {} .block__element--modifier {}
- Create a logical architecture for your CSS with files and folders.
The 7-1 Pattern:- 7 different folders for partial Sass files, and 1 main Sass file to import all other files into a compiled CSS stylesheet:
base/ components/ layout/ pages/ themes/ abstracts/ vendors/
- 7 different folders for partial Sass files, and 1 main Sass file to import all other files into a compiled CSS stylesheet:
- Sass is a CSS preprocessors; an extension of CSS that adds power and elegance to the basic language.
- Sass source code gets compiled into CSS code.
- Features:
- Variables for reusable values such as colors, font-size, spacing, etc.
- Nesting of selectors inside of one another, allowing us to write less code.
- Operators for mathematical operations right inside of CSS.
- Partials and imports to write CSS in different files and importing them all into one single file.
- Mixins to write reusable pieces of CSS code.
- Functions similar to mixins, but also produce a value that can be used later.
- Extends to make different selectors inherit declarations that are common to all of them.
- Control directives for writing complex code using conditionals and loops.
- Sass syntax uses indentation instead of curly braces.
- SCSS syntax is closer to CSS; uses curly braces.
-
Fluid grids and layouts
To allow content to easily adapt to the current viewport width used to browse the website. Uses%rather thanpxfor all layout-related lengths. -
Flexible/responsive images
Images behave differently than text content, and so we need to ensure that they also adapt nicely to the current viewport. -
Media queries
To change styles on certain viewport widths (breakpoints), allowing us to create different versions of our website for different widths.
- Float layouts
- Flexbox
- CSS grid
- Architecting and building a simple grid system.
- Using the attribute selector.
- Using the
:notpseudo-class. - Using
calc()instead Sass operations to perform operations on different units.
- Thinking about components.
- Using utility classes.
- Using the
background-clipproperty. transforming multiple properties simultaneously.- Using the
outline-offsetproperty together withoutline. - Styling elements that are NOT hovered while others are.
- Using an icon font (linea.io).
- Creating the "skewed section" with a
skew()transformation. - Using the direct child selector
>.
- Building roating cards.
- Using
perspectivein CSS. - Using the
backface-visibilityproperty. - Using background blend modes.
- Using
box-decoration-break.
- Making text float around shapes with
shape-outsideandfloat. - Applying a
filterto images. - Creating a background video covering an entire section.
- Using the
<video>HTML element. - Using the
object-fitproperty.
- Implementing "solid-color gradients."
- Working with the general sibling selector (
~) and the adjacent sibling selector (+). - Using the
::placeholderpseudo-element. - Using
:focus,:invalid,:placeholder-shown, and:checkedpseudo-classes. - Techniques for building custom radio buttons.
- The "checkbox hack."
- Custom animation timing functions that use cubic bezier curves.
- Animating "solid-color gradients."
- Using
transform-origin. - Creating an amaizingly creative effect!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent