Full timelapse + walkthrough of building my website

hey everyone this video is a time lapse 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 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 alright 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 sas files to css and run a local server via browser sync on the right side i have adobe xd which is a free program that i use to design this website before building it so first off i already have my index.html file built out and some sas or scss files i'm creating partial sas 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 sas files into two categories one is utilities which are variables in sas 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 these out into their own files this is part of the bem or block element modifier architecture that i use in my sas 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 down to the footer right now i'm working on the header and creating some global button styles for these 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 will probably build a grid version of this nav out 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 kind of big and i'm trying to save these button styles as components in adobe xd so i can easily create more buttons later on in the design i'm using an scss function to convert from pixels to rems here and i'm using this for all my font sizes and spacing as well this is because rams 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 three 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 mix-in 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 now 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's open so on open i'm hiding the middle line then using a transform to angle the top and bottom lines now adding in the javascript to run when you click the toggle and some css keyframe animations for hiding and showing the mobile menu itself alright now we're on to the hero section i'm adding the markup to the index.html file and creating a new sas 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 sas color these sas 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 a layout for the hero so that 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 i have a spacing.scss file which stores all the space amounts in increasing order as variables starting from 10 pixels converted to rims and on up and i'm going to do 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 these styles will be consistent and i'm using the clamp function and my custom pixels to run 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 spent a lot of time setting the styles up with variables mix-ins functions and helper classes it's an upfront investment that'll 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 that i'm kind of 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 kind of felt like it was requiring a lot of code in the styles to add those 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 adding a light purple bottom border to it as well i feel like this approach works well for all viewport widths the stripe website uses the same transform skew method for their angled elements okay 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 tying it to helper classes that i will add and remove via javascript to run the animation when you click to open or close the menu moving on to the three 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 that 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 sku i'm also adjusting the space between the hero and the featured blocks on desktop and on mobile getting that spacing right and i'm also tweaking the mobile styles for the hero buttons the featured blocks now get their own sas file features.scss you can see that i'm using the bem approach for my class names with the ampersand and underscores for this section i wanted to create both a css grid and a flexbox version of the three column layout with their own sets of styles there's always more than one way to build something and i'm trying to show you this in the course by creating these alternate approaches and showing both of 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 in flexbox inspector which is what i'm using to help create the lines and numbers that you see it's a really helpful tool to help debug either of those layouts next up is the magenta full width feature section this one isn't as complicated since everything is just in one column and on both mobile and desktop and it's always centered so we're creating its own sas file and also adjusting our spacing and font size variables as we go through the site and we're adding styles for the text and that laptop image to center the content i used margin auto for the left and the right i could have used flexbox or grid to center as well but that would require writing more than one line of css i like sticking with the shortest solution if i can now that the full width 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 won't be too wide and i'm also adding some padding more on the top and bottom and just a little bit on the left and the right that way all i need to do for a new section is add the container helper class and it'll 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 open we're doing this by adding a no scroll class to the body element via javascript which turns off overflow scroll 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 a 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 tying those styles to the angled top and angled bottom helper classes then i'm tweaking the angled styles that they look right for both sections and on all viewport woods now we're working on the quote block content styles again we've made a new sas file for all 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 pseudoelements of the quote content this lets me position the svgs in relation to the quote content 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 and 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 and 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's a pretty fun one because you have that three 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 then exporting the background images from adobe xd as jpegs you can see here that i'm also tweaking the design file itself this was to adjust the spacing in the card 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 and we're copying and pasting to make the other two cards and then changing the card text to match what's in the design you might notice that 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 now for this first row of blog post cards i'm using css grid to lay out 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 the cards because flexbox gap unfortunately isn't widely supported yet now just adjusting those mobile card styles and looking at adding a max width so the content isn't super wide on tablet devices i'm doing this by creating a mix in that will add that max width just for tablet viewports and smaller i could also have created this with a new helper class but i decided to mix in so that i wouldn't have to add the new class and the markup to all the elements that need to use it now i'm adding that mix into most of the blocks on the page except for the hero content 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 just a little bit i'm also adding cover state styles for the blog post cards so when you hover over a card it'll move up slightly and have a more defined box shadow now putting in a title for the blog post section to give it more context on the page for users i felt like the 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 now just making sure everything looks good on desktop and mobile widths and tweaking that angle here on mobile just a little bit more alright we're getting closer to the finish line the next section is simpler it's a full width cta or call to action block i'm copying the earlier full width feature block then adding in that background gradient and the cta content you can see here that i'm playing around with a linear gradient background a bit adding in some dark gray now onto the signup form section all the other buttons on the page are anchor link 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 text box more accessible by adding a form label so that screen readers can read the name of the text box and then using css to hide the label from view so you won't visibly see it on the screen [Music] adding in styles for the sign up section and adjusting the spacing for it in the design file for both desktop and mobile and making some other random tweaks to the footer layout i'm also making some design tweaks to the footer itself the footer took me quite a while to change around until i was actually happy with it alright back to finish the form styles with form elements like text boxes and buttons there's always a default style that your browser will use you know the boring gray button and text box with weird shadowed borders so if you want them to look more custom you have to override those styles for the input elements all right so i got the basic styles and now i'm just adjusting the margin and padding so it'll look good on all devices i'm using flexbox here to lay out the text box and button elements so that they're on the same row and aligning nicely [Music] and i'm adding in alternate versions of the form to show you how to do this 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 flexor grid just make it really easy to put things side by side especially if you want them to fit a certain total width on the page on the footer now and adding social media icons from font awesome to the design i just felt like these recognizable icons would help the links not be quite so monotonous you can see here that i'm tweaking the design a little bit for a three column centered layout and i'm also checking out other sites like css tricks and stripe just to see how they lay out their footers it seems like the three or four column layout going full width is pretty common and 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 eighty percent like the four column full width with everything left aligned as opposed to a three column centered design and someone on twitter also suggested moving the signup form into the footer itself i really like this idea because it would let me utilize the order property in flexbox and grid to put items in a different order on mobile versus desktop so thanks to everyone who weighed in on the twitter poll 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 sas file footer.scss i've gotta say building a website from a complete design file is a lot easier than trying to finalize a 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 full width signup section already i'm now having to wrangle the code to move everything into the footer and reorganize my sas files so with this four column layout the form elements don't have as much horizontal space as they did in the full width version for desktop so i'm shrinking down the font size for both the text box and the submit button now just styling the actual links and headers for the text links and then adding in that disclaimer text at the bottom right now i'm using css grid to layout the footer links creating a four column grid template with each column having an equal width and for the mobile version of the footer i'm centering all the text and everything is stacked to one column adding in that dark svg logo and sizing it correctly 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 in css adding in that font awesome credit in the disclaimer section i'm also moving the social links into an unordered list in the html as i think that's best practice for lists of links i did the same thing up in the top navigation now just tweaking the legal disclaimer section and adding some spacing so for the form elements i'm putting the text box and buttons side by side on mobile now too and not just on desktop and i decided to remove 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 for this [Music] now using grid template areas to lay out the four columns in the footer and i'm putting the signup form last in the order for a desktop i realized that the svgs for the logos had empty space on the top and bottom so i re-exported them and then tweaked the view box to remove the extra space and this is for both logos in the header and the footer now adding in a flexbox version of the footer since the initial version using grid for the footer i think both are equally good options so it's really up for your own preference for cases like this 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 and building the website is just the first step in all this so if you're interested in being the first to know when the course launches and getting more detailed updates on the progress you can sign up to get emails linked down below in the description so thanks for watching and we'll see you next time