How I made a responsive website with HTML & CSS

It’s been over 30 days since I started learning web development.

Fast-forward.

On day 29, I had the idea of working on milestone projects rather than just watching tutorials for hours daily.

The first project on the list was a responsive website.

Designed by author

Milestone Projects tracker on Notion

If you are in a hurry…

Here’s the live site → [LINK]

and The GitHub repository → [LINK]

I also followed this tutorial on YouTube.

But if you’d like to learn something new…

Here are some key insights I learned that would change how I write code in the future.

1. Think in Frameworks:

Just like we designers set styles and variables in Figma. The same can be applied in CSS. For example, Bootstrap and Tailwind, but you can go hardcore and make your framework.

Here’s a snippet of my utilities.css file

/* Text colors */
.text-primary {
    color: var(--primary-color);
}

.text-secondary {
    color: var(--secondary-color);
}
.text-dark {
    color: var(--dark-color);
}
.text-light {
    color: var(--light-color);
}
/* Text sizes */
.lead {
    font-size: 20px;
}
.sm {
    font-size: 1rem;
}
.md {
    font-size: 2rem;
}
.lg {
    font-size: 3rem;
}
.xl {
    font-size: 4rem;
}
.text-center {
    text-align: center;
}

I think it’s a smart way to code rather than repeating CSS styles over every element.

2. Setting Color styles in CSS

If I wanted to add a specific color in CSS, I would have to use either:

/* HEX */
#234567

/* RGBA */
rgba (35, 69, 103, 100%)

/* HSLA */
hsla (210, 49.3, 27.1, 100%)

These would give the same teal color.

Let’s assume I would like to apply this color to multiple parts of my website.

Copying it for every element would be tiresome and repetitive.

Here’s where variables come into play.

/* Set the color style to a name */
:root {
    --primary-color: #047aed;
    --secondary-color: #1c3fa8;
    --dark-color: #002240;
}

/* Use the name when next you need the color */
.navbar {
    background-color: var(--primary-color);
}

Easy peasy, lemon squeezy 🍋

3. Animating in CSS

I know a bit about motion graphics as a designer, but the world of animation with code is just DIFFERENT.

PS. Check the website hero section to see the animation at play.

Here’s how it works:

/* Set keyframes to a specific keyword (I used camel-casing) */

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
/* -100% of the width in position, meaning 
If your width is 50px, the position starts at -50px */
    100% {
        transform: translateX(0);
    }
}
/* 0 of the width in position, meaning be at the default position */
------
.showcase-text {
        animation: slideInFromTop 1s ease-in; 
    /* Then call it here */
    }

I know it can be confusing, but I hope you get the idea.

Other things I learned but still yet to grasp:

1. first-child selectors
2. pseudo selectors
3. flexbox & grids in complex scenarios

That’s it my friends!

I hope coding isn’t as hard as it looks now.

Check the live website HERE

Watch the tutorial I watched: HERE

About Me

I’m Abdussalam, and I’m not just a designer.

I am on the path to self-discovery by following my curiosities.

Coding just got on the list.

I’m documenting my career journey to help folks like you and my younger self because I’m grateful to the few I’ve read that have shaped my perspective.

You can catch me on;

Instagram

Twitter

LinkedIn

YouTube

Also, my Weekly Newsletter

See you in the next one — a Todo List App