Responsive Web Design - From Concept to Complete Site

Simpliv

Course

Online

£ 10 VAT inc.

The best Other Education courses

See all

See all

Description

  • Type

    Course

  • Methodology

    Online

  • Start date

    Different dates available

Easily design responsive websites that can adapt to any device regardless of screen size using HTML 5 and CSS3.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 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.About the Author
.
Joshua Miller is a freelance web designer, college professor, and interactive artist living in eastern Pennsylvania

Facilities

Location

Start date

Online

Start date

Different dates availableEnrolment now open

About this course

Build a responsive site from start to finish, from mockup to HTML and CSS implementation
Understand the advantages and disadvantages of RWD compared to other web design techniques
Learn to build a fluid layout starting from a digital mockup
Create breakpoints in a layout and write the code to modify the layout of your site at each breakpoint
Understand techniques to test and maintain your responsive code on different devices
Format headers, footers, and column layouts in a way that will adapt to different browser sizes
Target specific viewports to present an optimized view of your website for a given device

Questions & Answers

Add your question

Our advisors and other users will be able to reply to you

Who would you like to address this question to?

Fill in your details to get a reply

We will only publish your name and question

Emagister S.L. (data controller) will process your data to carry out promotional activities (via email and/or phone), publish reviews, or manage incidents. You can learn about your rights and manage your preferences in the privacy policy.

Reviews

This centre's achievements

2021

All courses are up to date

The average rating is higher than 3.7

More than 50 reviews in the last 12 months

This centre has featured on Emagister for 6 years

Subjects

  • Media
  • Web
  • Layout
  • Design
  • HTML

Course programme

Getting Started with Responsive Web Design 6 lectures 12:21 Exploring Responsive Web Design (RWD) This video briefly introduces you to the topic of the video course.
  • Understand what RWD is
  • Get to know what will be covered in this section.
Understanding the Use of RWD Here you’ll understand why Responsive Web Design is important for devices and also see an example of responsive designs.
  • Know why RWD matters
  • Get an overview of the devices on which RWD can be used
  • Analyze its use on Mobile versus Desktop
Examples of Adaptive Layouts In this video, you will analyze the use of several popular responsive re-designs.
  • Get to grips with tips on the use of Responsive Web Design
Device Breakpoints Discussion of devices and resolutions.
  • Overview of device breakpoints
Pros/Cons of RWD When you should and shouldn't use RWD.
  • Know the alternatives to RWD
  • Get to know the pros/cons of RWD
Course Overview In this video, you’ll get to know what you can expect from this video course.
  • An overview of what will be covered in the video course
Getting Started with Responsive Web Design 6 lectures 12:21 Exploring Responsive Web Design (RWD) This video briefly introduces you to the topic of the video course.
  • Understand what RWD is
  • Get to know what will be covered in this section.
Understanding the Use of RWD Here you’ll understand why Responsive Web Design is important for devices and also see an example of responsive designs.
  • Know why RWD matters
  • Get an overview of the devices on which RWD can be used
  • Analyze its use on Mobile versus Desktop
Examples of Adaptive Layouts In this video, you will analyze the use of several popular responsive re-designs.
  • Get to grips with tips on the use of Responsive Web Design
Device Breakpoints Discussion of devices and resolutions.
  • Overview of device breakpoints
Pros/Cons of RWD When you should and shouldn't use RWD.
  • Know the alternatives to RWD
  • Get to know the pros/cons of RWD
Course Overview In this video, you’ll get to know what you can expect from this video course.
  • An overview of what will be covered in the video course
Exploring Responsive Web Design (RWD) This video briefly introduces you to the topic of the video course.
  • Understand what RWD is
  • Get to know what will be covered in this section.
Exploring Responsive Web Design (RWD) This video briefly introduces you to the topic of the video course.
  • Understand what RWD is
  • Get to know what will be covered in this section.
Exploring Responsive Web Design (RWD) This video briefly introduces you to the topic of the video course.
  • Understand what RWD is
  • Get to know what will be covered in this section.
