Hands-on Responsive Web Design 1: Media Queries & CSS Preprocessing from Pluralsight

Responsive, mobile first web design is a skill required for web developer's in today's mobile world. This course, you'll learn how to build a responsive template using SASS and a CSS preprocessor that you'll use in your next web development project. Software required: Brackets.

At the heart of developing any responsive website is a thorough knowledge of how to use HTML5, CSS3, and SASS. In this course, Responsive Web Design 1: Media Queries and CSS Preprocessing, you'll learn the skills you need to create a mobile first, responsive web page template that can be used as a basis for an entire site or even a CMS. First, you'll learn the appropriate way to organize your SCSS partial files and how to reassemble them while including media queries. Next, you'll discover how to use variables and math operations to quickly create standard CSS. Finally, you'll cover html semantics and way-finding so that your websites are attractive as well as functional. When you're finished with this course, you'll have built a responsive template, which is ready to be used as you create your own personal or commercial websites. Software required: Brackets.

What's inside

Syllabus

Course Overview

Introduction

Building the Start File

HTML Semantic Markup

CSS Preprocessor Setup

Auto Dealer Page Structure

Auto Dealer Page Content

Modify the Design and Testing

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Develops the skills of an in-demand web developer in today's landscape

Teaches skills which can be applied to commercial web development projects

Taught by an experienced industry professional, who is recognized for their work in web development

Requires software, Brackets, which is freely available

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Hands-on Responsive Web Design 1: Media Queries & CSS Preprocessing with these activities:

Identify a SASS Mentor

Show steps

Accelerate your learning by connecting with an experienced SASS professional who can provide guidance and support.

Browse courses on Sass

Show steps

Attend SASS meetups or online events
Reach out to SASS experts on social media or online forums
Inquire about their willingness to mentor you

Compile a List of SASS Resources

Show steps

Build your knowledge base by gathering and organizing valuable resources on SASS.

Browse courses on Sass

Show steps

Search for online tutorials, articles, and documentation on SASS
Bookmark or save the resources you find
Create a document or spreadsheet to organize the resources

Follow a SASS Tutorial

Show steps

Enhance your SASS skills by following step-by-step tutorials that guide you through specific techniques.

Browse courses on Sass

Show steps

Find a reputable SASS tutorial online or in a book
Follow the tutorial instructions carefully
Practice the concepts you learn in the tutorial

Four other activities

Expand to see all activities and additional details

Show all seven activities

Practice Writing SASS

Show steps

Reinforce your understanding of SASS syntax and functionality through repetitive exercises.

Browse courses on Sass

Show steps

Create a new SASS file
Write SASS code to style basic HTML elements
Use variables and mixins to improve code reusability
Test your SASS code in a web browser

Join a SASS Study Group

Show steps

Enhance your learning by collaborating with peers, sharing knowledge, and providing feedback.

Browse courses on Sass

Show steps

Find or create a study group with other SASS learners
Set regular meeting times
Discuss SASS concepts, techniques, and projects

Build a Sample Responsive Website

Show steps

Apply your SASS and responsive design skills by creating a functional website that adapts to different screen sizes.

Browse courses on Responsive Web Design

Show steps

Plan the structure and layout of your website
Write HTML and SASS code to create the website
Test the website on various devices and browsers
Make adjustments to improve the website's responsiveness

Design a Responsive Email Template

Show steps

Expand your skills by designing an email template that displays correctly on multiple devices.

Browse courses on Email Marketing

Show steps

Choose an email marketing platform
Create a new email template
Design the template using HTML and SASS
Test the template on different email clients

Career center

Learners who complete Hands-on Responsive Web Design 1: Media Queries & CSS Preprocessing will develop knowledge and skills that may be useful to these careers:

UX Designer

**UX Designers** are responsible for the user experience of a website. They work with UI Designers and Front-End Developers to create websites that are both visually appealing and functional. This course will teach you the skills you need to become a UX Designer, including how to use HTML5, CSS3, and SASS. You'll also learn how to use media queries to create responsive web pages that look great on all devices.

See salaries and explore the career path for UX Designer

Web Developer

**Web Developers** are responsible for building and maintaining websites. They use HTML, CSS, and JavaScript to create web pages that are both visually appealing and functional. This course will teach you the skills you need to become a Web Developer, including how to use HTML5, CSS3, and SASS. You'll also learn how to use media queries to create responsive web pages that look great on all devices.

See salaries and explore the career path for Web Developer

Front-End Developer

**Front-End Developers** are responsible for the design and implementation of the user interface of a website. They use HTML, CSS, and JavaScript to create web pages that are both visually appealing and functional. This course will teach you the skills you need to become a Front-End Developer, including how to use HTML5, CSS3, and SASS. You'll also learn how to use media queries to create responsive web pages that look great on all devices.

