Frontend Mentor - Fylo dark theme landing page solution

This is a solution to the Fylo dark theme 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
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: GitHub repository
• Live Site URL: Live Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Laptop-first workflow
• Visual Studio Code
• Google fonts
• Font Awesome

What I learned

I learnt a lot while undergoing this task, especially getting to learn and implement CSS Flexbox and Grid. I'm used to float and CSS Box model to position my contents and style my layouts. This is far more easier especially to create responsive websites.

<div class="container">
  <div> Content 1</div>
  <div> Content 2 </div>
  <div> Content 3</div>
  <div> Content 4</div>
</div>

.container {
  color: papayawhip;
  display: flex;  /* Using Flexbox */
  justify-content: center;
}

/* To make it responsive */
 @media(max-width:375px){
     .container{
       flex-direction:column;
     }
 }

Continued development

Now I have gotten a good background on HTML and CSS, I will move to Javascript in order to complete my Frontend course. And the technique I learnt from this project that I will stick to, is using CSS Flexbox and Grid to make responsive websites.

Useful resources

• Youtube
• Google

Author

• Frontend Mentor - @austinet
• Twitter - @udhe.austine

Acknowledgments

I will like to acknowledge God for giving me the grace to be patient with myself while going through the huddles of carrying out this project. And also Front end mentor, Side Hustle team for linking me up to my first completed real life web development project. And also Google, Youtube and ctrl+z lol.