Awesome

<img src="https://cdn.simpleicons.org/html5" title="HTML & CSS Practice Repo" alt="HTML & CSS Practice Repo" width="30"> 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 it has not 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 (VisualStudio Code Extension) to launch a development local 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 on the folders.
• Click on Go Live button on VSCode bottom-right corner.

Repo structure & what i learned in each exercise

• Side notes (in notes.txt file) for contextual comments outside the exercies
• HTML document (1-document folder)
  • Understanding about 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's framgments and HTML element id to create a navigation in the page
  • How to send form information to another page usgin 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 element 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