Projects, practices and exercises using HTML5, CSS3 and Sass
A web challenge form Frontend Mentor
- ๐ฏ Main Goal: Use BEM, flexbox and Mobile First workflow design to design a card component with a Qr image
- ๐น๏ธ Live Demo: link
- ๐๏ธ Repository: link
- ๐งโ๐ป Frontend Mentor: link
- ๐ต Level: Newbie
A web challenge form Frontend Mentor
- ๐ฏ Main Goal: Use BEM, flexbox and Mobile First workflow design to design a card component with an image overlaid on the top third of the card
- ๐น๏ธ Live Demo: link
- ๐๏ธ Repository: link
- ๐งโ๐ป Frontend Mentor: link
- ๐ต Level: Newbie
A web challenge form Frontend Mentor
- ๐ฏ Main Goal: Use Every Layout, BEM, flexbox and Mobile First workflow design.
- ๐น๏ธ Live Demo: GitHub
- ๐๏ธ Repository: link
- ๐งโ๐ป Frontend Mentor: link
- ๐ต Level: Newbie
A web challenge form Frontend Mentor
- ๐ฏ Main Goal: Use Every Layout, BEM, flexbox and Mobile First workflow design with an image that changes location based on device type.
- ๐น๏ธ Live Demo: GitHub
- ๐๏ธ Repository: link
- ๐ Solution URL on Frontend Mentor: link
- ๐ต Level: Newbie
A web challenge form Frontend Mentor
- ๐ฏ Main Goal: Use Every Layout, BEM, flexbox and Mobile First workflow design with an image showing a translucent layer and an icon when hovering over it.
- ๐๏ธ Repository: link
- ๐น๏ธ Live Demo: GitHub
- ๐ Solution URL on Frontend Mentor: link
- ๐ต Level: Newbie
A web challenge form Frontend Mentor
- ๐ฏ Main Goal: Use BEM, flexbox and Mobile First workflow design.
- ๐๏ธ Repository: link
- ๐น๏ธ Live Demo: link
- ๐ Solution URL on Frontend Mentor: link
- ๐ต Level: Newbie
A web challenge form Frontend Mentor
- ๐ฏ Main Goal: Use BEM, flexbox and Mobile First workflow design and basic transition.
- ๐๏ธ Repository: link
- ๐น๏ธ Live Demo: link
- ๐ Solution URL on Frontend Mentor: link
- ๐ต Level: Newbie
A web challenge form Frontend Mentor
- ๐ฏ Main Goal: Use Grid to present a layout of one column for mobile and three columns for desktop
- ๐๏ธ Repository: link
- ๐น๏ธ Live Demo: link
- ๐ Solution URL on Frontend Mentor: link
- ๐ต Level: Newbie
A web challenge form Frontend Mentor
- ๐ฏ Main Goal: Use flexbox and Mobile First workflow design.
- ๐๏ธ Repository: link
- ๐น๏ธ Live Demo: link
- Frontend Mentor: link
- ๐ต Level: Newbie
A web challenge form Frontend Mentor
- ๐ฏ Main Goal: Use BEM, flexbox and Mobile First workflow design to design the hero section of a landing page
- ๐๏ธ Repository: link
- ๐น๏ธ Live Demo: link
- ๐ Frontend Mentor: link
- ๐ต Level: Newbie
A web challenge form Frontend Mentor
- ๐ฏ Main Goal: Use BEM, flexbox and Mobile First workflow design to design a basic landing page to three types of viewport: mobile, tablet and desktop
- ๐๏ธ Repository: link
- ๐น๏ธ Live Demo: link
- ๐ Frontend Mentor: link
- ๐ต Level: Newbie
A web challenge form Frontend Mentor