SASS Project

Front End Mentor Landing Page Challenge
View Demo

About The Project

Front End Developer Portfolio Website

UX / UI Design:

• Design replicated from Frontendmentor.io
• Aesthetic: modern, bright, bold, captivating
• Main Colors:

• #fad400
• #25564b
• #19536b
• #ffffff

• Simple fonts with different weights for Desktop and mobile version

• Main Fonts from Google Fonts:

• 'Fraunces', serif;
• 'Barlow', sans-serif;

Built With

• HTML
• CSS
• JavaScript
• Host: Netlify

What did I learn:

• I learned how to use SASS (SCSS) preprocessor
• I had problems with some of the SASS dependencies in the json folder and eventually ended up starting the project over again.
• I should have used the Visual Studio Code SASS extension instead of adding a json package and adding the required dependencies (autoprefixer, concat, node-sass) so that the SASS file would create a CSS file, this was unnecessary
• Used CSS Grid, as I usually Flexbox

What problem does it solve?

• SASS makes creating websites more convenient

Project View

Desktop View

Branding Detail - created with grid

Testimonials

Mobile View

Contact

Linkedin: Shannon Mettry

Source Code

Website Link