#Media Queries

Learn essential responsive development skills to create mobile-friendly websites, covering viewports, media queries, fluid layouts, drop-down menus, and responsive images.

Add to list

12 Lesons

1 hour 30 minutes

On-Demand

Free-Video

How to Create a Responsive Website from Scratch

Learn to build a responsive agency/portfolio website using HTML, CSS, and media queries, covering structure, styling, and advanced features like parallax effects.

Add to list

6 Lesons

2 hours 30 minutes

On-Demand

Free-Video

Responsive Web Design

Learn to create flexible, adaptive websites that look great on any device. Master key techniques like fluid layouts, responsive text, and media queries.

Add to list

9 Lesons

1 hour 30 minutes

On-Demand

Free-Video

Traversy Media

Creative Agency Website From Scratch - HTML & CSS

Build a responsive creative agency website from scratch using HTML, CSS, and JavaScript, covering layout techniques, interactivity, and mobile optimization.

Add to list

12 Lesons

1 hour 27 minutes

On-Demand

Free-Video

Learning CSS

Master CSS techniques for engaging web designs: animations, effects, responsive layouts, and advanced styling.

Add to list

12 Lesons

1 hour 30 minutes

On-Demand

Free-Video

Learn HTML & CSS - A Series for Beginners

Comprehensive introduction to web development fundamentals, covering HTML structure, CSS styling, and responsive design techniques for creating modern websites.

Add to list

16 Lesons

2 hours 30 minutes

On-Demand

Free-Video

Magento 2 Theme Development from Zero

Comprehensive guide to Magento 2 theme development, covering templating, JavaScript, CSS/LESS, and layout configuration. Learn to create custom components and optimize performance.

Add to list

50 Lesons

9 hours

On-Demand

Free-Video

Sass Features That Make It Better Than Vanilla CSS

Explore advanced Sass features like nesting, mixins, partials, functions, and loops to enhance your CSS workflow and create more efficient, maintainable stylesheets.

Add to list

8 Lesons

28 minutes

On-Demand

Free-Video

Coding a Responsive Webpage From Start to Finish

Learn to build a responsive webpage from scratch using HTML and CSS, covering mobile and desktop layouts, typography, navigation, and various sections like hero, products, and footer.

Add to list

12 Lesons

2 hours 2 minutes

On-Demand

Free-Video

Responsive Navigation With an Animated Dropdown Using CSS Clip-Path

Learn to create a responsive navigation menu with an animated dropdown using CSS clip-path, jQuery, and custom hamburger menu animation for enhanced user experience.

Add to list

7 Lesons

51 minutes

On-Demand

Free-Video

JavaScript Mastery

Build and Deploy 4 Modern React Apps and Get Hired as a Frontend Developer

Learn to build and deploy 4 modern React apps, mastering UI/UX design, responsive layouts, animations, and deployment. Gain practical skills to become a sought-after frontend developer.

Add to list

5 Lesons

9 hours 45 minutes

On-Demand

Free-Video

JavaScript Mastery

Build and Deploy a Modern YouTube Clone Application in React JS with Material UI

Create a responsive React JS YouTube clone with video playback, custom categories, and channel pages using Material UI 5 and RapidAPI for data fetching.

Add to list

9 Lesons

2 hours 22 minutes

On-Demand

Free-Video

Traversy Media

PostCSS Crash Course

Learn to set up and use PostCSS with popular plugins like autoprefixer, postcss-preset-env, and precss. Explore custom selectors, media queries, nesting, and file structure optimization.

Add to list

12 Lesons

34 minutes

On-Demand

Free-Video

Traversy Media

Build a Responsive HTML & CSS Template with FlexboxGrid

Create a responsive HTML & CSS template using FlexboxGrid, a lightweight Flexbox-based grid system. Learn to build a modern website layout with easy alignment and Bootstrap-like classes.

Add to list

34 Lesons

1 hour 12 minutes

On-Demand

Free-Video

HTML and CSS Tutorial in Hindi

Comprehensive HTML and CSS tutorial in Hindi, covering beginner to advanced concepts with hands-on projects. Learn to design responsive websites from scratch using modern web development techniques.

Add to list

103 Lesons

16 hours

On-Demand

Free-Video

Umar Tazkeer

