Adobe Dreamweaver CCBlog SegmentDesign SegmentUncategorized


In this activity, use what you learned about media queries in the Learn to Code Facebook Live Session to make the “About Me” page responsive. 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 Responsive Design Facebook Live lesson, I would encourage you to do that first before this activity or download the completed files from that activity.

Your web page should include:

  • A responsive navigation
  • A fixed navigation
  • Elements that stack at a small size and float at a large size
  • Typekit to alter the fonts on the page
  • to include glyphicons


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 Dreamweaver CC 2017 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 Media Query

  • In the “about.css” file, create your first breakpoint by adding a media query at the bottom: @media (min-width: 992px)
  • This will allow you to change the navigation at a medium screen size


Step 2: Style the Navigation at a Medium Screen Size

  • Add “text-align: left” on the nav element to left align the navigation
  • Float the “li” elements so they are positioned next to each other instead of underneath
  • Make the nav ul width: 100%; to prevent the links from wrapping


  • Using a pseudo-class, target the 3rd and 4th li elements to float them to the right
  • Add “overflow: hidden” to the .nav-links div to prevent the collapsing parent issue
  • Add 0.75rem of padding to the .nav-links container


Your navigation should now look like this at a small size:


And this at a medium size:


Step 3: Stack the Image and Text at a Small Screen Size

  • Right now, at a small screen size, the image and text are out next to each other, at a small screen size, they should stack
  • Add a media query for a 768px screen size
  • Remove (or cut) the .about-text, section img float CSS in your default styles (styles not inside a media query) and paste it into the media query you just created


  • Now the Image and should stack on top of each other below 768px:


  • And next to each other at a screen size greater than 768px:


Step 4: Adjust the Styling of the Image and Text to be Responsive

  • Make the image width 80% at the mobile size and 35% at the small size
  • Change the existing image width in the default styles to 60%


  • Move the .about-text styling inside the small media query


  • Add new styling to the .about-text in your default (mobile) styles to align it center and give it some spacing on the sides


  • Finally, add the width: 35% and float: left styling back into the image for the small screen size


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


And this at the small size:


Step 5: Stack the “Skills” sections for Mobile

  • The skills section gets pretty squished at the mobile size, so instead of floating them, they are going to stack at the mobile size


  • In the default (mobile) styles, for main div, change the width: to 100%
  • Remove the float, give them a max-width of 15rem and margin: 0 auto to center


  • Add the smaller width back into the medium size media query (992px) so it adjusts at a medium size
  • Add the float into position the skills sections next to each other
  • Give the elements a max-width: none to remove the max width


Step 6: Add Typekit


  • In the about.css file, add the font to the body element


  • Change the font-weight on the paragraph element to 100;


Step 7: Add Glyphicons with Fontawesome

  • Go to io to download the source files
  • Add the “fontawesome.min.css” file to your css folder and add the entire “fonts” folder to your project
  • You can do this by dragging these items into the folder on your computer (you may need to refresh in Dreamweaver to update your files panel once you add the files)


  • Your site should now look like this:


  • Link in the fontawesome css file into the head of your about.html page above the about.css file


  • Replace the Dribbble and Twitter text with a span and the fontawesome class associated with the glyphicon (referenced on


  • Your navigation should now have two icons instead of text:


  • To adjust the styling of the glyphicons, use CSS


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


and like this at the desktop size:


Congratulations! You’ve finished the activity. Now you can take these newly learned skills and start coding your own websites! To see the final product, you can download the completed example files here.

For more resources, check out our Learn to Code blog posts.

The new CSS cleaner tool allows you to organize your style sheets.

Abby Larner

Abby Larner

Abby Larner is a designer and front-end developer turned product manager. She’s passionate about helping using her experience to build useful products for designers that will make design and coding easier and that will help designers and developers become better at what they do. She’s a fitness fan and arts and crafts enthusiast. In her free time she loves playing ultimate frisbee and squash, and using her Illustrator skills to design sewing projects.


Source link