Steps to replicate a design with only HTML and CSS
Thu Nghiem
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:
