Responsive Web Design with HTML5 and CSS3 - Introduction
Requirements
- Students will need a code editor like Dreamweaver, Notepad++ (Windows), or Text Wrangler (Macintosh).
This course is about the underpinnings of a responsive web page and the code snippets necessary to make it function properly.
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.
- An Introduction to this Course07:30
- Domain Name and Hosting00:21
- Introduction to Responsive Design09:28
- An example with no Media Queries02:21
- An example using Device Width03:42
- An example using Browser Width02:40
- An example using Browser Width and the Do Not Lie meta tag03:28
- An example using the Text-Size-Adjust CSS02:02
- An example using Media Queries In the stylesheet link02:05
- An example using Media Queries In the CSS03:50
- An example of Progressive Enhancement05:52
- An example showing a CSS reset and Natural Box Model05:04
- Download the completed example00:10
- An Introduction to this Unit10:08
- An example using media = print02:07
- An overview of a responsive site using the mobile first approach04:17
- Review the responsive start files06:15
- Building the page header10:48
- Build responsive navigation09:58
- Add a Gradient Background to the Desktop03:39
- Build the page footer01:14
- Add a 100% wide graphic that scales to the browser width04:58
- Add a image with text wrap08:43
- Create two articles13:07
- Display the articles to appear in two columns07:05
- Testing your work in various browsers03:36
- View the completed example site00:10
- Advanced CSS3 overview04:00
- Add Content to Start File02:36
- Add Gooogle Font06:09
- CSS graident06:24
- Phone Navigation09:20
- Texture Content07:29
- Style the Content05:16
- Add Social Icons08:59
- Tablet Navigation06:16
- Box Shadow04:00
- Round Corners04:19
- Background of stars for the desktop07:56
- Glow In Wrapper07:46
- Header Image07:48
- CSS Transitions07:13
- CSS Transitions for images06:16
- Demonstrate a Ribbon Footer10:15
- View the completed example00:10
- Additional Resources.00:26
- Craft-Overview of the finished site02:12
- Craft-Explaination of the HTML artistic columns04:11
- Markup the Header04:14
- Craft-Markup the wrapper, left and middle divisions07:41
- Craft-Markup for the phone navigation button04:17
- Craft-Add the Google font and body texture04:06
- Craft-Stylize the header04:13
- Craft-Stylize the decorative bar03:36
- Craft-Stylize the phone navigation11:23
- Craft-Stylize the tablet navigation08:43
- Craft-Stylize the desktop navigation09:52
- Craft-Stylize the Mondrian columns10:41
- Craft-Markup the main page content06:31
- Craft-Stylize the page content into columns07:52
- Home-Overview of the finished page03:19
- Home-Code the Navigation03:18
- Home-Add the JavaScript code for the phone navigation03:16
- Home-Stylize the phone navigation02:56
- Home-Stylize the tablet navigation11:08
- Home-Stylize the desktop navigation09:56
- Home-Code the page content06:56
- Home-Stylize the page content05:28
- Home-Create and style the social links06:17
- Home-Add the background image06:11
- Overview of the finished page02:37
- Code the navigation05:16
- Style the phone navigation09:05
- Code the wrappers04:01
- Code the header01:24
- Stylize the desktop and tablet navigation06:58
- Stylize the header07:16
- Code the content07:46
- Stylize the content on the phone05:40
- Stylize the content on the tablet02:42
- Stylize the content on the desktop07:55
- Add a background image03:47
- Creating a sticky navigation bar05:58
- Where to go from Here00:23
Featured review
![Roy Brodavo](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3C/svg%3E){kind=avatar}
- 4.1 Instructor Rating
- 1,483 Reviews
- 26,841 Students
- 9 Courses
Paul received his master's degree from Utah State University in Instructional Technology and worked as a civilian for the United States Air Force doing interactive computer-based firefighter training. He and his family then moved to Provo, Utah where he worked at Brigham Young University for five years in the Instructional Technology Center. While there, he was involved in authoring multimedia, digitizing video, training faculty in instructional technology. He then moved with his family to Buena Vista, VA where he joined the faculty at Southern Virginia University. While there he taught digital media courses. Ten years later he returned to Utah where he is now an Assistant Professor at Utah Valley University teaching courses in their Digital Media department in the Internet and Web Technologies degree.