One Page Portfolio Responsive Website CSS3 (PART 2) | XO PIXEL

One Page Portfolio Responsive Website CSS3 (PART 2) | XO PIXEL


Before we begin to apply CSS3 styles to this
websites, we should first use a CSS reset. What is that you ask? Well, it’s important
to know that all browsers have styles that are applied to websites by default. This includes
padding, margins, font-sizes etc. The aim for a CSS reset is to remove all that default
styling so that any CSS styling done by the web developer is from scratch, without the
browser interfering with the look of the website. There’s a popular CSS reset that I use called
“Reset CSS 2.0” by Eric Meyer. Place this at the beginning (line 1) of your style sheets.
Now that we’ve applied the reset rules to our stylesheet, we can move on to applying
styles to our one page portfolio. Just like in part one of this tutorial, we’re going
to apply the styles in the order in which they appear in the HTML. First, we’re going
to style the header, then we’ll style the about section, the work section, the contact
section, image divider and lastly, the footer. So without further delay, let’s finish this
one page portfolio so we can show off our work!
First, I’m just going to apply global styles (that apply to the entire website) to some
general css elements. This helps save time since we won’t have to apply the same rules
over and over again for each section. I’m going to change the background colour of the
entire website, add a smooth hover effect to all anchors/hyperlinks, style em and strong
tags, make all images full-width, and change the fonts and look of the heading tags. Now
that we’ve applied the global styles to our website, we can move on to style the header
of our website.To style the header to look like our original mockup, we’re going to
first use the background image we chose in our mockup and then apply a subtle gradient
over the image. Then, we’re going to style the div that contains my full name. This portfolio
website will be responsive because I want to be able to show it on a variety of mobile
devices. Not just on a desktop computer. So, I’m going to style the div called “intro”
that contains my full name and work title by giving it a max-width of 960px. The max-width
property simply means that the content will be no bigger than 960px, but can get smaller
than 960px. This is going to make the header responsive and the other divs that we apply
the max-width property to, responsive and mobile-friendly. Lastly, we’re going to
style the heading (h1) and subheading (h2) text in “intro”. Now we can move on to
the about section in our one page portfolio website.Now, let’s set some rules for the
about section. Note that both the about section and work section will be wrapped in the same
div called “wrapper”. First, we’ll set the maximum width of the wrapper to 960px
using the max-width:960px declaration. We’ll use the margin: 0 auto declaration to centre
the wrapper in the web page. Lastly, we’re going make the padding on the top and bottom
of the about section 4%, and style the paragraph text and the anchor text. Be sure to watch
my tutorial on how to style text in css3 for a more in-depth look on how to do just that.
Now, let’s move on to the work section.The work section is the best part of this whole
one page tutorial. It’s a different layout than the usual full-width, one page portfolio
layouts that are so common in many websites today. To style the .work section, we’re
first going to set it’s height to 300px. We’re also going to use the clear:both declaration
and add 2% padding to both the top and bottom. Let’s also add 4% of padding to the top
and bottom of the h3 heading. Now let’s style the text-box. First, we’re
going to float the text-box to the left of the page, align the text within the text box
to the left, and make the width of the text box 480px. We’re also going to make its
background-colour white and set its height to 100% so that it’s always the same height
as the work section we styled in the beginning. Then, we’re going to style the text-box-content
div by adding 4% of padding to the top and bottom and 8% to the left and right. Let’s
style the paragraph text within the text-box-content by adding some line-height, colour and letter-spacing.
We’re also going to make the font size 1em which is also equivalent to 16px. Just like in our mockup, we’re now going
to style the big rectangular button. In HTML, we added a class to the anchor tag called
.button. So, we’re going to select that anchor named .button and add a bunch of properties
to make it look like how we designed it in the original mockup. As you can see, by adding
a lot of padding, a thick border, aligning the text to the centre, using the display:block
property and some other text styling properties, we were able to create the button easily.
To change the style of the button when the mouse hovers over it, add the :hover pseudo
class to the class .button and then simply change the font colour and background colour. Lastly, we need to style the portfolio image
and alternate the image placement for each portfolio item as we did in our mockup. To
do this, I’m going to select the class called “.image-area” and set its width to 480px,
height to 300px, and use the overflow:hidden declaration to make sure that the images that
are slightly longer than their container (in this case the .work div) are hidden. Finally,
we’re going to select both the left and right classes and have them float:left and
float:right to give the work sections their alternating image position appearance.Styling
the contact section is going to be super easy now that we’ve completed the work section!
First, we want the background to be full width by setting the width of .contact to 100%.
We’re also going to apply a background-color, add 5% padding to the top and bottom and apply
a 5% margin only to the top. We’re also going to use clear:both to this section to
prevent any floating elements to float to the left or right of this section.To style
the image divider, all you need to do is selected the .image-divider class and add a plenty
of padding. I added 15% to the top and bottom. I also added the image using the the background:url(”);
declaration. To make the image the full width, I used background-size:cover, I also wanted
to make sure it was positioned correctly so I used background-position:center top.To style
the footer, we’re going to style the main footer tag. Then, we’re going to style the
.footer-content class which will style all the content within the footer.We want the
width of the footer content to be 960px, as is most of the content in this portfolio.
We’re also going to centre it using the margin:0 auto; declaration. Let’s add some
padding, and then apply some styles to the text. Next, we’ll style the copyright text
and social media links. The copyright text needs to be on the left
hand side, so we’re going to select .credit and use float:left. To style the social media
links, we’re going to select .social and float the links to the right. We want the
links to display inline and not as a list, so we’re going to use the display:inline
declaration to have them display inline and with their own width and height. Now, we’re
going to colour the links white, add a bit of padding around them, increase the font
size and add some weight to the font. Lastly, we’re going to make the font change colour
on hover using :hover pseudo class.We’re almost done coding our one page portfolio.
We’ve done all the main work to get our portfolio to look awesome. But, we still need
to make sure that it looks as good on a tablet or smartphone, as it does on our desktop computer.
That’s why we need to use media queries. Media queries are made using the @media rule.
This is going to allow us to create various style rules for different size browsers and
devices. Below you’ll see how I create two media queries for browsers that are 1000px
or smaller and for browser that are 800px and smaller. Within these media queries are
various css rules that simply tweak certain sections, like their padding, width and font
sizes. Once you apply these media queries, you’ll
notice that once the browser is 1000px, the work section transforms from having the image
and content right next to each other to the image placed on top of the content. By taking
a look at .image-area, you’ll see that this was done by floating the image area to the
left, making it full width and keeping it’s height to auto. The .text-box was also adjusted
to be full-width and it’s height changed to auto. The other CSS rules are just simple
tweaks. Feel free to add and remove some of the queries to see how they effect the look
of the website in various browser sizes.Now, we’ve successfully completed the coding
for our one page portfolio website! Coding a website is so much easier when it’s broken
down into a series of steps. If you haven’t already, watch part 1 to see how to code the
HTML. Or, see how the whole portfolio website was created by watching how it was designed
in Adobe Photoshop. Feel free to share this tutorial with anyone you know that would like
to learn how to create their own portfolio to showcase their creative artwork. If you’ve
followed along with this tutorial, I would love to see what your version of this one
page website looks like! Fell free to change the colours and fonts to suite your personal
style!

Comments

  1. Post
    Author
    XO PIXEL

    Hey, Pixels! Be sure to visit my blog for the original source code here: http://xopixel.com/one-page-portfolio-website-tutorial-css3/. I would love to see what you've created based on this tutorial, feel free to leave a screenshot in the comment section below the article. ๐Ÿ˜ƒ

  2. Post
    Author
  3. Post
    Author
    rockybeagleful

    Awesome video! Super useful and informative. I'm going to create something similar in the future for the Portfolio project on FreeCodeCamp ๐Ÿ™‚

  4. Post
    Author
  5. Post
    Author
  6. Post
    Author
  7. Post
    Author
  8. Post
    Author
  9. Post
    Author
  10. Post
    Author
  11. Post
    Author
  12. Post
    Author
  13. Post
    Author
  14. Post
    Author

Leave a Reply

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