Adobe Systems Adobe Creative Cloud

Learn to Code Series: Making a Website Responsive

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:

Tutorial

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

Step 1: Add a Media Query

Step 2: Style the Navigation at a Medium Screen Size

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

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

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

Step 6: Add Typekit

Step 7: Add Glyphicons with Fontawesome

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.

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


Complete Learn to Code Series: