Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

Responsive Web Design

via freeCodeCamp

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 Header Versus a Paragraph Tag
  • 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

Related Courses

Reviews

4.7 rating, based on 38 reviews

Start your review of Responsive Web Design

  • 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,...
  • 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
  • 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!
  • 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
  • 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!
  • Profile image for Gio
    Gio
    3
    I've always struggled with learning HTML. I've taken about 10 courses but I only remembered freecodecamp's course.
  • Another amazing opportunity to be excited for while doing, and something to be proud of after finishing.
  • This course gives a really good introduction into HTML and CSS. The five projects are really fun to build.
  • Profile image for 40 Harshita Bharti
    40 Harshita Bharti
    8
    A must for non-native learners and advanced learners. Step by step method of writing for many different school boards in South Asian countries. Extremely practical way with appropriate examples.

  • 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!"
  • Profile image for Kayleigh
    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!
  • Very informative and easy to understand. Would definitely recommend to beginners as you can go at your own pace, and there is a forum you can access if you get stuck. Happy Coding!
  • The Bootcamp is good and the slides are understandable. The quizzes and exercises are easy to follow. Definitely recommend the Bootcamp to anyone who is new to web development.
  • Really enjoyed the course. The best part was the supportive and interactive community on Class Central. Made for great networking and everybody so happy to help.
  • 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
  • A great course with excellent sandbox for self study without the need for anything else than a browser.
  • A great course with excellent sandbox for self study without the need for anything else than a browser.

  • Good learning experience together. Not too fast nor slow. Also helpful by receiving reminder emails.
  • Stephen Revere
    2
    The FreeCodeCamp team have put together an absolutely incredible setup. Not only have they already put together one of the greatest online coding training systems around, but they have gotten world-famous guest speakers to help us learn how to learn and keep us inspired. Truly amazing.

    Thank you all.
  • Really learnt a lot from this course and the course structure also involves students. It is very interactive and i was able to achieve the needed skills i wanted in a short period of time. I will definitely recommend it to anyone who is interested in web development.

Never Stop Learning!

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free