TOIT Training

Facebook X-twitter Linkedin Instagram
Menu
UI/UX Courses

Learn Responsive Web Design

ToIT ToIT
0 (0)
Duration

0m

Students

0

Level

Intermediate

Last Updated

November 10, 2024

Learn Responsive Web Design
  • Overview
  • Curriculum
  • Reviews

This course will take you to a professional level in responsive web design. You’ll learn to build advanced layouts while solving fun coding challenges along the way.

  • 6 Sections
  • 175 Lessons
  • 0 Quizzes
  • 0m Duration
Expand All

CSS Fundamentals

25 Lessons 0 Quizzes
  • 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

Starting to Think Responsively

47 Lessons 0 Quizzes
  • 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
  • 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

Stepping Up Our Style

38 Lessons 0 Quizzes
  • 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

Taking Flexbox to the Next Level

17 Lessons 0 Quizzes
  • 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

CSS Grid: The Ultimate Layout Tool

19 Lessons 0 Quizzes
  • 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

Taking It to the Next Level

29 Lessons 0 Quizzes
  • Taking It to the Next Level
  • Analyzing the Layouts
  • Starting Work on the Homepage
  • The HTML for the Homepage
  • 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
  • Creating the “Open” State and Adding JavaScript to Close Our Navigation
  • 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!

0

0 Ratings
5 Star 0%
4 Star 0%
3 Star 0%
2 Star 0%
1 Star 0%

Reviews

Free

Start Course

Retake Course

Are you sure you want to retake the course? This action will permanently delete all your progress in this course.

Course Includes

  • CSS basics
  • Sane CSS defaults
  • Specificity and selectors
  • CSS best practices
  • Text and fonts
  • Units and responsive text
  • Flexbox layouts
  • Vertical aligning of content
  • Design best practices
  • Media Queries and viewports
  • Forms and how to make them look good
  • Advanced flexbox concepts
  • CSS Grid layouts
  • Icons with Font Awesome
  • Transitions and animations
  • Adding it all together

Deleting Course Review

Are you sure? You can't restore this back

Course Access

This course is password protected. To access it please enter your password below:

Buy for group

Learn Responsive Web Design
No groups Found

You don't have any groups yet

Create a group and add group members. Sync Group(s)
Choose Group(s)
Sync Group(s)
Create a new group Go to Checkout