HTML-CSS-Practice

A collection of hands-on HTML and CSS practice projects to strengthen front-end development skills. Each project focuses on mastering layout techniques, responsive design, animations, and UI styling fundamentals.

✅ Daily Progress

📅 Day 1 – Basics

• Learned Button, Paragragh, HyperLink
• Practiced:
  • Button, paragraph, HyperLink with css properties.

📅 Day 2 – Basics

• Topics Covered:
  • Hover effects, transitions, text styling, CSS box model and image styling
• What I Practiced:
  • Re-created hover button effects inspired by popular websites like Amazon, Uber, GitHub, Bootstrap, and LinkedIn
  • Built pagination, stretch effects, and a 3D click animation for buttons
  • Experimented with text styles similar to those used in advertisements and news sites
• Outcome:
  • Gained a better understanding of how small CSS details like spacing, transitions, and hover timing contribute to professional-looking UI designs.

📅 Day 3 – Re-Design

• Topics Covered:
  • Layouts, Buttons, text styles, etc.,
• What I Practiced:
  • Re-created Ride Request Option of UBER.
  • Recreated Google Homepage without alignment.

📅 Day 4 – Re-Design with exact layout

• Topics Covered:
  • Div tag,
• What I Learned:
  • Recreated the design of Twitter Chat option using div tag.
  • Redesigned "Add a friend" Option using div tag.
  • And Basics of div tag option.

📆 Day 5 - Rest Day