Responsive Web Design

Overview

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.

Major Topics:

Basic HTML and HTML5
Basic CSS
Applied Visual Design
Applied Accessibility
Responsive Web Design Principles
CSS Flexbox
CSS Grid
Responsive Web Design Projects

Syllabus

Say Hello to HTML Elements
Headline with the strong Element
Inform with the Paragraph Element
Fill in the Blank with Placeholder Text
Uncomment HTML
Comment out HTML
Delete HTML Elements
Introduction to HTML5 Elements
Add Images to Your Website
Link to External Pages with Anchor Elements
Link to Internal Sections of a Page with Anchor Elements
Nest an Anchor Element within a Paragraph
Make Dead Links Using the Hash Symbol
Turn an Image into a Link
Create a Bulleted Unordered List
Create an Ordered List
Create a Text Field
Add Placeholder Text to a Text Field
Create a Form Element
Add a Submit Button to a Form
Use HTML5 to Require a Field
Create a Set of Radio Buttons
Create a Set of Checkboxes
Use the value attribute with Radio Buttons and Checkboxes
Check Radio Buttons and Checkboxes by Default
Nest Many Elements within a Single div Element
Declare the Doctype of an HTML Document
Define the Head and Body of an HTML Document
Change the Color of Text
Use CSS Selectors to Style Elements
Use a CSS Class to Style an Element
Style Multiple Elements with a CSS Class
Change the Font Size of an Element
Set the Font Family of an Element
Import a Google Font
Specify How Fonts Should Degrade
Size Your Images
Add Borders Around Your Elements
Add Rounded Corners with border-radius
Make Circular Images with a border-radius
Give a Background Color to a div Element
Set the id of an Element
Use an id Attribute to Style an Element
Adjust the Padding of an Element
Adjust the Margin of an Element
Add a Negative Margin to an Element
Add Different Padding to Each Side of an Element
Add Different Margins to Each Side of an Element
Use Clockwise Notation to Specify the Padding of an Element
Use Clockwise Notation to Specify the Margin of an Element
Use Attribute Selectors to Style Elements
Understand Absolute versus Relative Units
Style the HTML Body Element
Inherit Styles from the Body Element
Prioritize One Style Over Another
Override Styles in Subsequent CSS
Override Class Declarations by Styling ID Attributes
Override Class Declarations with Inline Styles
Override All Other Styles by using Important
Use Hex Code for Specific Colors
Use Hex Code to Mix Colors
Use Abbreviated Hex Code
Use RGB values to Color Elements
Use RGB to Mix Colors
Use CSS Variables to change several elements at once
Create a custom CSS Variable
Use a custom CSS Variable
Attach a Fallback value to a CSS Variable
Improve Compatibility with Browser Fallbacks
Inherit CSS Variables
Change a variable for a specific area
Use a media query to change a variable
Create Visual Balance Using the text-align Property
Adjust the Width of an Element Using the width Property
Adjust the Height of an Element Using the height Property
Use the strong Tag to Make Text Bold
Use the u Tag to Underline Text
Use the em Tag to Italicize Text
Use the s Tag to Strikethrough Text
Create a Horizontal Line Using the hr Element
Adjust the background-color Property of Text
Adjust the Size of a Heading Element Versus a Paragraph Element
Add a box-shadow to a Card-like Element
Decrease the Opacity of an Element
Use the text-transform Property to Make Text Uppercase
Set the font-size for Multiple Heading Elements
Set the font-weight for Multiple Heading Elements
Set the font-size of Paragraph Text
Set the line-height of Paragraphs
Adjust the Hover State of an Anchor Tag
Change an Element's Relative Position
Move a Relatively Positioned Element with CSS Offsets
Lock an Element to its Parent with Absolute Positioning
Lock an Element to the Browser Window with Fixed Positioning
Push Elements Left or Right with the float Property
Change the Position of Overlapping Elements with the z-index Property
Center an Element Horizontally Using the margin Property
Learn about Complementary Colors
Learn about Tertiary Colors
Adjust the Color of Various Elements to Complementary Colors
Adjust the Hue of a Color
Adjust the Tone of a Color
Create a Gradual CSS Linear Gradient
Use a CSS Linear Gradient to Create a Striped Element
Create Texture by Adding a Subtle Pattern as a Background Image
Use the CSS Transform scale Property to Change the Size of an Element
Use the CSS Transform scale Property to Scale an Element on Hover
Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
Create a Graphic Using CSS
Create a More Complex Shape Using CSS and HTML
Learn How the CSS @keyframes and animation Properties Work
Use CSS Animation to Change the Hover State of a Button
Modify Fill Mode of an Animation
Create Movement Using CSS Animation
Create Visual Direction by Fading an Element from Left to Right
Animate Elements Continually Using an Infinite Animation Count
Make a CSS Heartbeat using an Infinite Animation Count
Animate Elements at Variable Rates
Animate Multiple Elements at Variable Rates
Change Animation Timing with Keywords
Learn How Bezier Curves Work
Use a Bezier Curve to Move a Graphic
Make Motion More Natural Using a Bezier Curve
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
Create a Media Query
Make an Image Responsive
Use a Retina Image for Higher Resolution Displays
Make Typography Responsive
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
Create Your First CSS Grid
Add Columns with grid-template-columns
Add Rows with grid-template-rows
Use CSS Grid units to Change the Size of Columns and Rows
Create a Column Gap Using grid-column-gap
Create a Row Gap using grid-row-gap
Add Gaps Faster with grid-gap
Use grid-column to Control Spacing
Use grid-row to Control Spacing
Align an Item Horizontally using justify-self
Align an Item Vertically using align-self
Align All Items Horizontally using justify-items
Align All Items Vertically using align-items
Divide the Grid Into an Area Template
Place Items in Grid Areas Using the grid-area Property
Use grid-area Without Creating an Areas Template
Reduce Repetition Using the repeat Function
Limit Item Size Using the minmax Function
Create Flexible Layouts Using auto-fill
Create Flexible Layouts Using auto-fit
Use Media Queries to Create Responsive Layouts
Create Grids within Grids
Build a Tribute Page
Build a Survey Form
Build a Product Landing Page
Build a Technical Documentation Page
Build a Personal Portfolio Webpage

