When you enroll in this course, you'll also be asked to select a specific program.
Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate
There is 1 module in this course
Immerse yourself in the world of web development with our interactive "Build a Responsive Website with HTML and CSS" course. This course offers 33 engaging lessons, perfect for honing your responsive design skills.
Our comprehensive course covers everything you need to know about responsive design. You'll start by understanding the fundamentals and quickly move to practical applications, including flexible containers, media queries, and mobile-first principles. Through hands-on challenges, you'll learn to adapt web layouts for various screen sizes, ensuring a seamless user experience.
By the end, you'll be ready to deploy your site on Netlify, showcasing your newfound expertise.
A comprehensive introduction to responsive web development, covering relative units, media queries, mobile-first principles, and practical techniques for adapting web elements across different screen sizes, and deployment on Netlify.
What's included
1 assignment34 plugins
Show info about module content
1 assignment•Total 30 minutes
Build a Responsive Website Quiz•30 minutes
34 plugins•Total 120 minutes
Welcome to interactive lessons!•1 minute
Module intro•2 minutes
Responsive site intro•2 minutes
Thinking responsively•3 minutes
Aside: Relative units and percentages•5 minutes
Create flexible containers with percentage units•2 minutes
Controlling the width of images•3 minutes
Set width constraints with max-width•5 minutes
Aside: The em unit•8 minutes
Set font sizes with em•3 minutes
Aside: Margin and padding with em•7 minutes
Set margin and padding with em•5 minutes
Aside: The compounding issue with em•5 minutes
Aside: The rem unit•3 minutes
Change font sizes to rem•3 minutes
Text line height•3 minutes
How do you decide which unit to use?•2 minutes
Aside: Media queries•8 minutes
Add media queries to your site•6 minutes
Think “mobile-first”•2 minutes
Mobile-first in action•2 minutes
Common Breakpoints•2 minutes
Add a new breakpoint•3 minutes
Adapt the buttons for smaller screens•3 minutes
Adjust font size for smaller screens•4 minutes
Create a mobile-first navigation•4 minutes
Challenge: Narrow screens•4 minutes
Challenge: Wider screens•1 minute
Solution: Wider screens•3 minutes
The viewport meta tag•4 minutes
Aside: Create a flexbox image grid•6 minutes
Wrap the featured items with flexbox•4 minutes
Recap•1 minute
Deploy your site to Netlify•1 minute
Earn a career certificate
Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.
Instructor
Instructor ratings
Instructor ratings
We asked all learners to give feedback on our instructors based on the quality of their teaching style.
Scrimba is an interactive code-learning platform with over a million users from all over the world. They feature highly interactive and engaging courses about programming and web development.
When will I have access to the lectures and assignments?
To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
What will I get if I subscribe to this Specialization?
When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.
Is financial aid available?
Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.