Beginning Responsive Web Development with HTML and CSS (Self-paced with Mentor Support)
The changing way in which we access the web means that there has never been a greater range of screen sizes and associated user experiences. With these trends driving changes in design, typical desktop-only websites fail to meet even minimum expectations when it comes to style and usability, which can be vital when your website is central to yours or your client's brand.
A responsive web design provides a single solution that looks great on a phone, desktop, and everything in-between, providing the best experience possible for both today's and tomorrow's devices. This course covers every essential aspect of RWD and broader front-end development best practices.
With this course, we have created the definitive guide for all things responsive. We cover the entire gamut of HTML5 and CSS3's new features that help to effortlessly create modern, responsive web designs.
We'll focus heavily on applying the latest techniques provided by HTML5 and CSS3, all in the context of real-world examples. Along the way, you'll discover tips and tricks that make your future designs and development workflow leaner and more maintainable than ever before.
By the time you reach the end, you'll be equipped with the latest cutting edge front-end development skills, ready to develop your very own modern, responsive websites that are pixel-perfect across a wide range of devices.
For this course, we will use the following software:
- A system with 64-bit Windows 8
- Atom
- The latest versions of Google Chrome and Mozilla Firefox
Installation and Setup
Download and install Atom from: https://atom.io/
This course will require a computer system for the instructor and one for each student. The minimum hardware requirements are as follows:
- Processor: i3
- Memory: 2 GB RAM
- Hard disk: 10 GB
- Projector
- Internet connection
Lesson 1: The Essentials of Responsive Web Design
Defining Responsive Web Design
Our First Responsive Example
Lesson 2: Media Queries – Supporting Differing Viewports
Media Query Syntax
Combining Media Queries
Using Media Queries to Alter a Design
Media Queries Best Practices
The Viewport Meta Tag
Media Queries Level 4
Lesson 3: Fluid Layouts and Responsive Images
Converting a Fixed Pixel Design to a Fluid Proportional
Layout
Flexbox
Responsive Images
Lesson 4: HTML5 for Responsive Web Designs
HTML5 Markup
Semantic HTML5
HTML5 Media Elements
Lesson 5: CSS3 – Selectors, Typography, and Color Modes
Introduction to CSS
Facilitating Feature Forks in CSS
New CSS3 Selectors and Their Use
CSS3 Structural Pseudo-classes
More About CSS
New CSS3 Color Formats and Alpha Transparency
Lesson 6: Stunning Aesthetics with CSS3
Shadows with CSS3
Gradients
Background Images
CSS Filters
Lesson 7: Transitions, Transformations, and Animations
CSS3 Transitions
CSS3 2D Transforms
CSS3 3D Transformations
Animating with CSS3
Lesson 8: Conquer Forms with HTML5 and CSS3
HTML5 Forms
The HTML5 Input Element
Styling HTML5 Forms with CSS3
Lesson 9: Using SVGs for Resolution Independence
Introducing SVGs
Inserting SVGs
Extra SVG Capabilities and Oddities