Adobe Dreamweaver CCBlog SegmentDesign SegmentUncategorized

[ad_1]

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
  • fontawesome.io to include glyphicons

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

  • 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

image17

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

image20

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

image00

  • 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

image12

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

image14

And this at a medium size:

image08

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

image10

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

image19

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

image04

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%

image21

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

image09

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

image15

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

image26

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

image02

And this at the small size:

image18

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

image28

  • 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

image23

  • 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

image27

Step 6: Add Typekit

image22

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

image06

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

image25

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)

image13

  • Your site should now look like this:

image24

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

image03

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

image11

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

image05

  • To adjust the styling of the glyphicons, use CSS

image16

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

image01

and like this at the desktop size:

image07

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.

[ad_2]

Source link