Full HTML Course for Digital Marketers in Hindi

Comprehensive HTML tutorial for digital marketers, covering essential web development concepts and their application in SEO and digital marketing strategies.

Add to list

20 Lesons

2 hours 6 minutes

On-Demand

Free-Video

Responsive Food and Restaurant Website Using Bootstrap 5 - Bootstrap 5 Responsive Website Design

Learn to create a responsive food and restaurant website using Bootstrap 5. Master HTML, CSS, and responsive design techniques for building modern, visually appealing web layouts.

Add to list

20 Lesons

1 hour 3 minutes

On-Demand

Free-Video

Responsive Food and Restaurant Website Using Bootstrap 5 - Bootstrap 5 Responsive Website Design

Learn to create a responsive food and restaurant website using Bootstrap 5. Develop a modern, mobile-friendly design with interactive features like countdown timers and smooth scrolling navigation.

Add to list

14 Lesons

58 minutes

On-Demand

Free-Video

Responsive Dropdown Menu Bar with HTML & CSS - Responsive Multilevel Dropdown Menu

Learn to create a responsive multilevel dropdown menu bar using HTML, CSS, and jQuery for enhanced website navigation.

Add to list

14 Lesons

37 minutes

On-Demand

Free-Video

Complete Responsive Personal Portfolio Website Using HTML, CSS, and JavaScript

Learn to create a responsive personal portfolio website using HTML, CSS, and JavaScript. Covers header, hero banner, about section, skills, services, contact form, and mobile-friendly design.

Add to list

22 Lesons

1 hour 42 minutes

On-Demand

Free-Video

Responsive Product Card UI Design Using HTML CSS jQuery - Responsive E-Commerce Card Design

Learn to create a responsive e-commerce product card UI using HTML, CSS, and jQuery. Master essential web design techniques for building interactive and visually appealing product displays.

Add to list

17 Lesons

33 minutes

On-Demand

Free-Video

Responsive ECommerce Website Using Bootstrap 5

Learn to create a responsive e-commerce website using Bootstrap 5. Master navbar design, carousel sliders, and JavaScript functionality for a professional online store.

Add to list

13 Lesons

48 minutes

On-Demand

Free-Video

Responsive Food and Restaurant Website Using Bootstrap 5 - Bootstrap 5 Responsive Website Design

Learn to create a responsive food and restaurant website using Bootstrap 5. Covers key sections like About Us, Food Categories, Carousel Slider, and Footer with HTML, CSS, and JavaScript implementation.

Add to list

13 Lesons

46 minutes

On-Demand

Free-Video

Responsive Food and Restaurant Website Using Bootstrap 5 - Bootstrap 5 Responsive Website Design

Learn to create a responsive food and restaurant website using Bootstrap 5. Develop a modern, mobile-friendly design with navigation, banner, and food category sections. Perfect for web developers seeking practical skills.

Add to list

10 Lesons

46 minutes

On-Demand

Free-Video

Responsive E-Commerce Website Using Bootstrap 5

Learn to create a responsive e-commerce website using Bootstrap 5, covering online store sections, product cards, and banners with HTML and CSS in this Hindi tutorial.

Add to list

10 Lesons

49 minutes

On-Demand

Free-Video

Responsive E-Commerce Website Using Bootstrap 5

Learn to create a responsive e-commerce website using Bootstrap 5, including navbar, carousel slider, and media queries for a professional online store design.

Add to list

11 Lesons

42 minutes

On-Demand

Free-Video

Responsive Portfolio Website Using Bootstrap 5

Learn to create a responsive portfolio website using Bootstrap 5. Covers navbar, banner, custom CSS, media queries, and JavaScript for scroll and mobile menu functionality.

Add to list

14 Lesons

57 minutes

On-Demand

Free-Video

Responsive SEO Website Using Bootstrap 5

Learn to create a responsive SEO-optimized website using Bootstrap 5, including navbar, hero section, and about section. Covers HTML, CSS, JavaScript, and mobile optimization techniques.

Add to list

14 Lesons

53 minutes

On-Demand

Free-Video

Responsive Digital Marketing Agency Website Using Bootstrap 5

Learn to build a responsive digital marketing agency website using Bootstrap 5, covering testimonials, clients, FAQs, and footer sections with HTML, CSS, and media queries.

