Responsive Web Design



Responsive Web Design

Duration: 300hrs

Cost: Free Course and Free Certification

Schedule: Self paced

In this Responsive Web Design Certification, you’ll learn the languages that developers use to build webpages:
HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.

First, you’ll build a cat photo app to learn the basics of HTML and CSS.

Later, you’ll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.

Finally, you’ll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid.

Access this Course

Topics

Basic HTML and HTML5

Basic CSS

Applied Visual Design

Applied Accessibility

CSS Flexbox

CSS Grid

Responsive Web Design Projects

Access this Course

HTML is a markup language that uses a special syntax or notation to describe the structure of a webpage to the browser.

HTML elements usually have opening and closing tags that surround and give meaning to content.

For example, different elements can describe text as a heading, paragraph, or list item.

In this course, you’ll build a cat photo app to learn some of the most common HTML elements — the building blocks of any webpage.

Tasks

CSS, or Cascading Style Sheets, tell the browser how to display the text and other content that you write in HTML.

With CSS, you can control the color, font, size, spacing, and many other aspects of HTML elements.

Now that you’ve described the structure of your cat photo app, give it some style with CSS.

Tasks

Visual design is a combination of typography, color theory, graphics, animation, page layout, and more to help deliver your unique message.

In this course, you’ll learn how to apply these different elements of visual design to your webpages.

Tasks

In web development, accessibility refers to web content and a UI (user interface) that can be understood, navigated, and interacted with by a broad audience.

This includes people with visual, auditory, mobility, or cognitive disabilities.

In this course, you’ll learn best practices for building webpages that are accessible to everyone.

Responsive Web Design Principles

There are many devices that can access the web, and they come in all shapes and sizes.

Responsive web design is the practice of designing flexible websites that can respond to different screen sizes, orientations, and resolutions.

In this course, you’ll learn how to use CSS to make your webpages look good, no matter what device they’re viewed on.

Tasks

  • Add a Text Alternative to Images for Visually Impaired Accessibility
  • Know When Alt Text Should be Left Blank
  • Use Headings to Show Hierarchical Relationships of Content
  • Jump Straight to the Content Using the main Element
  • Wrap Content in the article Element
  • Make Screen Reader Navigation Easier with the header Landmark
  • Make Screen Reader Navigation Easier with the nav Landmark
  • Make Screen Reader Navigation Easier with the footer Landmark
  • Improve Accessibility of Audio Content with the audio Element
  • Improve Chart Accessibility with the figure Element
  • Improve Form Field Accessibility with the label Element
  • Wrap Radio Buttons in a fieldset Element for Better Accessibility
  • Add an Accessible Date Picker
  • Standardize Times with the HTML5 datetime Attribute
  • Make Elements Only Visible to a Screen Reader by Using Custom CSS
  • Improve Readability with High Contrast Text
  • Avoid Colorblindness Issues by Using Sufficient Contrast
  • Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
  • Give Links Meaning by Using Descriptive Link Text
  • Make Links Navigable with HTML Access Keys
  • Use tabindex to Add Keyboard Focus to an Element
  • Use tabindex to Specify the Order of Keyboard Focus for Several Elements

Flexbox is a powerful, well-supported layout method that was introduced with the latest version of CSS, CSS3.

With flexbox, it’s easy to center elements on the page and create dynamic user interfaces that shrink and expand automatically.

In this course, you’ll learn the fundamentals of flexbox and dynamic layouts by building a Twitter card.

Tasks

  • Create a Media Query
  • Make an Image Responsive
  • Use a Retina Image for Higher Resolution Displays
  • Make Typography Responsive

The CSS grid is a newer standard that makes it easy to build complex responsive layouts.

It works by turning an HTML element into a grid, and lets you place child elements anywhere within.

In this course, you’ll learn the fundamentals of CSS grid by building different complex layouts, including a blog.

Tasks

  • Use display: flex to Position Two Boxes
  • Add Flex Superpowers to the Tweet Embed
  • Use the flex-direction Property to Make a Row
  • Apply the flex-direction Property to Create Rows in the Tweet Embed
  • Use the flex-direction Property to Make a Column
  • Apply the flex-direction Property to Create a Column in the Tweet Embed
  • Align Elements Using the justify-content Property
  • Use the justify-content Property in the Tweet Embed
  • Align Elements Using the align-items Property
  • Use the align-items Property in the Tweet Embed
  • Use the flex-wrap Property to Wrap a Row or Column
  • Use the flex-shrink Property to Shrink Items
  • Use the flex-grow Property to Expand Items
  • Use the flex-basis Property to Set the Initial Size of an Item
  • Use the flex Shorthand Property
  • Use the order Property to Rearrange Items
  • Use the align-self Property

Time to put your newly learnt skills to work.

By working on these projects, you will get a chance to apply all of the skills, principles, and concepts you have learned so far:

HTML, CSS, Visual Design, Accessibility, and more.

Complete the five web programming projects below to earn your Responsive Web Design certification.

  1. Build a Tribute Page
  2. Build a Survey Form
  3. Build a Product Landing Page
  4. Build a Technical Documentation Page
  5. Build a Personal Portfolio Webpage
Duration 300 hours
Free

Self paced

1000321

We have partnered with providers to bring you collection of courses, When you buy through links on our site, we may earn an affiliate commission from provider.