Web Design Essentials - Responsive E-Learning Training

Master the fundamentals of web design with a strong focus on responsive layouts, CSS, and JavaScript!

Why choose this training?

Today, every website must look great and function perfectly on any screen size. This award-winning Web Design Essentials E-Learning Training gives you a solid foundation in responsive web design, HTML5, CSS3, and JavaScript — fully online and at your own pace.

What’s included:

• 1 year of 24/7 access to interactive videos, tutorials, and hands-on exercises
• Training in responsive web strategies, Flexbox, layout properties, and mobile optimization
• Coverage of web platforms, HTML5 tags, CSS overflow, iframes, SVG, PHP commands, CDN, and more
• Real-world projects, progress tracking, and a certificate of completion

Whether you're just starting out or want to sharpen your front-end development skills, this course equips you with everything you need to design responsive websites.

Who should enroll?

Perfect for:

• Aspiring web designers building foundational knowledge
• Developers seeking to enhance their responsive design techniques
• Graphic designers wanting to move into web development
• Entrepreneurs and marketers managing their own websites
• Anyone interested in HTML, CSS, JavaScript, and modern front-end development

Demo Web Design Essentials - Responsive Training

Course content

Web Site Planning

Course: 15 Minutes

• Course Introduction
• Identifying Purpose and Audience
• Identifying Business Requirements
• Identifying Back-end Considerations
• Designing Storyboards

Designing for Users

Course: 10 Minutes

• Examining Page Layout
• Exploring Color and Font
• Considering Devices

Functionality Testing

Course: 11 Minutes

• Examining the Software Development Life Cycle
• Performing Testing
• Examining Testing Tools

HTML

Course: 6 Minutes

• Examining HTML5 Standards

Web Page Creation

Course: 31 Minutes

• Creating Basic Web Pages
• Formatting with Tags
• Using Styles
• Formatting Text
• Creating Links

Enhancing Web Pages

Course: 25 Minutes

• Adding Images
• Using Tables
• Working with Lists

Responsive Web Design

Course: 11 Minutes

• Examining Web Site Layout
• Exploring Responsive Web Design
• Examining Iframes

Forms

Course: 16 Minutes

• Examining Form Elements
• Examining Input Types
• Examining Input Attributes

Practice: Web Page Basics

Course: 9 Minutes

• Exercise: Design and Build a Basic Web Page

HTML Media

Course: 18 Minutes

• Course Introduction
• Embedding Videos
• Embedding Audio
• Examining Plugins
• Embedding YouTube

Cascading Style Sheets

Course: 47 Minutes

• Examining CSS
• Comparing CSS Locations
• Examining Selectors
• Exploring the Box Model
• Controlling Backgrounds and Borders
• Enhancing with Animations
• Controlling Page Layout
• Using the Resize and Outline Features

JavaScript

Course: 11 Minutes

• Defining JavaScript
• Exploring JavaScript

Databases

Course: 20 Minutes

• Exploring Databases
• Examining Database Management Systems
• Communicating with Databases
• Embedding SQL Statements
• Interoperating with PHP

BootStrap

Course: 25 Minutes

• Exploring Bootstrap
• Downloading Bootstrap
• Creating Web Pages
• Enhancing with Responsive Design
• Adding Grids and Containers

jQuery

Course: 21 Minutes

• Using jQuery
• Examining jQuery
• Using jQuery Events
• Using jQuery Effects

Practice: Web Page Enhancements

Course: 6 Minutes

• Exercise: Enhance a Web Page with Media and JavaScript

Responsive Web Design and Media Queries

Course: 28 Minutes

• Course Introduction
• Overview of Responsive Web Design
• Fluid Layouts
• The CSS3 FlexBox
• Using the CSS3 Grid Layout As a Flexible Container
• Semantic Grid Systems

Measurements and Rounding

Course: 11 Minutes

• Measurements for Responsiveness
• Rounding Issues

Flexible Text and Media

Course: 53 Minutes

• Text and Responsive Web Design
• Flexible Images
• Flexible Background Images
• Using the CSS3 Overflow Property with Images
• Using Sprites in Responsive Design
• SVG
• The HTML5 Canvas
• The HTML5 Picture Element
• Flexible Videos

Media Queries

Course: 45 Minutes

• Introducing Media Queries
• Media Queries and Dimensions
• Using the CSS3 Viewport Parameter with a Media Query
• Media Queries and Screen Resolution
• Working with Multiple Media Queries
• Working with Additional Media Types
• Working with Additional Media Features
• Media Queries - Compatibility with Older Browsers

Practice: Working with Responsive Web Design

Course: 10 Minutes

• Exercise: Responsive Web Design Strategies

Working with Tables and Forms

Course: 26 Minutes

• Course Introduction
• Scrolling Tables
• Stacking Cells in Tables
• Hiding Portions of a Table
• Converting a Table to a Chart
• Designing Flexible Forms
• Using HTML5 Input Types and Attributes

Responsive Navigation Options

Course: 16 Minutes

• Overview of Navigation Options
• Deconstructing Menus
• Footer Anchor Navigation
• Off-Canvas Menus

Responsive UIs

Course: 29 Minutes

• Off-Canvas Content
• Manipulating Screens
• CSS3 Columns and Responsive Design
• Stacked Galleries
• Tabbed Workspaces
• Split Views

Styling and Animation

Course: 19 Minutes

• Responsive Styling
• Resizing Elements in Transition
• Responsive Keyframe Animations

Devices and Sensors

Course: 15 Minutes

• Using Geolocation
• Checking for a Network Connection
• Feature Detection with Modernizr

Process and Performance

Course: 16 Minutes

• Flexible Design Considerations
• Using Style Tiles
• Optimizing Performance
• Conditional Loading

Practice: Creating a Responsive App

Course: 12 Minutes

• Exercise: Configuring Design and Performance

Start designing today!

Build beautiful, responsive websites for any device.
✔️ Master HTML5, CSS3, and modern design practices
✔️ Apply what you learn through hands-on projects
✔️ Earn your certificate and boost your portfolio