Welcome, to my HTML & CSS repo

📚 Introduction

This repository serves as a quick refresher or a comprehensive brush-up before interviews. It is thoughtfully curated to cover all the essential topics required for interview preparation, making it a reliable resource for revisiting key concepts

ALSO CHECKOUT:

📃 Topics  

📄 HTML

• Level 1
  Content

  • What is HTML?
  • What is HTML5?
  • Text/code Editor vs Word processor
  • Recommended text editors
  • Recommended code editor extensions
  • EMMET HTML
  • Some common Emmet Shortcuts
  • First HTML File
  • Basic HTML Page
  • Comments in HTML
  • HTML is NOT case sensitive
• Level 2
  Content

  • Basic terminology
  • Some Frequently Used Tags
  • Attributes examples
• Level 3
  Content

  • Page Layout Techniques
  • Inside Main Tag
  • Revisiting Anchor Tag
  • Revisiting Image Tag
  • Div Tag
  • List : Div Tags
  • Span Tag
  • List : Span Tags
• Level 4
  Content

  • List in HTML
  • Tables in HTML
  • Caption in Tables
  • colspan attribute
  • Form in HTML
  • Action in Form
  • Form Element : Input
• Level 5
  Content

  • Label
  • Class & Id
  • Checkbox
  • Textarea
  • Select
  • iframe Tag
  • Video Tag
• Level 6
  Content

  • HTML tags for text
  • HTML tags for lists
  • HTML tags for tables
  • HTML tags for forms
  • HTML tags for images
  • HTML tags for scripts
  • HTML tags for meta tags
  • HTML tags for media
  • HTML5 attributes
  • HTML5 tags
  • ID and Class
  • Grouping
  • CSS shortcuts

📄 CSS

• Level 1
  Content

  • What is CSS?
  • Basic Syntax
  • Including Style
  • Color Property
  • Background Color Property
  • Color Systems
  • Selectors
  • Practice Set 1
  • Text Properties
  • Units in CSS
  • Text Properties
  • Practice Set 2
• Level 2
  Content

  • Box Model in CSS
  • Height
  • Width
  • Border
  • Padding
  • Margin
  • Practice Set 3
  • Display Property
  • Visibility
  • Alpha Channel
  • Practice Set 4
• Level 3
  Content

  • Units in CSS
  • Percentage (%)
  • Em & Rem (Root Em)
  • Others
  • Position
  • z-index
  • Background Image
  • Background Size
  • Practice Set 5
• Level 4
  Content

  • Flexbox
  • The Flex Model
  • Flexbox Direction
  • Flex Properties for Flex Item
  • Flex Properties for Flex Container
  • Practice Set 6
  • Media Queries
  • Practice Set 7
• Level 5
  Content

  • Transitions
  • Transition Shorthand
  • CSS Transform
  • Animation
  • Animation Properties
  • Animation Shorthand
  • % in Animation
  • Practice Set 8
• Level 6 - Projects
  Content

  • Get Starter Pack Download Here
  • Project 1 - Simple Landing Page Check Final Code Here
    • Selectors
    • Fonts and Typography
    • Colors
    • Box Model
    • Flexbox
    • Form
    • Images & Finalizing App
    • Nav & Footer
  • Project 2 - Compplex Newsletter Page Check Final Code Here

⚙ Project Details  

Disclaimer ⚠ : This project is for educational purposes only. Please do not use it for commercial applications without proper modifications.

How to build the project ❓

• Open App 1 or App 2, navigate to the index.html file, and locate the commented-out topics. Match these numbers with the corresponding sections in the style.css file.

• Once you’ve identified the commented numbering in both index.html and style.css, begin building the application step by step, following the sequence.

• If you notice that some commented numbers are not in sequence, don’t worry. Skip those sections for now and continue building, as those numbers will be addressed later in the process.