Exploring Responsive Web Design (RWD) This video briefly introduces you to the topic of the video course.
  • Understand what RWD is
  • Get to know what will be covered in this section.
This video briefly introduces you to the topic of the video course.
  • Understand what RWD is
  • Get to know what will be covered in this section.
This video briefly introduces you to the topic of the video course.
  • Understand what RWD is
  • Get to know what will be covered in this section.
Understanding the Use of RWD Here you’ll understand why Responsive Web Design is important for devices and also see an example of responsive designs.
  • Know why RWD matters
  • Get an overview of the devices on which RWD can be used
  • Analyze its use on Mobile versus Desktop
Understanding the Use of RWD Here you’ll understand why Responsive Web Design is important for devices and also see an example of responsive designs.
  • Know why RWD matters
  • Get an overview of the devices on which RWD can be used
  • Analyze its use on Mobile versus Desktop
Understanding the Use of RWD Here you’ll understand why Responsive Web Design is important for devices and also see an example of responsive designs.
  • Know why RWD matters
  • Get an overview of the devices on which RWD can be used
  • Analyze its use on Mobile versus Desktop
Understanding the Use of RWD Here you’ll understand why Responsive Web Design is important for devices and also see an example of responsive designs.
  • Know why RWD matters
  • Get an overview of the devices on which RWD can be used
  • Analyze its use on Mobile versus Desktop
Here you’ll understand why Responsive Web Design is important for devices and also see an example of responsive designs.
  • Know why RWD matters
  • Get an overview of the devices on which RWD can be used
  • Analyze its use on Mobile versus Desktop
Here you’ll understand why Responsive Web Design is important for devices and also see an example of responsive designs.
  • Know why RWD matters
  • Get an overview of the devices on which RWD can be used
  • Analyze its use on Mobile versus Desktop
Examples of Adaptive Layouts In this video, you will analyze the use of several popular responsive re-designs.
  • Get to grips with tips on the use of Responsive Web Design
Examples of Adaptive Layouts In this video, you will analyze the use of several popular responsive re-designs.
  • Get to grips with tips on the use of Responsive Web Design
Examples of Adaptive Layouts In this video, you will analyze the use of several popular responsive re-designs.
  • Get to grips with tips on the use of Responsive Web Design
Examples of Adaptive Layouts In this video, you will analyze the use of several popular responsive re-designs.
  • Get to grips with tips on the use of Responsive Web Design
In this video, you will analyze the use of several popular responsive re-designs.
  • Get to grips with tips on the use of Responsive Web Design
In this video, you will analyze the use of several popular responsive re-designs.
  • Get to grips with tips on the use of Responsive Web Design
Device Breakpoints Discussion of devices and resolutions.
  • Overview of device breakpoints
Device Breakpoints Discussion of devices and resolutions.
  • Overview of device breakpoints
Device Breakpoints Discussion of devices and resolutions.
  • Overview of device breakpoints
Device Breakpoints Discussion of devices and resolutions.
  • Overview of device breakpoints
Discussion of devices and resolutions.
  • Overview of device breakpoints
Discussion of devices and resolutions.
  • Overview of device breakpoints
Pros/Cons of RWD When you should and shouldn't use RWD.
  • Know the alternatives to RWD
  • Get to know the pros/cons of RWD
Pros/Cons of RWD When you should and shouldn't use RWD.
  • Know the alternatives to RWD
  • Get to know the pros/cons of RWD
Pros/Cons of RWD When you should and shouldn't use RWD.
  • Know the alternatives to RWD
  • Get to know the pros/cons of RWD
Pros/Cons of RWD When you should and shouldn't use RWD.
  • Know the alternatives to RWD
  • Get to know the pros/cons of RWD
When you should and shouldn't use RWD.
  • Know the alternatives to RWD
  • Get to know the pros/cons of RWD
When you should and shouldn't use RWD.
  • Know the alternatives to RWD
  • Get to know the pros/cons of RWD
