Responsive Web Dev - DevChallenges.io

Learn and Practice Responsive Web Development by building 8 Websites with given designs by Devchallenges.io.

Table of Contents

• Overview
  • Built With
• Challenges

Overview

• What was your experience?
  • For the initial challenges, they felt more difficult and took quite a long time to figure out certain approaches. However, after completing each challenge, the work gradually became easier over time. :)
• What have you learned/improved?
  • bem naming
  • CSS Variables
  • Clamp for Responsive Typography
  • Posistion
  • Layouting(Flex, Grid)
  • Simple animation
  • Responsive site
• Your wisdom? :)
  • use bem naming and good css folder structure for easy maintaining
  • Follow the tutorial in the platform, it will helps a lot for solving the challenges
  • Consistency

Built With

• HTML
• CSS
• Javascript
• Astro

Challenges

This application/site was created as a submission to a DevChallenges challenge.

1. 404 Page ___ Demo | More about the project

• intro to simple layouting and responsiveness

2. My Team Page ___ Demo | More about the project

• Responsive Image
• Styling spesific Elements using nth-child

3. Interior Consultant Page ___ Demo | More about the project

• responsive navbar
• CSS position

4. Recipe Page ___ Demo | More about the project

• Responsive Typography Using Clamp
• Styling Checkbox
• Styling list

5. My Gallery Page ___ Demo | More about the project

• Masonry Layout using CSS Grid

6. Checkout Page ___ Demo | More about the project

• Form Validation with HTML
• Styling input

7. Edie Homepage ___ Demo | More about the project

• First Landing Page
• Responsive Navbar
• simple hover animation
• styling input

8. Portofolio Page ___ Demo | More about the project

• build with theme in astro & tailwind by Gxanshu