TOIT Training

Mobile-First Responsive Website Build (with CSS Grid)

Mobile-First Responsive Website Build (with CSS Grid)
  • Overview
  • Curriculum
  • Reviews

 

This course introduces the approach of mobile-first design in building responsive websites, prioritizing optimization for smaller screens and then scaling up to larger screens using CSS Grid. It focuses on the principles of responsive web design, emphasizing the use of media queries and the CSS Grid layout module to create complex and flexible layouts that adapt to the screen sizes of various devices. The course guides learners through setting up a CSS Grid-based layout that starts with the mobile viewpoint as the default styling. Then, it progressively enhances the user experience with additional features and layouts for tablets and desktops. Participants learn to leverage the power of CSS Grid to manage both columns and rows, align content, and build intricate designs that maintain their integrity across different devices. The aim is to equip learners with the skills needed to deliver an optimal viewing experience that is consistent, accessible, and user-friendly, starting from the smallest device.

  • 3 Sections
  • 14 Lessons
  • 0 Quizzes
  • 0m Duration
Expand All

Getting Started

5 Lessons 0 Quizzes
  • Course Introduction
  • Making the HTML Template
  • Mobile-First Approach Explained
  • Creating Some Base Styles
  • Custom Fonts

 Grid Layouts

2 Lessons 0 Quizzes
  • CSS Grid Basics
  • Creating a 12 Column Grid

 Responsive Styles

7 Lessons 0 Quizzes
  • Adding Mobile Styles (Part 1)
  • Adding Mobile Styles (Part 2)
  • Adding Mobile Styles (Part 3)
  • Tablet Styles
  • Adding Laptop Styles (Part 1)
  • Adding Laptop Styles (Part 2)
  • Adding Final Desktop Styles

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

  • Design mobile-first layouts
  • Implement responsive web design principles
  • Use CSS Grid for complex layouts
  • Create adaptable navigation menus
  • Construct responsive image galleries
  • Optimize forms for mobile use

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

Mobile-First Responsive Website Build (with CSS Grid)
No groups Found

You don't have any groups yet

Create a group and add group members. Sync Group(s)