Learn Responsive Web Design by Coursera
Course Highlights
- Responsive web design, CSS, HTML
Skills you will learn!
Curriculum
26 Topics
CSS Fundamentals Quiz
Welcome to the course!
An Important note before we start
Introduction to the CSS Fundamentals module
Margin and Padding - Margins and spacing out text
Margin and Padding - Collapsing margins
Margin and Padding - Consistency and a new type of selector
Inline and Block elements
The span element
Styling links
Practice Time!
Inline-block
Styling buttons
Specificity basics
Specificity - two selectors of equal value
Compound Selectors
Compound selectors and specificity
A better way to name our CSS classes
The text properties
Font-family and font stacks
How to use Google fonts
Inheritance
Working with overwriting and applying inheritance
Putting it all together
Putting it all together - the CSS
Solution to the challenge and module wrap up
46 Topics
Starting to Think Responsively Quiz
Starting to think responsively
CSS Units
CSS Units - Percentage
Controlling the width of images
min-width and max-width
CSS Units - The em unit
The problem with ems
CSS Units - rems
Picking which unit to use
ems and rems - an example
Flexbox refresher and setting up some HTML
Basic styles and setting up the columns
Adding the background color
Setting the column widths
Spacing out the columns
Controlling the vertical position of flex items
Media Query basics
Making our layout responsive with flex-direction
flex-direction explained
Creating a navigation
Using flexbox to start styling our navigation
Making our navigation look good
Adding the underline
A more complicated navigation
Making the navigation responsive
Taking a look at the rest of the project
Setting up the structure
Featured article structure
The home page - HTML for the recent articles
home page - html for the aside
Starting the CSS for our page
Starting the layout - looking at the big picture
Starting to think mobile first
Styling the featured article
Changing the visual order with flexbox
Playing with the title's position and the downsides of negative margins
Styling recent articles for large screens
Changing image sizes with object-fit
Setting up the widgets and talking breakpoints
Using a new pseudo-class to wrap-up the homepage
Creating the recent posts page
Setting up the About Me page
Fixing up some loose ends
Important Note: The viewport meta tag
Module wrap up
39 Topics
Stepping up our style quiz
It's time to step up our style
A look at line-height
text-transform: uppercase
Making things easier to read with letter-spacing
A nice color trick with rgba()
background-images
Background images and the file path (very important note)
Controlling our background images
BBQ Splash Page - Project Introduction
Writing the HTML for the BBQ splash page
Starting to style it up - BBQ Splash Page
Adding the background image - BBQ Splash Page
Changing the order - BBQ Splash Page
Styling the main content area - BBQ Splash page
Adding the media query - BBQ Splash Page
Setting up the typography for large screens - BBQ Splash Page
Starting to set things up for large screens - BBQ Splash Page
Viewport units
Adding viewport units to the BBQ Splash Page
Enter box-sizing: border-box
Using flexbox to vertically center the main content - BBQ Splash Page
Fixing the intro section on both small and large screens - BBQ Splash Page
Dealing with very large screens solution #1
Dealing with very big screens solution #2
The very basics of forms
Form basics - form attributes
The basics of styling form
Adding the form - BBQ Splash Page
Starting to style up the form - BBQ Splash Page
Making the inputs look good - BBQ Splash Page
CSS Gradients
Styling the button - BBQ Splash Page
Basic transitions
Intro to transforms (and a quick word on performance)
We can transition more than :hover
Border gradients
Blending images colors and gradients with background-blend-mode
Wrap up
18 Topics
Taking Flexbox to the next level quiz
Taking flexbox to the next level
flex-direction flex-wrap and flex-flow
justify-content and align-items and their relationship to flex-direction
Exploring align-content
flex-grow and flex-shrink explained
flex-basis
The flex shorthand property
Aligning individual elements with align-self
Margin auto and flexbox
Building a card component with flexbox - Introduction
Building a card component with flexbox - The markup
Building a card component with flexbox - Typography
Building a card component with flexbox - Mobile layout
Building a card component with flexbox - Large screens part one
Building a card component with flexbox - Large screens part two
Centering something on the screen with flexbox
Module wrap-up
20 Topics
CSS Grid: The Ultimate Layout Tool Quiz
Introduction to CSS Grid
Setting up a basic grid
Placing items on the grid
grid-row and grid-column shorthands
Spanning columns
Some similarities to flexbox
Using grid for our card component
The grid-gap property
Adding the gap to our card
The implicit and explicit grid
Exploring grid areas
grid-areas and media queries
minmax()
the fr unit
minmax() and the fr unit
Putting grid to use - part 1
Putting grid to use - part 2
repeat()
auto-fit and auto-fill
30 Topics
Taking it to the next level quiz
Taking it to the next level
Analyzing the layouts
Starting work on the homepage
The HTML for the homepage
The first lines of CSS you should always write
Setting up our grid for small screens
Continuing the hero area
The "info" section
Setting up the footer
Using Font Awesome for our icons
Wrapping up the footer
Setting up the grid and hero for larger screens
Setting up the rest of the page for larger screens
Starting to style our navigation
Setting up our navigation for small screens with positioning
Making the close button
Adding the open button to our navigation
Styling the navigation for large screens
Fixing up the navigation and hero area
Creating the second page
Styling the about page
Exploring box-shadows to get the effect on our images
Using pseudo-elements to add the yellow lines
Adding the yellow bar to our titles
Creating the contact page
Styling the contact form
Styling the contact form for larger screens
The loose ends
You did it!
Learn Responsive Web Design
Related Web Design Courses
Thank You!
Your review has been submitted successfully.