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

• 🎯 Main Goal: Use BEM, flexbox and Mobile First workflow design a basic landing page with header, main, footer and cards to three types of viewport: mobile, tablet and desktop
• 🗂️ Repository: link
• 🕹️ Live Demo: link
• 📄 Solution URL on Frontend Mentor: link
• 🔵 Level: Newbie