Thu Nghiem

Posted on Jul 19, 2020 • Edited on Jul 23, 2020

Steps to replicate a design with only HTML and CSS

#webdev #beginners #tutorial

Introduction

Many people make mistakes that they do not plan before implementing a design. Because of that they usually get stuck or the design does not turn out as they planned. Here are the steps that I take in order to ensure that implementing is an enjoyable experience and it will turn out to be what I want.

Given a design that shows my challenges page. We will try to translate it into code.

Step 1: Draw the layout

When working with HTML and CSS, you need to plan, you need to draw out the layout before getting started with coding.

You should break the layout to the smallest components and also check if they need a container or wrapper. Here an example of how I break down the layout. You can do it quickly in your head as well.

Step 2: Add HTML

After you have the structure layout, either on paper or your head, the next step is to work with HTML.

You need to decide which element it is. You can ask yourself: Is it a button? Which heading is that? Should it be flex or grid?...

In order to have the answers to these questions. One of the most important properties in CSS you need to understand is display. You need to know the differences at least between these values:

1. display: block

Displays an element as a block element (like <p>). It starts on a new line and takes up the whole width

2. display: inline

Displays an element as an inline element (like <span>). Any height and width properties will have no effect

3. display: flex

Displays an element as a block-level flex container

4. display: inline-block

Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values

With these 4 basic values of the display property, you can replicate almost every layout.

Step 3: Add classes

If you are working with CSS without any pre-processor, I recommend you to check out BEM naming. Try to think about components that can be reusable. For example in code below, card, tag, level, input,... are reusable components:

<div class="panel">
  <div class="heading">
    <h1>My challenges</h1>
    <i class="material-icons">trending_flat</i>
  </div>

  <p>Welcone back Thu, ready to continue your challenges</p>

  <div class="tabs">
    <button class="tabs__item tabs__item--active">In Progress</button>
    <button class="tabs__item">Completed</button>
    <button class="tabs__item">Favorite</button>
  </div>

  <div class="input-wrapper">
    <input class="input" type="text" placeholder="Search..."/>
  </div> 

  <div>
    <div class="card">
      <div class="card__image">
        <img src="https://firebasestorage.googleapis.com/v0/b/devchallenges-1234.appspot.com/o/challengesDesigns%2FPortfolioThumbnail.png?alt=media&token=417f625d-715a-4611-8215-2c19aaf490f9" alt="portfolio challenge" />          
      </div>

      <div class="card__content">
        <div class="tag">Responsive</div>
        <h5 class="card__content__title">Portfolio Challenge</h5>
        <div class="level">
          <label class="level__title">Intermediate</label>
          <div class="level__indicator">
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item"></span>
            <span class="level__indicator__item"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card__image">
        <img src="https://firebasestorage.googleapis.com/v0/b/devchallenges-1234.appspot.com/o/CatwikiThumbnail.png?alt=media&token=4a59b587-4766-48ac-ada0-d59fe12d924e" alt="catwiki challenge" />          
      </div>

      <div class="card__content">
        <div class="tag">Full-stack</div>
        <h5 class="card__content__title">CatWiki Challenge</h5>
        <div class="level">
          <label class="level__title">Advanced</label>
          <div class="level__indicator">
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Step 4: Work with CSS - the most fun part

There are few tips when starting to work with CSS to keep it consistent and easy:

tip 1:

Reset all the default stylings and use:

*, *:before, *:after {
    box-sizing: border-box;
}

tip 2:

Use CSS variables

:root {
  --font: 'Poppins', sans-serif;
  --primary-color: #FF7A4E;

  --grey-1: #F2F2F2;
  --grey-2: #BDBDBD;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.5rem;

  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  --rounded-sm: 8px;
  --rounded: 16px;

  --shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
}

Alright, so the styling is all up to you now. You can check out the final result here: Final Result

Step 4: Check it on mobile and add media query if needed.

@media only screen and (max-width: 600px)  {
  .card {
    display: block;
  }

  .card__image {
    width: 100%;
  }
}

Step 5: Fix your spacing and color if needed.

Checkout Figma for the correct font and spacing. And try to improve your design.

Wrapped up

My name is Thu, creator of devchallenges.io. I write blogs to help my users - students. If you wonder what devchallenge is. check it here: https://devchallenges.io/

Or connect with me:

Twitter: https://twitter.com/thunghiemdinh
Youtube: https://www.youtube.com/channel/UCmSmLukBF--YrKZ2g4akYAQ

DEV Community