Add to list

15 Lesons

52 minutes

On-Demand

Free-Video

Responsive Digital Marketing Agency Website Using Bootstrap 5

Learn to create a responsive digital marketing agency website using Bootstrap 5, covering key sections like About, Features, Pricing, and Free Trial with HTML, CSS, and media queries.

Add to list

13 Lesons

1 hour 6 minutes

On-Demand

Free-Video

Brian Design

How to Make a Website Using HTML and CSS - Coding Adobe XD Web Design Tutorial

Convert Adobe XD web design to HTML/CSS: Learn gradient backgrounds, SVG images, and responsive design techniques in this hands-on tutorial for beginners.

Add to list

14 Lesons

39 minutes

On-Demand

Free-Video

Colt Steele

Responsive Design & Media Queries - Colt's Code Camp

Learn responsive design and media queries to create websites that adapt to different screen sizes, enhancing user experience across devices.

Add to list

6 Lesons

40 minutes

On-Demand

Free-Video

Dani Krossing

Make a Website Responsive for All Devices - Learn HTML and CSS Full Course for Beginners

Learn to create responsive websites using media queries in CSS, adapting layouts for various devices and screen sizes to ensure optimal viewing experiences across platforms.

Add to list

10 Lesons

20 minutes

On-Demand

Free-Video

React Portfolio Website Tutorial From Scratch - Responsive React JS Portfolio Website

Learn to build a responsive React portfolio website with theme customization, animations, and advanced features. Master modern React, CSS best practices, and essential web development skills.

Add to list

18 Lesons

2 hours 11 minutes

On-Demand

Free-Video

Responsive Blog App-Website with Admin Panel Tutorial - Full CRUD Blog App PHP & MySQL Project

Build a responsive CRUD blog website with admin panel using HTML, CSS, JavaScript, PHP, and MySQL. Learn frontend design, backend integration, and user management.

Add to list

41 Lesons

4 hours 13 minutes

On-Demand

Free-Video

HTML, SASS, CSS & JavaScript Responsive Website Tutorial for Beginners - Complete Hospital Website

Learn to build a responsive hospital website using HTML, SASS/CSS, and JavaScript. Covers layout, styling, animations, form submission, and deployment. Ideal for beginners seeking practical web development skills.

Add to list

26 Lesons

3 hours 8 minutes

On-Demand

Free-Video

Complete Responsive Personal Portfolio Website Using HTML, CSS & JavaScript - Full Tutorial

Learn to create a responsive personal portfolio website using HTML, CSS, and JavaScript. Covers design, functionality, and deployment with modern techniques like Flexbox and Grid.

Add to list

33 Lesons

3 hours 2 minutes

On-Demand

Free-Video

Responsive Admin Dashboard Using HTML, CSS, and JavaScript With Light & Dark Mode

Create a responsive admin dashboard with HTML, CSS, and JavaScript, featuring light and dark modes, modern design elements, and mobile-friendly layout.

Add to list

21 Lesons

1 hour 49 minutes

On-Demand

Free-Video

Responsive Admin Dashboard Using HTML, CSS & JavaScript with Light & Dark Mode

Build a responsive admin dashboard for e-commerce with HTML, CSS, and JavaScript. Features light/dark mode, modern design techniques, and dynamic content management.

Add to list

20 Lesons

1 hour 29 minutes

On-Demand

Free-Video

How to Make a Responsive Navbar Dropdown Menu and Website with HTML, CSS, and Vanilla Javascript

Build a responsive website with a dropdown navbar using HTML, CSS, and JavaScript. Learn to create adaptive layouts, animated menus, and interactive elements for all screen sizes.

Add to list

13 Lesons

1 hour 10 minutes

On-Demand

Free-Video

CSS Tutorial for Absolute Beginners - Learn CSS3

Learn CSS3 fundamentals and responsive web design techniques while building a website. Covers syntax, styling, BEM naming, media queries, and practical tips for beginners.

Add to list

29 Lesons

1 hour 6 minutes

On-Demand

Free-Video

Multi Level Navigation Menu With HTML & CSS Only - Responsive Dropdown Navbar Menu

