Styling Practice

Repository created to record my practice learning CSS and SASS with exercises based on the Udemy Course of Jonas Schmedtmann.

Table of contents

• Status
• Requirements
• Setup
• How to run it
• Repo structure & what i learned in each exercise
• Other practice repos

Status

• Current repo's version is
• This course has been completed on 10/04/2024 - Certificate

Why does it not have any updated dependencies?

After finishing its related Udemy course, I archive this repository and unarchive it when I start a new training and add a link in the Other practice repos section referring to its new repo. But I don't update any associated dependency due to technology changes during the years between each practice, and the produced code which works with the mentioned requirements.

Requirements

• Node v20.10.0 or above
• Live Server (Visual Studio Code Extension) to launch a local development server.

Setup

Just in case you want to make your version with specific releases and version updates. After cloning the repo, install the node packages in the created folder.

git clone https://github.com/NicolasOmar/styling-practice.git
cd styling-practice
npm run setup:all

setup:all is the command to install all the projects, but if you want to do it one by one, you can change that last line for one of the following:

App Setup	Command
All	npm run setup:all
Natorus	npm run setup:natorus
Nexter	npm run setup:nexter

How to run it

• Open the index.html file on any of the exercise's indexes.
• Click on the Go Live button in the VSCode bottom-right corner.
  • It should open a new window with your page

Repo structure & what I learned in each exercise

• Natorus project (1-natorus folder)
  • Refreshing concepts related to coloring and positioning (using relative and absolute).
  • Refreshing concepts related to center elements in several situations, like inline, block, and boxed elements, using different strategies.
  • How to create custom animations using @keyframes and animation.
  • Make animate/transform elements with transform, translate, skew, scale, and rotate.
  • Refreshing concepts related to pseudo-classes (using :link and :visited).
  • How to use pseudo-elements like ::after.
  • How to implement a more maintainable style using relative units like rem or em.
  • Learn about bem (block element modifier) and implement it in current project status.
  • Learn sass basics (like variables, nesting, operators, mixins, and functions).
  • Install sass compiler with node-sass to generate css code using scss sintaxis.
  • How to build a Sass architecture for our project based on 7-1 pattern and move the code following the structure.
  • How to create a grid system from scratch (styling like Bootstrap).
  • How to use mixings for repetitive pieces of styling code.
  • How to use the calc function for calculated values (like specific widths).
  • How to manipulate text styling with background-clip and color: transparent.
  • How to create frames in an element with outline and outline-offset.
  • Learn to select specific elements using direct children (with >).
  • How to use perspective and backface-visibility to include two or more sides of an element that are overlapping.
  • How to apply a consistent styling in a span (for example) by using box-decoration-break.
  • How to wrap an element's shape around another shape using shape-outside.
  • How to add filters to transform elements using filter with properties such as blur and brightness.
  • How to use <video> properties and different formats with <soruce>.
  • How to adjust elements with a ratio like <video> using object-fit.
  • How to create a gradient background:
    • In a linear direction, both simple and advanced ways using linear-gradient.
    • In radial direction using radial-gradient.
  • How to handle invalid/valid input state using :invalid pseudoclass.
  • How to handle an animated toggle display using opacity, visibility, and transform.
  • How to style custom <radio> inputs.
  • How to move a background to be animated using background-size and background-position.
  • How to create a custom transition using cubic-bezier.
  • How to create a burger menu that changes when it is clicked.
  • How to adjust an element's position using table display (examples with table and table-cell)
  • How to format a long text into several columns using properties like column-count, column-gap, and column-rule.
  • Learning concepts related to mobile-first responsive strategy.
  • Implement a responsive strategy using @media queries and extend its functionality using @if directive.
  • How to work with responsive images using properties like srcset and sizes.
• Trillo project (2-trillo folder)
  • How to add and use custom css properties.
  • How to use flex to adjust layout elements' width with flexbox.
  • How to use flex starter properties like justify- and align-.
  • How to adjust element orientation with flex-direction.
  • How to add an SVG element in HTML and in CSS.
  • How to use HTML entities in both HTML and CSS implementations.
• Nexter project (3-nexter folder)
  • How to use grid to adjust layout elements with grid layouts.
  • How to adjust the grid's structure using grid-template-rows and grid-template-columns.
  • How to reduce repetitive values with repeat.
  • How to adjust an element's content space with fr, vh, vw, and min-content.
  • How to make grid layout easier by including area names in columns.
  • Handle multiple-level grids (one inside another).
  • How to set gaps between columns and/or rows using column-gap and row-gap.
  • How to make a layout responsive-ready without using media queries.
  • How to use flexbox and grid at the same time (for one-dimensional layouts).
  • How to superpose different elements located in the same row or column.
  • How to create a gallery effect by setting object-fit to its images.
  • How to align several elements in a vertical way (besides the already worked horizontal cases).
  • How to include support for older browsers using @support.
• Bonus
  • Inclusion of libraries for code formatting and linting (prettier and stylelint).
  • Inclusion of libraries for code review based on git-hooks (lint-staged and husky).

Other practice repos

Node	React	Angular	GraphQL	Typescript	HTML & CSS	NextJS	Python	NestJS