Taught by

freeCodeCamp Team

Reviews

4.6 rating, based on 105 Class Central reviews

Start your review of Responsive Web Design

Ryan Lam @RyanLam

I was a bit hesitant before starting to work on this, as I knew my art and aesthetic sense is as terrible as it is… and I am pretty afraid that it might affect my ability to comprehend different visual elements in a webpage. After taking the course…

I was a bit hesitant before starting to work on this, as I knew my art and aesthetic sense is as terrible as it is… and I am pretty afraid that it might affect my ability to comprehend different visual elements in a webpage.

After taking the course, needless to say, I had understood more about how to interpret each visual style that is present in a website by reading its code. It teaches the basics of different elements on a website with the usage of HTML5 and CSS. It is a course heavily focus on visual design, including topics like increasing accessibility in a website, arranging different elements, and the new but powerful CSS flexbox.

I like the coding environment presented in the course, and since it is completely free (unlike other competitors which require a paid service often), I think that the content covered is vast and sufficient compared to other coding courses. However, it is quite a bit of an overestimate to say that it contains 300 hours of content (as stated in the certificate). Consider how I finished the course under 3 weeks… but maybe it is the projects / final assignments that take up most of the time, I will explain that later.

The course contains numerous programming “challenges” that let you solve to gain an understanding of a subject. Each unit has about 20 of them. Disappointingly, these “challenges” usually contain only 1 to 2 lines of code, with very explicit instructions, so most of the time it is just reading comprehension for me. However, some of it might be challenging for coding newbies. So sometimes I am feeling that I am overqualified for the certificate.

After the challenges, there are 5 final tasks to finish to claim the certification. To finish the task, you must write a website, fulfilling the user stories set by the questions, and pass all the tests on a test checker. For each task, you can see the test checker’s result and show what you did wrong. You also have an example website (which pass all the tests) for you to refer to. I like both of the features, it makes website design seems less boring and much more creative, it also can boost you to design a more appealing website if you are able.

I understand that most of our fellow learners here would want to write a beautiful website, but sadly I am running out of time when I was studying for this certificate. It is September, and I had to prepare my materials back for my uni, and as mentioned, I am also not good with visual arts. I ended up writing a minimal example with the least material while passing all the tests. And that gives me a huge time save, I don’t know whether this is a good thing or not, but it passes all the tests so I don’t have a lot to say about it.

Criticisms aside, the content still makes me confident in the basics of designing a website. Does it make me think it is an artsy thing? Maybe, that’s why it is a 3.5/5 from me, but I would recommend this course to people who have absolutely no programming experience and want to learn a new skill.
Fanayajo Oluwasegun @darenuges