See salaries and explore the career path for Front-End Developer

Mobile App Developer

**Mobile App Developers** are responsible for designing and developing mobile applications. They use a variety of programming languages and tools to create apps that are both visually appealing and functional. This course will teach you the skills you need to become a Mobile App Developer, including how to use HTML5, CSS3, and SASS. You'll also learn how to use media queries to create responsive web pages that look great on all devices.

See salaries and explore the career path for Mobile App Developer

UI Designer

**UI Designers** are responsible for the design of the user interface of a website. They work with Front-End Developers to implement the design into code. This course will teach you the skills you need to become a UI Designer, including how to use HTML5, CSS3, and SASS. You'll also learn how to use media queries to create responsive web pages that look great on all devices.

See salaries and explore the career path for UI Designer

Webmaster

**Webmasters** are responsible for the overall management of a website. They work with Web Developers, Front-End Developers, UI Designers, and UX Designers to ensure that the website is running smoothly and efficiently. This course will teach you the skills you need to become a Webmaster, including how to use HTML5, CSS3, and SASS. You'll also learn how to use media queries to create responsive web pages that look great on all devices.

See salaries and explore the career path for Webmaster

Computer Programmer

**Computer Programmers** are responsible for writing and maintaining computer code. They use a variety of programming languages and tools to create software that is both efficient and reliable. This course will teach you the skills you need to become a Computer Programmer, including how to use HTML5, CSS3, and SASS. You'll also learn how to use media queries to create responsive web pages that look great on all devices.

See salaries and explore the career path for Computer Programmer

Software Engineer

**Software Engineers** are responsible for designing, developing, and maintaining software applications. They use a variety of programming languages and tools to create software that is both efficient and reliable. This course will teach you the skills you need to become a Software Engineer, including how to use HTML5, CSS3, and SASS. You'll also learn how to use media queries to create responsive web pages that look great on all devices.

See salaries and explore the career path for Software Engineer

Information Systems Manager

**Information Systems Managers** are responsible for planning, implementing, and managing information systems. They work with a variety of stakeholders to ensure that the organization's information systems are aligned with its business goals. This course will teach you the skills you need to become an Information Systems Manager, including how to use HTML5, CSS3, and SASS. You'll also learn how to use media queries to create responsive web pages that look great on all devices.

See salaries and explore the career path for Information Systems Manager

Business Analyst

**Business Analysts** are responsible for analyzing business needs and developing solutions to improve business processes. They work with a variety of stakeholders to ensure that the solutions are aligned with the organization's business goals. This course will teach you the skills you need to become a Business Analyst, including how to use HTML5, CSS3, and SASS. You'll also learn how to use media queries to create responsive web pages that look great on all devices.

See salaries and explore the career path for Business Analyst

Database Administrator

**Database Administrators** are responsible for managing and maintaining databases. They work with a variety of database technologies to ensure that the data is secure and accessible. This course will teach you the skills you need to become a Database Administrator, including how to use HTML5, CSS3, and SASS. You'll also learn how to use media queries to create responsive web pages that look great on all devices.

See salaries and explore the career path for Database Administrator

Network Administrator

**Network Administrators** are responsible for managing and maintaining computer networks. They work with a variety of network technologies to ensure that the network is secure and reliable. This course will teach you the skills you need to become a Network Administrator, including how to use HTML5, CSS3, and SASS. You'll also learn how to use media queries to create responsive web pages that look great on all devices.

See salaries and explore the career path for Network Administrator

Technical Writer

**Technical Writers** are responsible for writing and maintaining technical documentation. They work with a variety of stakeholders to ensure that the documentation is clear and concise. This course will teach you the skills you need to become a Technical Writer, including how to use HTML5, CSS3, and SASS. You'll also learn how to use media queries to create responsive web pages that look great on all devices.

See salaries and explore the career path for Technical Writer

Quality Assurance Analyst

**Quality Assurance Analysts** are responsible for testing software to ensure that it is free of defects. They work with a variety of stakeholders to ensure that the software meets the required quality standards. This course will teach you the skills you need to become a Quality Assurance Analyst, including how to use HTML5, CSS3, and SASS. You'll also learn how to use media queries to create responsive web pages that look great on all devices.

See salaries and explore the career path for Quality Assurance Analyst

Project Manager

**Project Managers** are responsible for planning, executing, and closing projects. They work with a variety of stakeholders to ensure that the project is completed on time, within budget, and to the required quality. This course will teach you the skills you need to become a Project Manager, including how to use HTML5, CSS3, and SASS. You'll also learn how to use media queries to create responsive web pages that look great on all devices.

See salaries and explore the career path for Project Manager