Responsive Web Design – From Concept to Complete Site
ERROR
00:00
00:00

VIDEO TUTORIAL Responsive Web Design – From Concept to Complete Site

Packt
71,00€

Unlimited download & streaming

Satisfied or refunded

100% secure payment

Easily design responsive websites that can adapt to any device regardless of screen size using HTML 5 and CSS3

About This Responsive Web Design video course

  • Learn how to create fluid styles that flow to fill a browser of any size
  • Discover the best design and coding practices in HTML5 and CSS3 for flexible layouts
  • Contains everything you need to know to create simple to complex responsive sites starting from a design mockup to implementing it as a finished product

Course In Detail

There’s never been a greater range of screen sizes of tablets, smartphones, and even televisions and associated web view user experiences to consider. Web pages being built to be responsive provide the best possible version of their content to match the viewing devices of not just today’s devices but tomorrow’s too.

This video course walks you through crafting responsive websites that provide an optimal viewing experience on any device using HTML5 and CSS3.

By following this structured video course, you will learn how to convert fix-width layouts to responsive layouts, contain a fluid layout with maximum or minimum properties, write syntax for a media query, select breakpoints, write HTML to embed all the saved elements into a page, and add CSS to your site ensuring that you have the skills to create your very own responsive website quickly and efficiently.

Responsive Web Design – From Concept to Complete Site starts with an overview of the technology, the best practices to follow, and then moves on to a complete implementation of a responsive site using HTML5 and CSS3 media queries.

After learning the essentials of responsive web design in the introductory section, you will walk through splitting a mockup into images and content areas, defining a fluid grid using those divisions, creating a percentage-based layout for the fluid grid with CSS, and then begin creating a full-functional responsive page. The latter section contains hands-on exercises that will walk you through all the HTML5 and CSS3 code required to build your sample page.

This course ends with an overview on the future of web design, the features you can use today, and tips on how to remain current in the field.

What will you learn in this course?

Course plan
Chapter 1
Getting Started with Responsive Web Design
Chapter 2
Building a Fluid Layout
Chapter 3
Media Queries
Chapter 4
Building Our First Responsive Page
Chapter 5
HTML5 Structure for Our Site
Chapter 6
CSS for Our Site
Chapter 7
Adding Media Queries to Our Fluid Layout

Detailed course plan

Chapter 1 : Getting Started with Responsive Web Design
12m22s
 
Lesson 1Exploring Responsive Web Design (RWD)
Lesson 2Understanding the Use of RWD
Lesson 3Examples of Adaptive Layouts
Lesson 4Device Breakpoints
Lesson 5Pros/Cons of RWD
Lesson 6Course Overview
Chapter 2 : Building a Fluid Layout
05m42s
 
Lesson 1Fluid Width Layouts
Lesson 2Working with Percent Width Layouts
Lesson 3Examples of Fluid Layouts
Chapter 3 : Media Queries
10m56s
 
Lesson 1Media Queries
Lesson 2Media Query Code
Lesson 3Testing a Simple Media Query
Lesson 4Best Practices for Media Queries
Lesson 5Testing Media Queries on Actual Mobile Devices
Chapter 4 : Building Our First Responsive Page
04m12s
 
Lesson 1Using RWD Demo Files
Lesson 2Using Sample Files
Chapter 5 : HTML5 Structure for Our Site
15m
 
Lesson 1Overview of the HTML Structure for the Demo Site
Lesson 2CSS Resets and HTML5
Lesson 3HTML for Container, Header, and Navigation
Lesson 4HTML for a four Column Content Area
Lesson 5HTML for a two Column Footer
Chapter 6 : CSS for Our Site
27m05s
 
Lesson 1Using Demo CSS for our Site
Lesson 2Writing the CSS for the Navigation Bar and Logo
Lesson 3Building the CSS for Navigation and its Elements
Lesson 4Tweaking the Navigation Using the Inspect Element
Lesson 5Formatting the Header
Lesson 6Styling the Columns
Lesson 7Formatting Headings and Images in the Columns
Lesson 8Formatting the Footer
Lesson 9Tweaks and Fixes to the Body Layout
Chapter 7 : Adding Media Queries to Our Fluid Layout
18m21s
 
Lesson 1Planning for Media Queries
Lesson 2Tablet Media Query for the Body
Lesson 3Using Media Query for the Navigation Bar and Logo
Lesson 4Using Media Query for the Navigation Bar and Logo for Devices Smaller Than the Tablet
Lesson 5Using Media Query for Columns to Reorient Horizontally
Lesson 6More on Column Queries and Footer
Lesson 7Final Tweaks for Phone-Sized Devices
Chapter 8 : Advanced Features/Considerations for the Future
31m17s
 
Lesson 1Advanced Features/Considerations
Lesson 2Dealing with Font Size EMs
Lesson 3Using Percent-Based Fonts and Dealing with Problems with EMs and Percent
Lesson 4Demo of EM and Percent-Based Font Sizes
Lesson 5Solution to Issues with REMs
Lesson 6Future Considerations: VM, VH, VMAX, and VMIN
Lesson 7Current Solutions to Text Size Issues and Responsive Background Images
Lesson 8Using Background Images, Adaptive Images, and Bandwidth
Lesson 9Responsive Grids
Lesson 10CSS Pre-processors

Your questions about the course

What is the required level to follow this tutorial ?

beginner

Wait ! 🤗

Access more than 19 free tutorials

Our data protection policy