HTML and CSS Practice

Repository created to record my practice learning HTML and CSS with exercises based on the Udemy Course of Anthony Alicea.

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 02/11/2023 - 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

• Live Server (Visual Studio Code Extension) to launch a local development server.

Setup

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

git clone https://github.com/NicolasOmar/html-css-practice.git
cd html-css-practice
npm install

How to run it

• Open any of the index.html files in the folders.
• Click on the Go Live button in the VSCode bottom-right corner.

Repo structure & what I learned in each exercise

• Side notes (in notes.txt file) for contextual comments outside the exercises
• HTML document (1-document folder)
  • Understanding of HTML main structural tags (html, head, and body).
  • Understanding of metadata in tags such as lang.
  • Usage of sectioning elements like article and section.
  • Understanding and correct usage of the following elements: aside, h, p, address, ul, ol, dt, table, main, em, strong, small, br, nav, form, input, .text, radio, textarea, label, button, fieldset and legend.
  • How to use URL fragments and HTML element id to create a navigation in the page.
  • How to send form information to another page using HTTP queries.
• CSS document (2-styling folder)
  • How to create and link a CSS file to format the page.
  • Understanding of universal, attribute, id, and class selectors.
  • Understanding of descendant, child, next sibiling and subsequent sibiling combinators.
  • Understanding of pseudo classes like nth-child, nth-of-type, visited, focus, hover.
  • Understanding of pseudo-elements like first-letter.
  • Understanding of absolute (like px) and relative units (like rem).
  • Understanding of the element's position.
  • Understanding of display values (like block, flow-root, and inline) and float.
  • Understanding of overflow.
  • Understanding of multilingual sites support using:
    • writing mode, direction, and text-orientation features.
    • -inline or -block properties.
  • Understanding about Flex Layout/Flexbox with properties like flex-direction, order, flex-wrap, flex-grow, flex-shrink, flex-basis, justify-content, align-items,align-self, and inline-flex.
  • Understanding about Grid Layout with properties like grid-template-columns, gap, and grid-template.
  • Understanding about font-family, color, rgba, background-image, background-size, transition.
  • Understanding about media-queries.

Other practice repos

Node	Angular	GraphQL	React	Typescript	Styling	NextJS	Python	NestJS