Module 1 · The browser: HTML and CSS Lesson 3 of 15
Mobile-first and the viewport
Most Indian traffic is a phone, so the phone is the design, not the fallback. Start there, then add width.
The concept
Mobile-first means you write the phone layout first and add complexity at wider widths, instead of designing a desktop page and shrinking it. Almost every fresher-portfolio visitor is on a phone, and a page that starts narrow cannot be broken by a narrow screen.
Two lines make it real. In the head: <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> — without it a phone pretends to be a 980px desktop and zooms out. Then in CSS, write your base rules for small screens and add @media (min-width: 720px) { … } for larger ones, never the reverse.
/* The base rules ARE the phone. Wider screens are the addition. */
.card { padding: 14px; font-size: 15px; }
@media (min-width: 720px) {
.card { padding: 22px; font-size: 16px; }
}Common mistakes
The mistake is position: fixed or width: 1200px in the base rules, which produces horizontal scrolling on a phone. Check every page at 360px before you call it finished: a single long word or one wide image is enough to make the whole page slide sideways.
Worked example
Writing base styles for a 390px screen and adding one @media (min-width: 783px) block afterwards produces a better result than shrinking a desktop layout later.
Your practice task
Rebuild one page of your own starting at 390px, and check it at 320px, 390px and 1440px before adding anything.
Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.
Key takeaway
Mobile-first means you write the phone layout first and add complexity at wider widths, instead of designing a desktop page and shrinking it.
Keep your place in this course
A free account saves which lessons you have finished and unlocks the certificate. The lesson itself stays free to read.
Create free account or sign inCourse complete
You finished every lesson.
Your certificate is ready, and the projects you built are the proof to attach to an application.
Almost there
15 lessons left of 15
Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.