Learn to create a responsive, accessible multi-level navigation menu using only HTML and CSS. Covers dropdown functionality, mega menu features, and screen reader compatibility.

Add to list

7 Lesons

37 minutes

On-Demand

Free-Video

Tailwind CSS Config and Deploy Tutorial

Learn to configure Tailwind CSS, adjust media queries, extend themes, and deploy your project to GitHub and Render.com in this comprehensive tutorial.

Add to list

10 Lesons

27 minutes

On-Demand

Free-Video

Tailwind CSS Project - TailwindCSS Tutorial

Learn advanced Tailwind CSS techniques to build a responsive website, including custom media queries, pseudo-elements, and various CSS styles for testimonials, contact forms, and footers.

Add to list

10 Lesons

38 minutes

On-Demand

Free-Video

Build a Website with Tailwind CSS - Project Tutorial

Learn to build a responsive website using Tailwind CSS, covering media queries, light/dark mode, and various CSS styles through class names. Hands-on project tutorial for practical implementation.

Add to list

10 Lesons

47 minutes

On-Demand

Free-Video

CSS Full Course for Beginners - Complete All-in-One Tutorial

Comprehensive CSS3 tutorial covering selectors, layout, styling, animations, and more. Ideal for beginners looking to master modern web design techniques through hands-on projects and in-depth instruction.

Add to list

25 Lesons

11 hours 8 minutes

On-Demand

Free-Video

CSS Complete Project for Beginners

Comprehensive tutorial on modern CSS and responsive web design, covering HTML structure, styling, layout techniques, and advanced features like dark mode for a taco shop website.

Add to list

27 Lesons

2 hours 12 minutes

On-Demand

Free-Video

CSS Responsive Card Design - Mini-Project Tutorial for Beginners

Learn to create a responsive card design using CSS, covering HTML structure, styling, media queries, and breakpoints for various screen sizes.

Add to list

16 Lesons

35 minutes

On-Demand

Free-Video

Code with Ania Kubów

Build a Responsive Online Portfolio from Scratch

Learn to create a responsive online portfolio using HTML, CSS, and basic JavaScript. Covers layout, navigation, sections, media queries, and deployment to a custom domain.

Add to list

12 Lesons

1 hour 28 minutes

On-Demand

Free-Video

Build a Responsive Card - HTML and CSS Tutorial

Learn to create a fully responsive card using HTML, CSS, and flexbox, mastering essential web design techniques for adaptable layouts.

Add to list

6 Lesons

24 minutes

On-Demand

Free-Video

Simple Tips to Making Responsive Layouts the Easy Way

Learn five easy techniques for creating responsive layouts, including global styling, flexible sizing, media queries, and modern CSS features to enhance your web design skills.

Add to list

6 Lesons

16 minutes

On-Demand

Free-Video

Derek Banas

Responsive Web Design Tutorial - Creating Optimized Sites for Multiple Devices

Learn to create websites that adapt seamlessly to any device. Master techniques for optimizing layouts, images, and content for various screen sizes, ensuring a consistent user experience across platforms.

Add to list

1 Lesons

37 minutes

On-Demand

Free-Video

developedbyed

Build a Responsive Website With HTML & CSS Tutorial

Learn to build a responsive website with HTML and CSS, covering animations, flexbox, and media queries for mobile optimization. Gain practical skills in modern web development.

Add to list

12 Lesons

41 minutes

On-Demand

Free-Video

DesignCourse

Creating Page Transitions with Barba.js and GSAP

Learn to create seamless page transitions using Barba.js and GSAP. Master techniques for smooth, artsy animations that enhance user experience and elevate your web design skills.

Add to list

10 Lesons

20 minutes

On-Demand

Free-Video

DesignCourse

Parallax in HTML, CSS and JavaScript Tutorial - Let's Make It Happen

Learn to create stunning parallax effects using HTML, CSS, and JavaScript with Laxxx.js. Master mobile-friendly designs and explore various parallax techniques for engaging web experiences.

Add to list

16 Lesons

32 minutes

On-Demand

Free-Video

Scrimba

Code a Dark/Light Theme Toggle with JavaScript, CSS, and HTML

Learn to create a dark/light mode toggle using HTML, CSS, and JavaScript. Explore toggle switch coding, theme implementation with CSS variables, and system preference detection via media queries.

