Design and Code: Responsive Portfolio Website (Part 2)
Hey, Pixels! Welcome back to part 2 of this responsive portfolio website tutorial. If you haven’t watched Part 1, be sure to watch it before starting this tutorial.
In this video, I’ll show you how to code this responsive clean modern one-page portfolio website using the latest techniques in web development.
Flexbox and CSS Grid have changed the game for web developers around the world. It’s now easier than ever before to code responsive complex layouts for all the different screens that exist in the world today. So, without any further delay, let’s get started!
Gold Members can download the final project file below:
What You’ll Need To Code Your Portfolio Website
You will need the following resource in order to complete this tutorial:
For this website, we’re going to export the background shapes, the portrait photo, and the social media icons into an image folder for our website. First, click the background shapes, go to File > Export > Selected. Make sure format is set to PNG and “Export for” is set to “Web”. Do the same to export the portrait photo.
We’re also going to export SVG versions of our social media icons. Select all the icons (you may need to ungroup to make selecting easier) and then go to File > Export > Selected to export them to the image folder. Make sure format is SVG Embed and select “Optimize File Size (Minify)”.
Now that all of our assets have been exported to our website’s image folder, we can jump right into coding.
First, we’re going to create a div with the class name “container”. Within this div, we’re going to create three more div’s with the following classes: sidebar, content, footer.
Within the sidebar div, we’re going to use the nav tag and then create an unordered list of menu links. Recall that we designed this menu in Part 1 of this series. Now that we’ve coded our, we can move on to code our main content area.
The content div contains a section with the class name “hero”. Within the section, we’re going to use the img tag to link to our portrait photo. Below the img tag, we’re going to create a div with the class “hero-content”. Within this div, we’re going to use the h1 tag and paragraph tag to add our hero title and blurb. Lastly, we’re going to use the anchor tag to create our “Hire Me” button. We’ll give it the class name “action-btn” and write “Hire me” as the anchor text.
Last but not least, we’re going to code our footer area. Within the footer div, we’re going to use the footer tag to then create an unordered list which will be our social media icons. To do this, we’re going to use the unordered list tag, the list tag, the anchor tag and then within the anchor tag, we’re going to add the paragraph tag so that we can write our social media stats.
Cmd ⌘ (Mac) or Ctrl (PC) + D to duplicate this line of code four times for our four social media icons. Then, we’re going to open our images folder > select an svg icon > copy the svg code and then paste it within the first list items. Repeat this for the other list items.
That’s all for the HTML, now it’s time to head on over to our CSS file to style our responsive one-page portfolio.
To style our portfolio website, we’re going to use the latest in web development: Flexbox and the CSS Grid. It’s important to note that we’ll be coding mobile-first and then finally use media queries to design for larger screen sizes. Let’s get started.
Google Font + Body
As you can see, I’ve already imported our Google Font called “Nunito” in style 300, 400 and 700.
I’ve also styled the body of our site by declaring Nunito as the font family and giving it a gray background.
Back in our HTML file, we set up the structure of our main layout areas, which included our content area, sidebar area, and footer area. Now, we’re going to CSS grid to name these areas using the “grid-area” property.
We’re also going to add our background shapes, gradients and colors, as we designed in part 1, to these layout areas.
Note that we added “to right” in the linear gradient property which allows our gradient to start from right to left when viewed on smaller screens.
Container + Grid Template
We’re going to select the container div which contains our sidebar, content, and footer. We’ll set the font size to 1.5em, width to 100% and height to 100vh so that it takes up the entire height of the browser window.
To create a CSS Grid Layout, simply use the declaration: display: grid. We’re also going to name our grid template areas, which include sidebar, content and footer. We’ll set our grid template columns to 1fr and size our three grid template rows to 130px, 800px, and 250px.
Lastly, we’re going to select all three template areas and set their padding to 1em.
Sidebar + Menu
Now, we’re going to apply styles to our general portfolio elements. To style our menu items in our sidebar, we’re going to select the nav ul, remove margin and padding, and we’re going to use flexbox to easily make our nav menu items responsive using the display: flex declaration.
In the next lines of code, we’re going to style our nav list items and anchors by removing the list item bullets, adjusting padding, link colors, and other font styles so that it looks similar to our design mockup in part 1 of this series. We’re also going to add a .3s transition and set hover opacity to 1 on hover, they turn white and when they’re not, they’re low opacity.
We’re also going to style the main content elements which consist of our main content section, hero text area, and hero image. We’ll set our hero image width to 200px, apply font sizes and font weights and color the text accordingly.
Lastly, we’ll style the call to action button which we gave the class name of “action-btn” in our HTML, and style the font, padding, border radius and colors to turn our anchor link into a bold “Hire me” button. We’re also going to add a transition of .3 seconds so that there is a shadow that appears behind the button on hover.
Now, let’s style the footer section of our portfolio website. This is where our social media icons and stats live. As you can see, just like our nav, we’ll use flexbox to make our social media icons responsive.
Select the SVG tag and size the width of our social media SVG’s to 40%.
As I mentioned earlier, the styles above are mobile-first which is why we’re going to now use a media query to modify how our website looks on larger browser windows.
Let’s write a media query for when the browser has a min-width of 1040px.
First, select the websites container and declare our grid template areas. Note that on large screens, our sidebar is beside both the content and footer grid areas. Our two grid template columns will be set to 300px 1fr and our two grid template rows will be set to 1fr auto.
On the next lines of code, we’re going to simply style the other elements, such as the nav, hero text and footer social icons.
Note that for the nav ul, we’ve changed its flex-direction to column and we removed “to-right” from the linear-gradient property so that it starts from top to bottom. We’ve also changed the float of our portfolio image to the right, set max-width for the footer ul to 960px, and reduced the width of our SVG’s to 20%.
That’s how you code this responsive one-page portfolio website using the latest web development techniques, CSS Grid and Flexbox. Comment below if you’ve designed and coded your own website based on this tutorial!