Frontend Mentor - Skilled e-learning landing page solution

This is a solution to the Skilled e-learning landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
    • Desktop Layout
    • Tablet Layout
    • Mobile Layout
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• To-Do

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

• Desktop Layout

• Tablet Layout

• Mobile Layout

Links

• Website URL: Github Page

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Desktop-first workflow
• Sass - CSS extension

What I learned

My main focus on the project was to use a CSS extension in order to write cleaner code, as well as practice my Front-End developer skills by, giving a Figma model, create the html and css to get the desired view of the page. I used Sass to achieve this in which I learned how to use the next funcionalities in Sass:

• Variables

// Heading
$heading-font-color: #13183f;
$heading-font-weight: weight(extra-bold);

//Body
$body-font-color: #83869A ;

• Mixins

@mixin tablet {
    @media only screen and (max-width: $tablet-size){
        @content;
    }
}

@mixin mobile {
    @media only screen and (max-width: $mobile-size){
        @content;
    }
}

• Functions

@function weight($weight-name){
    @return map-get($plus-jakarta-sans-weights , $weight-name);
}

• Extensions

.btn3 {
    @extend .btn2;
    background: $gradient2;
}

Continued development

Throughout the challenge in order to position and align elements like the cards I used the grid and flexbox methods in CSS.

I would love to refine my use of this two concepts and get more comfortable with them in order to finish responsive websites faster, and with better quality.

I would also like to incorporate elements like animations and scroll effects to my next projects.

Useful resources

• CSS-Tricks Grid - This helped me with the grid design, since its a cheatsheet of the basics of using grid in CSS. I really liked how well explained it is and the examples it gives.

• CSS-Tricks Flexbox - This is another resourse from the same page, that focuses on the Flexbox system. As well as the grid one, they explained the concepts really well and the examples are easy to understand.

Author

• Website - Hugo S Juarez P
• Frontend Mentor - @HugoSJuarez
• Linkedin - Hugo Juarez

To-Do

• Finish the challenge
• Upload to Github Pages
• Make portfolio website
• Upload it to the portfolio website