jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-25 23:02:05 -04:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): added interactive examples to 'What Is the Mobile First Approach in Responsive Web Design' lesson (#63129)

Browse Source
This commit is contained in:
Kannan
2025-10-28 15:43:37 +05:30
committed by GitHub
parent ac345ad543
commit e630647ee0
1 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
curriculum/challenges/english/blocks/lecture-best-practices-for-responsive-web-design/672cf06c8f46f9eb04db9832.md
View File

@@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-is-the-mobile-first-approach-in-responsive-web-design
---
# --description--
# --interactive--
The mobile-first approach is a design philosophy and development strategy in responsive web design that prioritizes creating websites for mobile devices before designing for larger screens. This approach has gained significant traction in recent years, becoming a cornerstone of modern web development practices.
@@ -25,12 +25,18 @@ Designers must make critical decisions about what content is absolutely essentia
Implementing a mobile-first approach typically involves using CSS media queries to progressively enhance the design for larger screens. Here's an example of how this might look in practice:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<div class="container">
<h1>Responsive Design</h1>
<p>This is a simple example of responsive design using media queries.</p>
</div>
```
```css
/* Base styles for mobile */
body {
font-size: 16px;
}
.container {
width: 100%;
padding: 10px;
@@ -39,7 +45,7 @@ body {
/* Styles for larger screens */
@media screen and (min-width: 768px) {
body {
font-size: 18px;
font-size: 1.2rem;
}
.container {
@@ -56,6 +62,8 @@ body {
}
```
:::
In this example, we start with base styles suitable for mobile devices. We then use media queries with `min-width` to add or modify styles for larger screens. This exemplifies the essence of mobile-first design in CSS: beginning with styles for the smallest screens and then progressively enhancing for larger ones.
The mobile-first approach also aligns well with search engine optimization (SEO) strategies. Google, for instance, uses mobile-first indexing, meaning it predominantly uses the mobile version of the content for indexing and ranking.