Responsive web applications. Solutions to the Responsive Web Developer challenges from devChallenges.
- HTML
- CSS
- JavaScript
No frameworks like React or Angular, just vanilla JS.
- Zig-zag layout
- Responsive header
- Full page modal from header hamburger button
- Floating aside card
- Image gallery grid
- Checkout form with price computation (JavaScript)
- Single page split in sections with navbar at top
- Sample developer portfolio page with complex grid layout
| Code | Demo | Description |
|---|---|---|
| 404-not-found | https://404-not-found-903ea1.netlify.app/ | Layout of a typical 404 not found page |
| checkout-page | https://checkout-page-864c4b.netlify.app/ | Checkout page with a form which dynamically computes the total price |
| edie-homepage | https://edie-homepage-7509e4.netlify.app/ | Page for a web services provider with a dynamic header navbar (on mobile, hamburger button which displays a full page modal navbar) |
| interior-consultant | https://interior-consultant-774606.netlify.app/ | Interior consultant home page with navigation styling in the navbar and a relatively positioned card on top of an image |
| my-gallery | https://my-gallery-32b42e.netlify.app/ | User's profile page with a responsive image gallery gird |
| my-team-page | https://my-team-page-45cce8.netlify.app/ | Display team member's pictures along with name and title in a zig-zag layout |
| portfolio | https://portfolio-e73685.netlify.app/ | Sample developer portfolio page with a responsive grid layout |
| recipe-page | https://recipe-page-71b3b8.netlify.app/ | Recipe page with a floating aside card that stacks up on small screens |
Nicolás Rodríguez - LinkedIn