What I really loved about this boot-camp was the the live sessions that had me coding and getting a quick feedback on interpreting my code. It allowed me reduce the workload on my brain, make mistakes and understand why what I did wouldn't work and ask questions to get real time answers. For me I was struggling with my learning pattern and this course came at the right time to help with projects based learning.
Randhir Singh

I was a bit hesitant before starting to work on this, as I knew my art and aesthetic sense is as terrible as it is… and I am pretty afraid that it might affect my ability to comprehend different visual elements in a webpage. After taking the course…

I was a bit hesitant before starting to work on this, as I knew my art and aesthetic sense is as terrible as it is… and I am pretty afraid that it might affect my ability to comprehend different visual elements in a webpage.

After taking the course, needless to say, I had understood more about how to interpret each visual style that is present in a website by reading its code. It teaches the basics of different elements on a website with the usage of HTML5 and CSS. It is a course heavily focus on visual design, including topics like increasing accessibility in a website, arranging different elements, and the new but powerful CSS flexbox.

I like the coding environment presented in the course, and since it is completely free (unlike other competitors which require a paid service often), I think that the content covered is vast and sufficient compared to other coding courses. However, it is quite a bit of an overestimate to say that it contains 300 hours of content (as stated in the certificate). Consider how I finished the course under 3 weeks… but maybe it is the projects / final assignments that take up most of the time, I will explain that later.

The course contains numerous programming “challenges” that let you solve to gain an understanding of a subject. Each unit has about 20 of them. Disappointingly, these “challenges” usually contain only 1 to 2 lines of code, with very explicit instructions, so most of the time it is just reading comprehension for me. However, some of it might be challenging for coding newbies. So sometimes I am feeling that I am overqualified for the certificate.

After the challenges, there are 5 final tasks to finish to claim the certification. To finish the task, you must write a website, fulfilling the user stories set by the questions, and pass all the tests on a test checker. For each task, you can see the test checker’s result and show what you did wrong. You also have an example website (which pass all the tests) for you to refer to. I like both of the features, it makes website design seems less boring and much more creative, it also can boost you to design a more appealing website if you are able.

I understand that most of our fellow learners here would want to write a beautiful website, but sadly I am running out of time when I was studying for this certificate. It is September, and I had to prepare my materials back for my uni, and as mentioned, I am also not good with visual arts. I ended up writing a minimal example with the least material while passing all the tests. And that gives me a huge time save, I don’t know whether this is a good thing or not, but it passes all the tests so I don’t have a lot to say about it.

Criticisms aside, the content still makes me confident in the basics of designing a website. Does it make me think it is an artsy thing? Maybe, that’s why it is a 3.5/5 from me, but I would recommend this course to people who have absolutely no programming experience and want to learn a new skill.
MadBoomCoder @madScientist

Really nice course, learned a lot with it. You get interactive stuff and a debugging window, the instructions, code, and result all in one place. You also get encouraging messages when you finish a course, and everything is self-paced. There are hints, and a forum where you can ask anything (related to the subject). In your curriculum homepage there is always a cool quote from some famous guy like Einstein or Edison. Super recommended!!
"It had long since come to my attention that people of accomplishment rarely sat back and let things happen to them. They went out and happened to things."
Leonardo da Vinci
Mo @monicajasper

This course was amazing, and was the push I needed to finally get into development. The community from the bootcamp cohort was really kind and encouraging. Jess's weekly instruction and patience with questions kept me motivated and on track with the freecodecamp lessons, which were great in their own right. The guest speakers were really interesting, and it was nice to have the balance of practical and historical perspectives in addition to the purely code-based lessons. Highly recommend!
Nayeem Ahmad Najar @Nayeem1121

This is the curse through which i have learnt more things than the paid course they provide all the things especially the way taught and the explanation they provifde about the topic and the classes were conducting in a very good way
Umais Tayyab @Umair11147

Best Course of the year i will learn alot from this course i wish the very best to the instructor njoyed the course, had no sweat following the difficult content as Jung made it a piece of cake by step-by-step instructional teaching. The learning experience is also full of attention catching anecdotes that I felt no difficulty focusing.
Gio

I've always struggled with learning HTML. I've taken about 10 courses but I only remembered freecodecamp's course.
Zach Christensen @zarchmane

