Creating a Responsive Web Design
About This Course
This course was designed to teach you to create a web page that can adapt it’s layout to fit on any screen size, as well as on paper when printed.
Web design requires the coordination of HTML, CSS, and graphics in order to construct a layout and design that can respond to the varying needs of your websites visitors.
In this step-by-step course, we’ll cover every aspect of converting a design into a fully functioning web page. We’ll create navigation menus, style typography, format and position graphics, create CSS animations, import free web fonts from Google, as well adjust our layout to fit a wide range of screens and devices.
And for those new to HTML, CSS, or web graphics, we have a few lessons explaining the core fundamentals of each, so you’ll be able to work through the course without missing a beat.
What are the requirements?
- Patience 🙂
- A text editor
- HTML5-enabled web browser
- Web-enabled phone or tablet (optional)
- Printer (optional)
What am I going to get from this course?
- Strategize the HTML needed for a web design
- Create CSS rules to target specific HTML elements
- Work with web graphics (in HTML and CSS)
- Transform user experiences with CSS
- Adapt layouts for varying screen sizes
- Optimize a web page’s printing capabilities
What is the target audience?
- Graphic Designers
- Web Designers
- UX Designers
- Front-End Web Developers
- Developers (looking to enhance their design sensitivities)
- Content Editors (responsible for HTML and CSS)
Course Staff
Chris Converse
Designer and Developer at Codify Design Studio
Chris has over 22 years experience in graphic design and interactive media, with a unique focus on both design and development. Chris possesses development skills across such languages as HTML, CSS, JavaScript (including jQuery and AngulatJS), and PHP, making his design execution optimal across various media. In addition to designing and teaching online, Chris speaks at number of industry-related conferences, including HOW Design, Adobe MAX, Adobe ADIM, AIGA, and the Creative Publishing Network.
Frequently Asked Questions
What web browser should I use?
The EnlightMe platform works best with current versions of Chrome, Firefox or Safari, or with Internet Explorer version 9 and above.
Course Features
- Lectures 55
- Quizzes 0
- Duration 4 Hours/Week
- Skill level
- Language English
- Students 763
- Certificate No
- Assessments Self
-
Section 1: Introduction
- Lecture 1.1 Lecture 1:Introduction Locked
- Lecture 1.2 Lecture 2:About this course Locked
- Lecture 1.3 Lecture 3:Terms and technology we’ll be covering Locked
- Lecture 1.4 Lecture 4:What you’ll need to complete this course Locked
- Lecture 1.5 Lecture 5:About the exercise files Locked
-
Section 2: Preparing the HTML Content and Structure
- Lecture 2.1 Lecture 6:Setting up our project Locked
- Lecture 2.2 Lecture 7:The HTML strategy for our layout Locked
- Lecture 2.3 Lecture 8:Creating the main HTML containers Locked
- Lecture 2.4 Lecture 9:Adding content into the header Locked
- Lecture 2.5 Lecture 10:Add content to main section Locked
- Lecture 2.6 Lecture 11: Add content to atmosphere section Locked
- Lecture 2.7 Lecture 12:Add content to the How-To section Locked
- Lecture 2.8 Lecture 13:Adding the navigation Locked
- Lecture 2.9 Lecture 14:Adding the footer content Locked
-
Section 3: Creating the Style and Layout with CSS
- Lecture 3.1 Lecture 15:Importing a Google Font Locked
- Lecture 3.2 Lecture 16:Defining the basic text styles Locked
- Lecture 3.3 Lecture 17:Style the heading and page container Locked
- Lecture 3.4 Lecture 18:Style the logo and hero item Locked
- Lecture 3.5 Lecture 19:Creating the button style Locked
- Lecture 3.6 Lecture 20:Setting up three-column row Locked
- Lecture 3.7 Lecture 21:Adding graphics to the main section Locked
- Lecture 3.8 Lecture 22:Clearing floats with CSS pseudo-elements Locked
- Lecture 3.9 Lecture 23:Styling the Atmosphere section Locked
- Lecture 3.10 Lecture 24:Styling the How-To Section aside elements Locked
- Lecture 3.11 Lecture 25:Styling the How-To Section blockquote element Locked
- Lecture 3.12 Lecture 26:Adding content with pseudo-elements Locked
- Lecture 3.13 Lecture 27:Styling the Footer Locked
-
Section 4: Creating a Menu System with CSS
- Lecture 4.1 Lecture 28:Re-positioning the Nav Locked
- Lecture 4.2 Lecture 29:Styling the nav list-items and links Locked
- Lecture 4.3 Lecture 30:Showing and Hiding the nav sub menus Locked
- Lecture 4.4 Lecture 31:Device compatibility options for nav Locked
- Lecture 4.5 Lecture 32:Adding indication arrows Locked
-
Section 5: Making Layout Adjustments for Large and Medium Screens
- Lecture 5.1 Lecture 33:Making minor adjustments for larger screens Locked
- Lecture 5.2 Lecture 34:Making adjustments for large screens Locked
- Lecture 5.3 Lecture 35:Making adjustments for medium screens Locked
-
Section 6: Making Adjustments for Small Screens
- Lecture 6.1 Lecture 37:Adjusting to the logo and hero elements Locked
- Lecture 6.2 Lecture 37:Adjusting to the logo and hero elements Locked
- Lecture 6.3 Lecture 38:Rearranging the main and atmosphere sections Locked
- Lecture 6.4 Lecture 39:Rearranging the how-to section Locked
- Lecture 6.5 Lecture 40:Rearranging the navigation Locked
- Lecture 6.6 Lecture 41:Adjusting the spacing of the navigation and footer Locked
-
Section 7: Making Adjustments for the Smallest Screens
- Lecture 7.1 Lecture 42:Adjustments for the header and hero Locked
- Lecture 7.2 Lecture 43:Adjusting the How-To section Locked
- Lecture 7.3 Lecture 44:Adjusting the footer Locked
-
Section 8: Making Layout and Content Adjustments for Print
- Lecture 8.1 Lecture 45:Strategy for printing Locked
- Lecture 8.2 Lecture 46:Linking a CSS file for print Locked
- Lecture 8.3 Lecture 47:Setting up the base styles Locked
- Lecture 8.4 Lecture 48:Setting up the header Locked
- Lecture 8.5 Lecture 49:Displaying URLs when printing Locked
- Lecture 8.6 Lecture 50:Setting up the Main section Locked
- Lecture 8.7 Lecture 51:Setting up the Atmosphere section Locked
- Lecture 8.8 Lecture 52:Switching our image tags with CSS Locked
- Lecture 8.9 Lecture 53:Styling the footer Locked
- Lecture 8.10 Lecture 54:Setting page breaks with CSS Locked
-
Section 9: Where To Go From Here
- Lecture 9.1 Lecture 55:Where to go from here Locked
