Creating Responsive Web Design
Beginning Your Project and Making Web Graphics
See a brief overview of the web page we'll be creating, which includes a responsive design for varying screen sizes, smaller download sizes for small screens, as well as adaptive usability techniques.
Learn about various text editors you can use during this course.
If you have never worked with HTML or CSS, this video will get show the basic relationship between the two technologies. If you have worked with HTML and CSS, skip this video.
Download the Project Files (link above) and begin our project by creating a root directory for our web page.
Based on the design, we'll formulate a plan for converting the design composition to HTML and CSS. If you'd like to skip creating the graphics, there is also a "Skip Photoshop" folder with a copy of all of the final web graphics you can use in your web page.
Finally, we'll save the various banner graphics for our responsive design. If you'd like to skip creating the graphics, there is also a "Skip Photoshop" folder with a copy of all of the final web graphics you can use in your web page.
Now we'll save out the graphics for the template and content graphics. If you'd like to skip creating the graphics, there is also a "Skip Photoshop" folder with a copy of all of the final web graphics you can use in your web page.
Creating HTML and CSS for Web Layout
Adding the starter files from the Project Files. Be sure to download the project files form Section 1, Lecture 4.
Creating links to external CSS files from your HTML file.
Adding a meta tag for the viewport and the Google HTML5 Shiv for IE 8 and below.
Creating the main HTML content containers for our web layout.
Adding HTML containers for our promo boxes and the navigation links.
Adding sample content from our code snippets.
Adding CSS styles for the background and page container
Adding style to our typography with CSS.
Creating compound CSS rules to target more specific elements in the HTML page.
Creating CSS rules specifically for web layout.
Setting up CSS layout rules for the promos and navigation.
Working with CSS Media Queries
Writing an inline CSS3 media query to target the copyright text.
Creating CSS rules to optimize the layout for medium screens.
Creating CSS rules to optimize the layout for small screens.
Repositioning the navigation for small screens.
Getting Started (Original Course)
This introducion shows this web design final project adapting to various browsers, platforms, and screen sizes.
A quick walkthrough of the files provided with this course.
Contains the final HTML and CSS project files, as well as the pre-slices native Adobe Photoshop templates.
Optimizing Your Web Graphics (Original Course)
Learn to save individual graphics from a larger canvas in Adobe Photoshop. In addition, learn how the graphics are prepared and optimized for multiple screens and bandwidth considerations.
Adding HTML for Structure and Content (Original Course)
After creating our HTML5 document, we'll add the necessary markup for the outter-most content containers of our web design.
We'll add sample content into or content containers, including headings, sidebar container, lists, and anchor links for the navigation.
Creating CSS Rules for All Screens (Original Course)
We'll start by creating the CSS rules that willbe used for styling the text and design elements.
Create CSS Rules that manipulate the content containers to replicate the desired layout.
Creating CSS Rules for Mobile Screens (Original Course)
Use CSS3 Media Queries to alter the layout based on small-sized screens.