DEV Community

Cover image for How to start Front-end Coding Challenges ? - Frontend Mentor
Hari Ram
Hari Ram

Posted on

How to start Front-end Coding Challenges ? - Frontend Mentor

We all know that there is a website called Frontend Mentor where we'll be given some awesome real world front-end challenges to practice and enhance our frontend skills.

Thanks to Frontend Mentor, I completed about ten challenges, I really learnt a lot.

Get Started

Frontend Mentor

  • Open a challenge and download starter files (as .zip)

Frontend Mentor gif

Start your project

  • Open your projects folder.
  • Create a new directory
frontend-[CHALLENGE NAME]
├── assets
│   ├── designs
│   └── images
├── css
│   └── styles.css
├── index.html
├── readme.md
├── scripts
│   └── scripts.js
├── style-guide.md
└── .gitignore
Enter fullscreen mode Exit fullscreen mode

I use the above project structure. You'll get style-guide.md and image files from starters. Just copy them here.

designs directory contains your output screenshots and if you wish, you can include them in your readme.md.

HTML starter template

I created a little snippet in my Visual Code Editor and it generates starter template for Frontend Mentor in one tab.

Here it is,

Alt Text

Here is the starter template index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Frontend Mentor | Challenge Name</title>
    <meta
      name="description"
      content="This is a front-end coding challenge - Challenge Name"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
      href="https://fonts.googleapis.com/"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>
      <!-- Happy Coding -->
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS Styles

When it comes to CSS, I always love to start from scratch.

No website is completely unstyled.

Browser has a default style sheet called User Agent Stylesheet which adds margin to headings and paragraphs and applies font properties to all elements.

I usually reset all the styles and I start from scratch.

Here is my styles.css

:root{
  /* colors and fonts */
  --font: "Montserrat", sans-serif;
  --white: #ffffff;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  font-size: 62.5%;
}

html, body{
  height: 100%;
}

body{
  width: 100%;
  font-family: var(--font);
}

/* Other rule-sets */

Enter fullscreen mode Exit fullscreen mode

There we go, Now we can start writing actual content to design the page.

Frontend Mentor Challenges will be really helpful for those who are looking to enhance their frontend skills.

Top comments (5)

Collapse
 
max88git profile image
Max Lockwood

Thank you for sharing! This was a fantastic read. I've completed a few Frontend Mentor challenges but never knew how to begin a project.

Collapse
 
aaronmccollum profile image
Aaron McCollum

Thanks for sharing! I'm going to check this out.

Collapse
 
nemanajay profile image
Ajay Neman

Thank u so much man. I couldn't know about this. Thanks for sharing

Collapse
 
hariramjp777 profile image
Hari Ram

Cool

Collapse
 
moniv9 profile image
Mohit Verma

To prepare for your frontend/javascript interview. You can look at this ebook I created with collections of commonly asked frontend questions with solution.

mohit8.gumroad.com/l/ygass