Course Overview In this video, you’ll get to know what you can expect from this video course.
  • An overview of what will be covered in the video course
Course Overview In this video, you’ll get to know what you can expect from this video course.
  • An overview of what will be covered in the video course
Course Overview In this video, you’ll get to know what you can expect from this video course.
  • An overview of what will be covered in the video course
Course Overview In this video, you’ll get to know what you can expect from this video course.
  • An overview of what will be covered in the video course
In this video, you’ll get to know what you can expect from this video course.
  • An overview of what will be covered in the video course
In this video, you’ll get to know what you can expect from this video course.
  • An overview of what will be covered in the video course
Building a Fluid Layout 3 lectures 05:41 Fluid Width Layouts Learn how to create a percentage-based layout for fluid width CSS.
  • Start with a pixel width layout and convert to percent
  • Use the equation width = target/context
Working with Percent Width Layouts Learn the best practices while working with percentages.
  • Learn how to deal with large decimals
  • Work with the target/context formula
Examples of Fluid Layouts Learn how to take a mock-up and create percent widths.
  • Start with a sample mock-up and learn how to calculate widths
  • Work through sample layout
Building a Fluid Layout. 3 lectures 05:41 Fluid Width Layouts Learn how to create a percentage-based layout for fluid width CSS.
  • Start with a pixel width layout and convert to percent
  • Use the equation width = target/context
Working with Percent Width Layouts Learn the best practices while working with percentages.
  • Learn how to deal with large decimals
  • Work with the target/context formula
Examples of Fluid Layouts Learn how to take a mock-up and create percent widths.
  • Start with a sample mock-up and learn how to calculate widths
  • Work through sample layout
Fluid Width Layouts Learn how to create a percentage-based layout for fluid width CSS.
  • Start with a pixel width layout and convert to percent
  • Use the equation width = target/context
Fluid Width Layouts Learn how to create a percentage-based layout for fluid width CSS.
  • Start with a pixel width layout and convert to percent
  • Use the equation width = target/context
Fluid Width Layouts Learn how to create a percentage-based layout for fluid width CSS.
  • Start with a pixel width layout and convert to percent
  • Use the equation width = target/context
Fluid Width Layouts Learn how to create a percentage-based layout for fluid width CSS.
  • Start with a pixel width layout and convert to percent
  • Use the equation width = target/context
Learn how to create a percentage-based layout for fluid width CSS.
  • Start with a pixel width layout and convert to percent
  • Use the equation width = target/context
Learn how to create a percentage-based layout for fluid width CSS.
  • Start with a pixel width layout and convert to percent
  • Use the equation width = target/context
Working with Percent Width Layouts Learn the best practices while working with percentages.
  • Learn how to deal with large decimals
  • Work with the target/context formula
Working with Percent Width Layouts Learn the best practices while working with percentages.
  • Learn how to deal with large decimals
  • Work with the target/context formula
Working with Percent Width Layouts Learn the best practices while working with percentages.
  • Learn how to deal with large decimals
  • Work with the target/context formula
Working with Percent Width Layouts Learn the best practices while working with percentages.
  • Learn how to deal with large decimals
  • Work with the target/context formula
Learn the best practices while working with percentages.
  • Learn how to deal with large decimals
  • Work with the target/context formula
Learn the best practices while working with percentages.
  • Learn how to deal with large decimals
  • Work with the target/context formula
Examples of Fluid Layouts Learn how to take a mock-up and create percent widths.
  • Start with a sample mock-up and learn how to calculate widths
  • Work through sample layout
Examples of Fluid Layouts Learn how to take a mock-up and create percent widths.
  • Start with a sample mock-up and learn how to calculate widths
  • Work through sample layout
Examples of Fluid Layouts Learn how to take a mock-up and create percent widths overview of the demo files and...

Additional information

Basic knowledge of HTML and CSS will prove helpful for jumping into this video series

See related categories

Responsive Web Design - From Concept to Complete Site

£ 10 VAT inc.

The best Other Education courses

See all

See all