Web Workshop day 05 and 06
Let's do a frontendmentor.io challenge!
- I'll be doing this challenge live!
- GH pages deployment
- Flexbox
- Using custom fonts from google fonts
- Recording for Session 5: https://www.youtube.com/watch?v=1vH3Q2X1UHU
Here are a few resources that you can checkout later
- https://developer.mozilla.org/en-US/ – You already know what this is 😉
- https://web.dev/ – Articles and documentation by Google on how to code for the web
- https://css-tricks.com/ – Articles related to website design
Website for design inspirations
- codepen (https://codepen.io/)
- Dribble (https://dribbble.com/)
- Behance (https://www.behance.net/)
Assignments
We were able to finish the mobile design during the live session. Try to finish it by making it look good for the dektop. The same HTML and CSS has too look good on mobile (575px) and desktop (1440px). You'll need to learn and use CSS Media Queries for that.
You'll be able to find the finished version of this challenge here in a few days but try to do it on your own before looking!
Do any one from the below suggested frontendmentor challenges
- https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa
- https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj
- https://www.frontendmentor.io/challenges/huddle-landing-page-with-alternating-feature-blocks-5ca5f5981e82137ec91a5100
- https://www.frontendmentor.io/challenges/clipboard-landing-page-5cc9bccd6c4c91111378ecb9
These are given for your practice so don't hesitate to do all of them if you want to.