Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/lil-bee/responsivewebdev-devchallenges.io
- Owner: lil-bee
- Created: 2023-09-18T22:18:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-26T04:32:47.000Z (27 days ago)
- Last Synced: 2024-11-26T05:25:22.850Z (27 days ago)
- Topics: astro, responsive-website
- Homepage:
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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)