Great to have a community to bounce questions off of and learn and grow together. Paced appropriately for a new learner but may be a bit slow for someone with some experience already but you can set your own pace so ultimately it doesn't matter
Ismail A @smish

Another amazing opportunity to be excited for while doing, and something to be proud of after finishing.
Raghav Shridhar Somani

I was a bit hesitant before starting to work on this, as I knew my art and aesthetic sense is as terrible as it is… and I am pretty afraid that it might affect my ability to comprehend different visual elements in a webpage. After taking the course…

I was a bit hesitant before starting to work on this, as I knew my art and aesthetic sense is as terrible as it is… and I am pretty afraid that it might affect my ability to comprehend different visual elements in a webpage.

After taking the course, needless to say, I had understood more about how to interpret each visual style that is present in a website by reading its code. It teaches the basics of different elements on a website with the usage of HTML5 and CSS. It is a course heavily focus on visual design, including topics like increasing accessibility in a website, arranging different elements, and the new but powerful CSS flexbox.

I like the coding environment presented in the course, and since it is completely free (unlike other competitors which require a paid service often), I think that the content covered is vast and sufficient compared to other coding courses. However, it is quite a bit of an overestimate to say that it contains 300 hours of content (as stated in the certificate). Consider how I finished the course under 3 weeks… but maybe it is the projects / final assignments that take up most of the time, I will explain that later.

The course contains numerous programming “challenges” that let you solve to gain an understanding of a subject. Each unit has about 20 of them. Disappointingly, these “challenges” usually contain only 1 to 2 lines of code, with very explicit instructions, so most of the time it is just reading comprehension for me. However, some of it might be challenging for coding newbies. So sometimes I am feeling that I am overqualified for the certificate.

After the challenges, there are 5 final tasks to finish to claim the certification. To finish the task, you must write a website, fulfilling the user stories set by the questions, and pass all the tests on a test checker. For each task, you can see the test checker’s result and show what you did wrong. You also have an example website (which pass all the tests) for you to refer to. I like both of the features, it makes website design seems less boring and much more creative, it also can boost you to design a more appealing website if you are able.

I understand that most of our fellow learners here would want to write a beautiful website, but sadly I am running out of time when I was studying for this certificate. It is September, and I had to prepare my materials back for my uni, and as mentioned, I am also not good with visual arts. I ended up writing a minimal example with the least material while passing all the tests. And that gives me a huge time save, I don’t know whether this is a good thing or not, but it passes all the tests so I don’t have a lot to say about it.

Criticisms aside, the content still makes me confident in the basics of designing a website. Does it make me think it is an artsy thing? Maybe, that’s why it is a 3.5/5 from me, but I would recommend this course to people who have absolutely no programming experience and want to learn a new skill.
Tokka Khalaf @Tokka

It was a very interesting course, I enjoyed it. The mentors are very nice, we can get back to the materials anytime we want on youtube. This course is a good introduction for those with no IT backgroud, it is very useful for those who want to know more on programming languages like HTML and CSS.
Rakesh Ranjan Singh @drigger1721

Notes are available in easy and understandable language.Examples for related topic are understandable and projects for practicing are very nice.
Katty Alegría Solórzano @clioteorica

A great experience. Jessica Rose, Ramón Huidobro, Fabio, fellow classmates, and all the guest speakers have been amazing. Thanks to Class Central and all the sponsors. Life-changing.
Endaweke Anagaw @amen

To give a real review first i must watch the course deeply so give me a time and course content first.
Anna Marie Martin @spokeanna

An excellent self-paces course for people entirely new to HTML or CSS coding, and a great review for people like me who learned catch-as-catch-can.

Great support and tutorials. Go Team!

BONUS: when you solve a problem, the tutorial pop-up gives you total cheeseball encouragement. Examples: "Warp Nine!" "To Infinity, and Beyond!" "You're a Rockstar!"
Kayleigh

Wonderful people and course, for something that is free its excellent.

Might need to touch up things here and there if you use html professionally, but perfect for someone wanting to get into html and css. I spent alot less than 300hrs on it though.

Thanks!
Martha Laylo @math

It is now an opportunity to try something new, I hope I could learn more, and engage in developing my skills. Nice to meet you all!
Venkata Murali Kumar Chintala @murali

This course gives a really good introduction into HTML and CSS. The five projects are really fun to build.
Karla Oliveira @karlaoalima

It was a better experience than I thought it would be. The content is amazing, the lives where super easy to follow and the environment is great