Add to list

1 Lesons

1 hour 7 minutes

On-Demand

Free-Video

Envato Tuts+

Responsive Web Design - A Visual Guide to Media Queries

Explore media queries for creating adaptable websites across devices, enhancing user experience through flexible layouts and designs.

Add to list

1 Lesons

26 minutes

On-Demand

Free-Video

The Web is Ready for Great Graphic Design - CSS Day 2018

Explore how modern CSS tools enable flexible, high-quality graphic design for the web. Learn practical techniques inspired by iconic print designs, applicable to contemporary projects.

Add to list

1 Lesons

45 minutes

On-Demand

Free-Video

DesignCourse

HTML and CSS for Absolute Beginners - 2024 Crash Course

Comprehensive beginner-friendly guide to HTML and CSS, covering layout creation, mobile-first design, JavaScript basics, and responsive web development with hands-on project work.

Add to list

9 Lesons

1 hour 58 minutes

On-Demand

Free-Video

A Practical Guide to Responsive Web Design

Learn practical tips for creating responsive web designs, including avoiding fixed sizes, leveraging browser capabilities, and using media queries effectively.

Add to list

7 Lesons

23 minutes

On-Demand

Free-Video

Scale and Adapt - Building Responsive BBC News

Explore BBC News' journey in building a responsive, high-performance website that adapts to diverse devices, focusing on scalability, browser support, and innovative development techniques.

Add to list

22 Lesons

51 minutes

On-Demand

Free-Video

The Mobile Viewports - Understanding Layout, Visual, and Ideal Viewports

Explore mobile viewports, responsive design, and pixel complexities in web development. Gain insights into layout, visual, and ideal viewports, meta viewport settings, and browser quirks.

Add to list

20 Lesons

52 minutes

On-Demand

Free-Video

Responsive Color in CSS - Techniques and Best Practices

Discover responsive color techniques in CSS, from hex values to media queries. Learn to adjust colors for different devices, contexts, and accessibility needs using Sass preprocessor.

Add to list

24 Lesons

46 minutes

On-Demand

Free-Video

Getting Started with CSS Nesting

Learn CSS nesting: syntax, usage, limitations, and best practices. Explore compound selectors, media queries, specificity, and readability considerations for this powerful new feature.

Add to list

15 Lesons

27 minutes

On-Demand

Free-Video

Learn With Jason

Create Cross-Platform Apps with Expo - Learn with Jason

Learn to build iOS, Android, and web apps from a single codebase using Expo. Discover cross-platform development techniques, shared components, and efficient app creation with expert guidance.

Add to list

1 Lesons

1 hour 32 minutes

On-Demand

Free-Video

Simple Snippets

Understanding the Bootstrap Grid System - Part 1

Learn Bootstrap's grid system for responsive web design, including media queries, breakpoints, and container-row-column structure for effective mobile-first layouts.

Add to list

9 Lesons

22 minutes

On-Demand

Free-Video

Container Queries Are Going to Be a Game Changer

Explore the game-changing potential of container queries in CSS, their implementation, and how they revolutionize responsive layout design compared to traditional media queries.

Add to list

9 Lesons

17 minutes

On-Demand

Free-Video

Supercharge Your CSS with Open Props

Explore Open Props to enhance CSS with pre-built custom properties. Learn setup, customization, typography, and responsive design for efficient styling and improved workflow.

Add to list

10 Lesons

20 minutes

On-Demand

Free-Video

Media Queries in CSS - History, Features, and Future

Comprehensive exploration of Media Queries in CSS, covering history, features, APIs, and future developments. Insights on implementation, pitfalls, and emerging trends in responsive design.

Add to list

27 Lesons

48 minutes

On-Demand

Free-Video

Meta Layout: A Closer Look at Media Queries

Exploring media queries for mobile design: syntax, logical expressions, relevant features, and strategies for effective meta-layout implementation in responsive web development.

Add to list

1 Lesons

57 minutes

On-Demand

Free-Video

Media Queries and Container Queries in CSS - A Comprehensive Guide

Explore media and container queries in CSS, learning their differences, use cases, and advanced features like range syntax, container query units, and style queries.

Add to list

16 Lesons

35 minutes

