Full timelapse + walkthrough of building my website

Hey everyone!

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
via Browsersync.

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
on.

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

links.

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
text size.

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

hamburger menus.

I’m building the hamburger toggle by creating
3 spans, one for each of those three white

lines.

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

lines.

Now adding the JavaScript to run when you
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

teal color.

For the hover state I’m using a built-in Sass
module, sass:color.

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
clamp() function.

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
it.

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
and spacing.

  How to Design a Website – A UX Wireframe Tutorial

I have a spacing.scss file which stores all
the space amounts in increasing order as variables.

Starting from 10px (converted to rems) and
on up.

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
the website.

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
hero.

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

angle.

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
it too.

I feel like this approach works well for all
viewport widths.

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

looks.

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
will add and remove via JavaScript to run

that animation when you click to open or close
the menu.

Moving on to the 3-column feature blocks below
the hero.

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

mobile.

Getting that spacing right.

I’m also tweaking the mobile styles for the
hero buttons.

The featured blocks now get their own Sass
file, features.scss.

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
build something.

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
built.

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
section.

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
laptop image.

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

and right.

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

  Planning & site map for Designing a website

open.

We’re doing this by adding a “no scroll” class
to the body via JavaScript, which turns off

overflow scroll.

And adding that light purple border on the
mobile menu.

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

widths.

Now we’re working on the quote block content
styles.

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

view.

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
two cards.

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

other cards.

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
layout.

And I’m manually adding a margin between cards
because flexbox gap isn’t widely supported

yet.

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

smaller.

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

it.

But doing so would have been a fine solution
too.

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

blog posts.

So I’m adjusting both the design file so it’s
up to date, and adding the title to the page

itself.

Adding the title and adjusting the mobile
design now.

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
line!

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

  Top 5 Web Design Trends in 2021

both desktop and mobile.

Making some other random tweaks to the footer
layout.

I’m also making some design tweaks to the
footer itself.

the footer actually took me quite a while
to change around until I was actually happy

with it.

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

elements.

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

grid.

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

centered design.

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
Twitter poll!

And now that I have the design of the footer
all set, I’m coding it, again adding the HTML

markup first.

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
the website.

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

better.

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
correctly.

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

HTML markup.

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
for this.

Now I’m using grid-template-areas to layout
the 4 columns in the footer.

And putting the signup form last in the order
for desktop.

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
links.

And I’m adding a flexbox version of the footer,
since the initial version was using grid for

layout.

For the footer I think both are equally good
options, so it’s really up to your own preference

for cases like these.

All right!

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

Beginners.

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
time!

 

You cannot copy content of this page