This video is a timelapse of building the
website for my course,
Responsive Design for Beginners.
I’m going to walk you through the process
of how I built this website.
It’s not a tutorial per se, but more just
showing you my approach when I’m coding.
I’m still in the process of creating this
course, but you can sign up for updates on
its progress as well as be the first to find out
when it launches.
Link is down below in the description.
All right, let’s get into it!
In my workflow I generally use VS Code as
my code editor, and I’m running Gulp to compile
My Sass files to CSS and run a local server
On the right side I have Adobe XD which is
a free program I used to design this website
before building it.
First off, I already have my index.html file
built and some Sass/SCSS files.
I’m creating partial Sass files so that my
styles can get separated out which is better
for organization and finding things later
In this setup I’m roughly dividing my Sass
files into two categories:
One is Utilities, which are variables and
Sass mixins that I’m going to use and reuse
throughout the build.
This would be for storing colors, spacing,
breakpoints, things like that.
Then I have a Components folder, where I’ll
keep individual design patterns.
For example, styles for the header, hero area,
featured blocks– I separate all those out
into their own files.
This is part of the BEM or block-element-modifier
architecture that I use in my Sass styles.
When I build websites I like to start from
the top with the header, and work my way down
the page all the way to the footer.
Right now I’m working on the header and creating
some global button styles for those top nav
I’m using a lot of helper classes so that
I can easily create more button elements later
on with the same styles just by adding that
“button” class along with the specific style.
Generally when building out sections I start
by adding the HTML markup first, then moving
on to adding the styles.
You can see here in the top nav I have everything
in an unordered list, so it is pretty bare
bones until the styles get added in.
For the top nav layout, I’m using flexbox
to put the logo on the far left and the text
links all on the right.
You could also use CSS grid for this, and
I’ll probably build a grid version of this
nav for the final course.
Once I have the basic layout and styles set,
I’ll go back and polish things up, get that
spacing and alignment just right so everything
matches the design.
You can see here I started tweaking the design
itself to make those buttons up in the top
nav a bit smaller.
They just seemed kinda big.
I’m using an SCSS function to convert from
pixels to rems here.
And I’m using it for all my font sizes and
spacing as well.
This is because rems in general are better
for accessibility, allowing the user to change
their browser base font size to adjust the
Now that the desktop nav is set, the next
thing is building the mobile hamburger menu.
One thing I do a lot when building is checking
other websites that I think follow best practices.
So here I’m looking at the Bootstrap and CSS
Tricks sites to see how they handle their
I’m building the hamburger toggle by creating
3 spans, one for each of those three white
I also am hiding the toggle on desktop so
it only will show up on mobile.
I’m creating some helper classes along with
that breakpoint mixin to either hide or show
the toggle depending on the viewport.
The next thing is building the menu that pops
up when you click the toggle on mobile.
For the nav links I actually am using the
same HTML markup for both mobile and desktop
navs and just styling them differently.
This way I don’t have to have two sets of
links, one for mobile and one for desktop.
It’s just a little more minimal that way.
Styling those mobile links, so that they’re
readable and also centered.
Next up we want the hamburger toggle to animate
to an X when it is open.
So on open I’m hiding the middle line, then
using a transform to angle the top and bottom
click the toggle.
And some CSS keyframe animations for hiding
and showing the mobile menu itself.
All right, now we are on to the hero section!
I’m adding the markup to the index.html file,
and creating a new Sass partial, hero.scss,
for the hero component.
You can also see that I’m tweaking the button
styles to add that teal button.
And adding additional styles for the hover
state, so that the teal changes to a darker
For the hover state I’m using a built-in Sass
These Sass modules come with utility functions
that you can use.
And they’re really handy for things like changing
an existing color to be lighter or darker
by a certain percentage.
And now it’s time for the unicorn!
For the unicorn image and all the other images,
I export them from Adobe XD as SVGs.
For the font sizes I originally was doing
traditional responsive styles with media queries.
But I’m changing this here to use the CSS
With clamp you set a min and max font size,
then a viewport width size that acts kind
of like a breakpoint to determine when to
start sizing up the text.
And you don’t even need media queries for
Here I’m styling the layout for the hero so
there’s text on the left and the unicorn on
the right for desktop.
I’m also spending some time adding global
styles for the section headlines and descriptions,
so they have consistent font-sizes, line-height
I have a spacing.scss file which stores all
the space amounts in increasing order as variables.
Starting from 10px (converted to rems) and
And I’m doing the same thing for font-sizes.
It might seem unnecessary to do this, but
I think it’s good because it forces you to
use the same spacing and font sizes throughout
This ensures that the styles will be consistent.
And I’m using the clamp function and my custom
pixels to rem function for all of these.
If it seems like there’s a lot of work early
on in this website build, you’d be right.
At the beginning I spend a lot of time setting
the styles up with variables, mixins, functions
and helper classes.
It’s an upfront investment that will make
things faster later.
Now we’re tweaking those hero styles and using
the order property in flexbox to make the
unicorn first before the hero text on mobile,
and after the hero text on desktop.
The next part is that angled bottom of the
This part is a bit tricky because the angle
has that lighter purple border, and the unicorn
image is overlapping the purple background
and going into the next section.
I tried a few approaches before I figured
out the best way forward.
Right now I’m using a pseudo-element and a
transform skew to try to rotate it to that
I’m also trying a clip path for the hero section
to cut out that angle as well.
So just trying different things here.
You can see here I’m kinda struggling with
trying to add the clip-path to both the dark
purple hero and the light purple pseudo-element.
It did work in the end, but I kinda felt like
it was requiring a lot of code in the styles
to add two clip-paths to both elements.
Now I’m commenting out the clip-paths, and
instead skewing the before pseudo-element
and trying to position it in the right place.
And adding a light purple bottom border to
I feel like this approach works well for all
The Stripe website uses this same transform
skew method for their angled elements.
OK, now that the hero is in a good place,
we are checking on how the mobile menu interaction
I’m adding a keyframe animation for the fade
in and fade out of the mobile menu.
This utilizes the visibility and opacity properties
to make the animation work.
And I’m tieing it to helper classes that I
that animation when you click to open or close
Moving on to the 3-column feature blocks below
I’m adding the markup and then exporting the
SVGs for each of those teal icon images.
And you can see I’m going back a bit, trying
to tweak the angled hero so that it works
on large viewport widths.
I’m not ashamed to admit that I did look at
the Stripe homepage to see how they coded
their angled elements.
And they’re using the transform skew.
I’m also adjusting the space between the hero
and the featured blocks on desktop and on
Getting that spacing right.
I’m also tweaking the mobile styles for the
The featured blocks now get their own Sass
You can see I’m using that BEM approach for
my classnames with the ampersand and underscores.
For this section I wanted to create both a
CSS grid and a flexbox version of the 3-column
layout, with their own sets of styles.
There’s almost always more than one way to
And I’m trying to show this in the course
by creating alternate approaches and showing
them to you.
For the featured blocks we’re centering both
icon and text on mobile, and then left aligning
them on desktop.
Now I have both grid and flexbox versions
And tweaking them so that the two versions
look exactly the same.
Firefox has a grid and flexbox inspector,
which is what I’m using to create the lines
and numbers that you see.
It’s a really helpful tool to help debug either
of those layouts.
Next up is that magenta fullwidth feature
This one isn’t as complicated since everything
is in just one column on both mobile and desktop.
And it’s always centered.
So we’re creating its own Sass file and also
adjusting our spacing and font-size variables
as we go through the site.
We’re adding styles for the text and that
To center the content I used margin auto for
the left and right.
I could have used flexbox or grid to center
as well, but it would require writing more
than 1 line of CSS.
I like sticking with the shortest solution,
if I can.
Now that the fullwidth feature block is done,
we’re on to the alternating blocks.
The idea here is to use almost the same markup
for each block, and use the styles to control
what side the image and text are on.
As I go through the site, I’m also creating
some global styles.
One thing I do is use a container element
to contain, for lack of a better word, the
content in each section.
The container has a max-width so on really
large screens it won’t be too wide.
And I’m also adding some padding, more on
the top and bottom, and just a bit on left
That way all I need to do for a new section
is add the “container” helper class, and it
will automatically have all my styles.
For the alternating blocks I’m using the flexbox
order property to make the image first on
mobile and second on desktop.
CSS grid has a similar feature, so either
of those would work.
And I’m adding in the styles for the image
and text in the blocks.
Now adding in the space between items, using
those spacing variables I created earlier.
And making sure the images on mobile are at
a max-width of 100% so they don’t go off the
page and cause horizontal scrolling.
Here we’re going back to the mobile menu,
and preventing scrolling when the menu is
We’re doing this by adding a “no scroll” class
And adding that light purple border on the
The next section is the quote block.
And I’m realizing here that both the hero
and quote blocks have that angled bottom (and
the quote has top angle too).
So after adding the markup for the quote section,
I’m putting all the angled styles in a new
Sass file, decorations.scss.
And tieing those styles to the “angled-top”
and “angled-bottom” helper classes.
Then tweaking the angled styles so they look
right for both sections and on all viewport
Now we’re working on the quote block content
Again, we’ve made a new Sass file for all
of these, called quote.scss.
And adding in style rules for the layout,
text and colors.
We’ve saved the quotation marks as an SVG
image and are loading them as pseudo-elements
of the quote content.
This lets me position the SVGs in relation
to the quote itself.
I’m using the same image file for both before
and after quotes, and rotating the ending
quotation marks 180 degrees with a transform.
Then centering the beginning quotation marks
and tweaking the styles a bit for the mobile
It took a little time to get the spacing of
the quote content and the angled top and bottom,
but eventually we got it all set and looking
pretty good for all devices.
The quote content is centered on mobile nad
then left aligned on desktop.
I’m also adjusting the size of that circle
author image so that it’s smaller on mobile
to match what’s in the design.
Next up is the blog post section!
This one is a pretty fun one, because you
have the 3-column layout like in the feature
blocks up top.
But each blog post is a card with a sort of
complex layout, with the blog post content
and that little category label.
I’m building out the blog styles in blog.scss.
And exporting the background images from Adobe
XD as JPGs.
You can see here that I’m also tweaking the
design file itself.
This was to adjust the spacing in the cards
so that they match the spacing variables that
I’ve been using.
Now that we got the design figured out, I’m
just building one card right now to get the
styles all set.
Then I can copy and paste to create the other
In this first set of blog posts I’m using
flexbox to layout the card content– the category
label and the text in the white square.
I’m also adjusting the teal color of that
first label to match the hover state of the
teal button in the hero.
It’s all part of trying to make the design
as consistent as possible and reusing things
to make the code more minimal.
So the first card is pretty much set style-wise,
so we’re copying and pasting to make the two
And changing the card text to match what’s
in the design.
You might notice I’m trying to make the card
content different lengths in each card.
This will help make sure the code can handle
text if it’s longer or shorter.
For this first row of blog posts cards, I’m
using CSS grid to layout the cards.
I’m using grid template areas, which I prefer
as opposed to having to set a start and end
for each individual grid item.
The second row of cards is using flexbox to
And I’m manually adding a margin between cards
because flexbox gap isn’t widely supported
Now I’m adjusting the mobile card styles.
And also looking at adding a max-width so
content isn’t suuuper wide on tablet devices.
I’m doing this by creating a mixin that will
add that max-width for tablet viewports and
I could also have created this with a new
helper class, but decided on a mixin so I
wouldn’t have to add the new class in the
markup to all the elements that are using
But doing so would have been a fine solution
Now I’m adding that mixin to the most of the
blocks on the page, except for the hero content.
And tweaking the buttons in the hero on mobile
so they’re centered.
Here I’m fixing a slight bug on that hero
angled bottom, because on the far right the
darker purple is overlapping the light purple
border a little bit.
I also am adding hover state styles for the
blog post cards.
So when you hover over a card it will move
up slightly and have a more defined box-shadow.
And putting in a title for the blog section
to give it more context on the page for users.
I felt like cards by themselves weren’t really
enough to tell the user that these links are
So I’m adjusting both the design file so it’s
up to date, and adding the title to the page
Adding the title and adjusting the mobile
Making sure everything looks good on desktop
and mobile widths, and tweaking that angled
hero on mobile just a little more.
All right, we’re getting closer to the finish
The next section is simpler, it’s a fullwidth
CTA (or call-to-action) block.
I’m copying the earlier fullwidth feature
block then adding in the background gradient
and the CTA content.
You can see here I’m playing around with the
linear-gradient background a bit, adding in
some dark gray.
Now, on to the signup form section!
All the other buttons on the page are anchor
links styled to look like buttons.
But since this button is part of a form I’m
using the actual button element.
I’m also making the form textbox more accessible
by adding a form label so that screen readers
can read the name of the textbox.
And using CSS to hide the label from view,
so you won’t see it on the screen.
Adding styles for the signup section and adjusting
the spacing for it in the design file, for
both desktop and mobile.
Making some other random tweaks to the footer
I’m also making some design tweaks to the
the footer actually took me quite a while
to change around until I was actually happy
All right, back to finish the form styles.
With form elements like textboxes and buttons,
there’s always a default style that your browser
will use– you know the boring gray button
and textbox with weird shadowed borders.
So if you want them to look more custom you
have to override those styles for the input
Got the basic styles I want, and adjusting
the margin and padding, so it looks good on
desktop and mobile.
I’m using flexbox here to layout the textbox
and button elements so they’re on the same
row and align nicely.
Now I’m adding in alternate versions of the
form to show you how to do the layout with
My personal go-to tends to be flexbox, maybe
because I learned it first?
But I think either one works in this situation.
And just for kicks I’m experimenting with
adding the form elements using neither flex
nor grid, but inline-block.
I did get it to work but I think flex or grid
just make really easy to put things side by
side, especially if you want them to fit a
certain total width on the page.
Working on the footer now and adding social
media icons from Font Awesome to the design.
I just felt like those recognizable icons
help the links not be quite so monotonous.
And you can see here I’m checking out other
sites like CSS Tricks and Stripe to see how
they layout their footers.
It seems like the 3 or 4-column layout going
fulwidth is very common.
If you follow me on Twitter you may have seen
the poll I put up with an A and B version
of the footer to see what people liked better.
About 80% like the 4-column fullwidth with
everything left-aligned, as opposed to a 3-column
And someone on Twitter also suggested moving
the signup form into the footer itself.
I really liked this idea because it would
let me utilize the order property in flexbox
and grid to put items in a different order
on mobile and desktop.
So thanks to everyone who weighed in on the
And now that I have the design of the footer
all set, I’m coding it, again adding the HTML
Then putting the footer styles in its own
Sass file, footer.scss.
I’ve gotta say, building a website from a
complete design file is a lot easier than
trying to finalize the design as you’re building
What’s the saying, building the airplane while
it’s in the air?
Because I changed the design after having
built the fullwidth signup section already,
I’m now having to wrangle the code to move
everything into the footer.
And reorgnize my Sass files.
It’s a bit of a pain, but honestly it happens.
With this 4-column layout the form elements
don’t have as much horizontal space as they
did in the fullwidth version.
So I’m shrinking down the font-size for both
the textbox and the submit button to fit things
Now styling the actual links and headers for
the text links, and adding in the disclaimer
text at the bottom.
Right now I’m using CSS grid to layout the
footer links, creating a 4-column grid template,
with each column of equal width.
For the mobile version of the footer, I’m
centering all the text and everything is stacked
to one column.
Adding in that dark logo SVG and sizing it
And adding spacing between the social links.
For the social icons, I originally was loading
the SVGs in an image tag.
But in order to allow me to change their color
on hover, I made them inline SVGs in the actual
That way I can style their hover states the
same way as the text links.
And adding the the Font Awesome credit in
the disclaimer section.
I’m also moving the social links into an unordered
list, as I believe that’s best practice for
lists of links.
I did the same thing up in the top navigation.
Now I’m tweaking the legal disclaimer section
and adding some spacing.
For the form elements, I’m putting the textbox
and button side by side on mobile now too,
not just desktop.
And I’m removing the inline-block version
of the form, just because I feel like it’s
not the optimal approach.
So just sticking with flexbox and grid versions
Now I’m using grid-template-areas to layout
the 4 columns in the footer.
And putting the signup form last in the order
I realized that the SVGs for the logos had
empty space on the top and bottom, so I had
to re-export them, and tweak the viewbox to
remove the extra space.
This is for both logos in the header and footer.
Now just tweaking the spacing for the footer
And I’m adding a flexbox version of the footer,
since the initial version was using grid for
For the footer I think both are equally good
options, so it’s really up to your own preference
for cases like these.
Let’s take a look at the finished website!
I think it turned out pretty well.
Again, this website is what we’ll be building
in my upcoming course, Responsive Design for
I’m currently still making the course material–
building the website was just the first step.
If you’re interested in being the first to
know when the course launches, and getting
more detailed updates on the progress, you
can signup to get emails, linked down below
in the description.
Thanks for watching, and we’ll see you next