Basic HTML & CSS

Day 1:
Html Basics

Day 2:
Css Basics

Day 3:
HTML divs ,classes and Ids

Day 4:
Css Position Types and Basics

css position Short

Css Position Basics

Day 5:
Basic typography: rem vs. em vs. px

Rem Vs Em

Z Index Basics

Z index

Css Flexbox

Css Grid

Some More resources to continue your FrontEnd Journies Learn these in your offtime not necessary now.

Step 1 :
Chrome Dev Tools Basics

Step 2 :
Emmet

https://docs.emmet.io/cheat-sheet/

VsCode Tutorial

VsCodeExtension

Step 3:
Htmls & CSS With VS Code

Step 4:
Html 5 Website

Step 5 :
Use these 2 sites to get more into theory and learn more in depth html and css.

https://www.freecodecamp.org/
https://www.w3schools.com/

 

What To Learn Next

Viewport
Media queries
fluid widths
rem unit over px
Mobile-first

 

Day 1 : https://www.youtube.com/watch?v=jV8B24rSN5o
Chapter : 11 CSS Grid
Chapter : News Grid Website

Day 2 : Chapter 14 : Learning Sass
Chapter 15 : Portfolio Website with Sass

Day 3 : Capter 9 : More Css Concepts

Rem And Em

Day 4 : Responsive Mobile-First Website

Mobile First Responsive Contact Form

Day 5 :
Css Grid Mobile First

Responsive Website Using Grid

Day 6 : Css Pricing Table

CSS Hamburger Menu

video background With Html And Css

Day 7 : Landing Page

Product landing Page

Responsive Side Menu

CSS Variables(After Sass)

 

CSS Positioning

Controlling DIVS

Chrome Dev Tools

HTML Trees

inline positioning

custom positioning

Absolute and fixed postponing

 

VS Code Keyboard Shortcuts

Scroll to Top