On-Demand

Free-Video

Responsive Layouts Workshop

Master responsive CSS layouts with hands-on practice. Learn techniques for flexible, adaptive designs that work across devices. Enhance your web development skills and create visually appealing, user-friendly websites.

Add to list

1 Lesons

2 hours 54 minutes

On-Demand

Free-Video

Devoxx

Start Using CSS Grid Layout

Learn to create complex, responsive web layouts using CSS Grid's native system. Explore line-based layouts, flexible grids, and box alignment for modern design implementation.

Add to list

16 Lesons

56 minutes

On-Demand

Free-Video

GOTO Conferences

CSS vs. JavaScript, Trust vs. Control

Exploring CSS evolution, capabilities, and its relationship with JavaScript. Highlights CSS features like flexbox, grid, and custom properties, while discussing the balance between trust and control in web development.

Add to list

15 Lesons

50 minutes

On-Demand

Free-Video

React Conferences by GitNation

JavaScript Style Sheets

Explore the benefits and challenges of using JavaScript Style Sheets (JSS) for React applications, comparing it to other CSS solutions and discussing its implementation.

Add to list

31 Lesons

26 minutes

On-Demand

Free-Video

The Mind-Blowing Power of Sass 3.3

Explore advanced Sass 3.3 features for enhanced stylesheet authoring, including Chrome integration, mixin optimization, and media query management techniques.

Add to list

13 Lesons

39 minutes

On-Demand

Free-Video

CSS Levels Up

Exploring CSS past, present, and future: Level 4 specifications, new features, and their impact on web development. Covers selectors, media queries, backgrounds, images, and text improvements.

Add to list

1 Lesons

32 minutes

On-Demand

Free-Video

Responsive Typography Techniques

Explore responsive typography techniques for creating flexible, readable text across devices. Learn practical strategies for scaling, adjusting, and optimizing typography in responsive web design.

Add to list

1 Lesons

37 minutes

On-Demand

Free-Video

Styling and Animating Scalable Vector Graphics with CSS

Learn to style and animate SVGs with CSS for high-quality, resolution-independent graphics. Discover techniques for responsiveness, media queries, and overcoming common challenges in SVG implementation.

Add to list

1 Lesons

29 minutes

On-Demand

Free-Video

The Future of CSS

Explore new CSS layout techniques like Flexbox and Grid, and learn about upcoming features in CSS that will revolutionize web design and simplify complex layouts.

Add to list

23 Lesons

24 minutes

On-Demand

Free-Video

Tonight We're Gonna Code Like It's 1999 - Responsive Emails

Learn responsive email design techniques, from planning to implementation, with tips on tables, inline styles, and media queries for modern, compatible emails across devices.

Add to list

16 Lesons

21 minutes

On-Demand

Free-Video

In The Year 2000 - Designing Responsive Emails

Learn responsive email design techniques for 2016, including reusable templates, media queries, CSS prefixes, and client compatibility. Gain practical insights for creating modern, functional emails across devices.

Add to list

20 Lesons

24 minutes

On-Demand

Free-Video

Get Ready for the Future of CSS

Explore cutting-edge CSS features like custom properties, selectors level 4, and new media queries. Learn about in-browser design capabilities including blend modes and clip-path for enhanced web development.

Add to list

13 Lesons

32 minutes

On-Demand

Free-Video

Very Responsive Typography with Variable Fonts

Explore adaptive typography using variable fonts to enhance web design, performance, and accessibility. Learn creative techniques for responsive and expressive text across devices and environments.

Add to list

42 Lesons

29 minutes

On-Demand

Free-Video

Conf42

Building Responsive Systems for the Future - Quantum Computing 2024

Explore responsive system design principles, from visual hierarchy to mobile-first approaches. Learn modern web development trends and best practices for creating user-centered, future-proof digital experiences.

Add to list

13 Lesons

17 minutes

On-Demand

Free-Video

TheCoderCoder

Stop Using px for Font Size - Accessibility Best Practices

Discover why using px for font-size, width, and height can hinder accessibility. Learn about alternative units like rem and em for responsive, user-friendly web design.

Add to list

6 Lesons

15 minutes

On-Demand

Free-Video

Satish C J

Media Queries in CSS - Demo and Exercise