Responsive Portfolio Grid CSS Website Layout (PART 2)

Articles, Blog

Responsive Portfolio Grid CSS Website Layout (PART 2)

Responsive Portfolio Grid CSS Website Layout (PART 2)


Hey, Pixels! Welcome back to part 2 of this responsive
portfolio website 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! 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 onto
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. Press Command or CTRL + 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 using media queries to design for larger screen sizes. Let’s get started.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 gracy 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. 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. 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 so that when the links are hovered, 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, lets 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. Subscribe to XO PIXEL for more great design,
code and tech videos just like this one. Give this video a big thumbs up if you liked
it. Thank you for watching, I’ll see you in
the next video!

36 thoughts on Responsive Portfolio Grid CSS Website Layout (PART 2)

  1. ✨ PART 2 is finally here! 📝 Read the article version of this tutorial for code, assets & details: http://bit.ly/2KKmD7T. Share your work with me using #XOPIXELPerfect on social media!
    (PART 1: https://www.youtube.com/watch?v=racKdsDaM8s)

  2. Awesome tutorial! The finished product looks awesome, the video was informative but moved along at a quick pace. Is there plans for a part 3? I would like to know how to change the content area when clicking on the links in the left hand menu without having the entire page reload. Also would like to learn how to pull the social media counts automatically.

  3. is there a way to have the navbar appear on the top of the website instead of just mobile? I really would like to have the navbar on top of the website instead of just mobile

  4. Having a hard time tweaking grid-template-rows. How do I change size of the sidebar on large screens via the @media query? The size of the sidebar on large screens is obnoxious, it's like 40% of the screen lol. Thanks D;

  5. I have a question, aren't the buttons on top to close to each other on mobile, shouldn't they stack on top of each other?

  6. Hi! I learned a lot, thanks 🙂 My only worry is how will this website show on old browsers? I mean what's the solution for old browsers if I only use grid system to style?

  7. really nice design layout and tutorial. what about the other pages, the contact, portfolio and blog? Will you be doing tutorials on them? I am going to go ahead and try to code these myself, hopfully I ca get them to convert for mobile.

  8. Really love how you code and design web. Thank you so much for your tutorial. I hope I can see more your tutorials like this next time ^^

  9. Marisa thanks for this, just what I was looking for!
    I haven't tried this yet regarding actual data, like the like counts on the social media, is there a way to pull actual data and place it there? Hope I made sense.

    I hope you can make time to reply, would mean so much! And thank you once again.

  10. Thanks a lot for that tutorial. This is just top notch design and I really appreciate you taking the time to show us how to do it. However, I was wondering if you could show me how to space out éléments in the navbar on large screens ? Thanks

  11. Hi, I made it and the mobile version looks exactly but the web version for some reason looks like an odd large mobile site… I was following the code but still looks weird. Any idea? 😵

Leave a Reply

Your email address will not be published. Required fields are marked *