This course is about the underpinnings of a responsive web page and the code snippets necessary to make it function properly.

Description

Although I will be using Adobe Dreamweaver as my code editor, you could use Notepad ++ on Windows or TextWrangler on a Macintosh. Both programs are free to download.

This course is structured so that each lesson builds on the previous one. There is an example file at the end of each lesson that summarizes what was covered. When appropriate, the lessons will have available a start file so you can follow along.

• This course is designed for an entry level student who wants to be able to build a responsive web page.

Course content

• An Introduction to this Course
  • An Introduction to this Course
• Setup a Site
  • Domain Name and Hosting
• Exploring Media Queries
  • Introduction to Responsive Design
  • An example with no Media Queries
  • An example using Device Width
  • An example using Browser Width
  • An example using Browser Width and the Do Not Lie meta tag
  • An example using the Text-Size-Adjust CSS
  • An example using Media Queries In the stylesheet link
  • An example using Media Queries In the CSS
  • An example of Progressive Enhancement
  • An example showing a CSS reset and Natural Box Model
  • Download the completed example
• Coding a Responsive Design Web Page
  • An Introduction to this Unit
  • An example using media = print
  • An overview of a responsive site using the mobile first approach
  • Review the responsive start files
  • Building the page header
  • Build responsive navigation
  • Add a Gradient Background to the Desktop
  • Build the page footer
  • Add a 100% wide graphic that scales to the browser width
  • Add a image with text wrap
  • Create two articles
  • Display the articles to appear in two columns
  • Testing your work in various browsers
  • View the completed example site
• Advanced CSS3
  • Advanced CSS3 overview
  • Add Content to Start File
  • Add Gooogle Font
  • CSS graident
  • Phone Navigation
  • Texture Content
  • Style the Content
  • Add Social Icons
  • Tablet Navigation
  • Box Shadow
  • Round Corners
  • Background of stars for the desktop
  • Glow In Wrapper
  • Header Image
  • CSS Transitions
  • CSS Transitions for images
  • Demonstrate a Ribbon Footer
  • View the completed example
  • Additional Resources.
• Building a sample page for a Craft Store
  • Craft-Overview of the finished site
  • Craft-Explaination of the HTML artistic columns
  • Markup the Header
  • Craft-Markup the wrapper, left and middle divisions
  • Craft-Markup for the phone navigation button
  • Craft-Add the Google font and body texture
  • Craft-Stylize the header
  • Craft-Stylize the decorative bar
  • Craft-Stylize the phone navigation
  • Craft-Stylize the tablet navigation
  • Craft-Stylize the desktop navigation
  • Craft-Stylize the Mondrian columns
  • Craft-Markup the main page content
  • Craft-Stylize the page content into columns
• Building a sample page for a Home Improvement Company
  • Home-Overview of the finished page
  • Home-Code the Navigation
  • Home-Add the JavaScript code for the phone navigation
  • Home-Stylize the phone navigation
  • Home-Stylize the tablet navigation
  • Home-Stylize the desktop navigation
  • Home-Code the page content
  • Home-Stylize the page content
  • Home-Create and style the social links
  • Home-Add the background image
• Building a sample page for a news site
  • Overview of the finished page
  • Code the navigation
  • Style the phone navigation
  • Code the wrappers
  • Code the header
  • Stylize the desktop and tablet navigation
  • Stylize the header
  • Code the content
  • Stylize the content on the phone
  • Stylize the content on the tablet
  • Stylize the content on the desktop
  • Add a background image
• Sticky Navigation
  • Creating a sticky navigation bar
  • Where to go from Here