Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lil-bee/responsivewebdev-devchallenges.io

Learn and Practice Responsive Web Development by building 8 Websites with given designs by Devchallenges.io.
https://github.com/lil-bee/responsivewebdev-devchallenges.io

astro responsive-website

Last synced: 14 days ago
JSON representation

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

Awesome Lists containing this project

README

        

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](#overview)
- [Built With](#built-with)
- [Challenges](#challenges)

## Overview

![image](https://github.com/lil-bee/ResponsiveWebDev-DevChallenges.io/assets/61036950/fd7a8d4d-5e9e-44d0-840f-ae76d80c20f9)

- 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](https://astro.build/)

## Challenges

This application/site was created as a submission to a [DevChallenges](https://devchallenges.io/challenges) challenge.

1. 404 Page ___ [Demo](https://404-lilbee.netlify.app/) | [More about the project](https://github.com/lil-bee/404-Not-Found)
> - intro to simple layouting and responsiveness
2. My Team Page ___ [Demo](https://myteam-lilbee.netlify.app/) | [More about the project](https://github.com/lil-bee/MyTeam)
> - Responsive Image
> - Styling spesific Elements using nth-child
3. Interior Consultant Page ___ [Demo](https://interiorconsultant-lilbee.netlify.app/) | [More about the project](https://github.com/lil-bee/interior-consultant)
> - responsive navbar
> - CSS position
4. Recipe Page ___ [Demo](https://cheesecake-recipe-lilbee.netlify.app/) | [More about the project](https://github.com/lil-bee/cheesecake-recipe)
> - Responsive Typography Using Clamp
> - Styling Checkbox
> - Styling list
5. My Gallery Page ___ [Demo](https://checkout-lilbee.netlify.app/) | [More about the project](https://github.com/lil-bee/gallery-page)
> - Masonry Layout using CSS Grid
6. Checkout Page ___ [Demo](https://checkout-lilbee.netlify.app/) | [More about the project](https://github.com/lil-bee/checkout-page)
> - Form Validation with HTML
> - Styling input
7. Edie Homepage ___ [Demo](https://ediehomepage-lilbee.netlify.app/) | [More about the project](https://github.com/lil-bee/Edie-Homepage)
> - First Landing Page
> - Responsive Navbar
> - simple hover animation
> - styling input
8. Portofolio Page ___ [Demo](https://fdhlakbr.netlify.app/) | [More about the project](https://github.com/lil-bee/portofolio)
> - build with theme in astro & tailwind by [Gxanshu](https://github.com/gxanshu/astro-decap-cms-starter)