Adobe Creative Cloud

November 15, 2016 /

Learn to Code Series: Layout and Style a Blog Page with CSS

In this activity, use the HTML and CSS techniques that you learned in the Learn to Code Facebook Live Session to layout and style the “About Me” page for your blog. Use the requirements below to create your page or follow the steps below for more help. If you haven’t already followed along in our Intermediate HTML and CSS Facebook Live series, I would encourage you to do that first before this activity or download the completed files from that activity here.

Your web page should include:

  • A navigation
  • Semantic HTML
  • A CSS reset stylesheet
  • An image next to a body of text using the float property


If you haven’t already watched the Facebook Live Session, follow along to create the base for your blog site or download the starter files.

Step 0: Download 2017 Release of Dreamweaver CC and Open

  • If you haven’t already downloaded the newest version of Dreamweaver, you should do that before you begin this tutorial.
  • Open Dreamweaver and make sure your workspace is Standard with “Split” view selected


Step 1: Add a CSS reset stylesheet

  • Add the “normalize” CSS stylesheet to create consistency across browsers in your styling. You can find the code here:
  • Copy the code, right click on the css folder in your files panel and create a new CSS file called “normalize.css”
  • Link the normalize.css file into your html above the about.css file
  • Note: it needs to be linked above so that any styling you add after the reset file will override the normalize.css styling

Step 2: Add a Navigation

  • Below the opening <body> tag, add a <nav> tag
  • Inside the <nav> tag create an unordered list (<ul>) element with one <li> element child and one <div> element child with a class of “nav-links”
  • Inside the <li> element, add an <a> tag with an image element inside. This will be the site logo
  • The logo image is located in the “images” folder
  • Inside of the <div> element, add four <li> children each containing one <a> element for a navigation link: Blog, About, Dribbble, and Twitter
  • Make sure to include an href data attribute to link to another page if needed
  • For now, the Blog and About links won’t link to another page.

Step 3: Styling the Navigation

  • In about.css, begin by centering the children elements in the <nav> with text-align: center
  • Next, remove the styling on the <ul> element and display: inline-block so the <ul> element will center
  • To get the <li> elements to sit next to each other, use display: inline-block, add padding to the elements, box-sizing so the padding is included in the width and height of the element, and text styling to adjust the styling of the links
  • Adjust the styling slightly with letter-spacing and text-decoration
  • Finally, put a max-width on the logo <img> element to adjust its size

CHECK-IN: If you’re viewing your website in the Dreamweaver live view, it should look something like this.


Step 3: Add Semantic HTML

  • To make our code more readable and understandable, we will add semantic HTML to our about.html file
  • The first change we need to make is to change the div with class of “content” to be a <main> element (since this section contains the main content of the site)
  • Move the name, title, and description above the opening <main> tag and group this in it’s own <div> tag and add a class of “about-text”. This will allow you to float this text to the right of the profile image.
  • Finally, group the image and that div into a <section> tag to denote that these items are related

Step 4: Float the text next to the profile image

  • In about.css, target the “about-text” class and the <img> tag inside of <section> and float both elements to the left
  • In order to prevent the <main> section from also floating to the left, you must apply “clear:both” to the main section. This will create a break before the main section so instead of wrapping, it sits below the <section> element
  • Add some styling to the “about-text” class to to add some margin between the text and the image
  • Add max-width and centering margin to the <section> element to center the text
  • Add “overflow: hidden” to maintain the spacing of the parent <section> element
  • Add margin to the top of the section so there is more space between the section and the navigation
  • Change the percent width on the “about-text” div and the image to prevent the text from wrapping below the image

CHECK-IN: If you’re viewing your website in the Dreamweaver live view, it should look something like this.


Step 5: Style Skills, Education, and Hobbies

  • In about.html, group each section in the <main> element with a <div> tag so you can float them as a unit
  • Float the <div> elements inside of the <main> element to the left and give them each a width of 33.33%
  • Make sure to add “overflow: hidden” to the main element to prevent the element from collapsing
  • Add a background color to the <main> element
  • Target the ul and h3 elements inside of main and give them a font color of white
  • Remove the Twitter and Dribbble links from the bottom of the page since they are now in the navigation

CHECK-IN: If you’re viewing your website in the Dreamweaver live view, it should look something like this.


Great Job! You used semantic HTML and CSS to layout your about me page! To see the final product, you can download the completed example files here.

Complete Learn to Code Series:

Try Dreamweaver CC!

A modern web design and development tool that has been re-imagined for designers who code.