> To carry out a mobile-first design using CSS, follow these steps: - Start with a mobile-first CSS file, which contains styles for the smallest screen sizes first, and then gradually adds styles for larger screen sizes as necessary. - Use responsive units such as em and % instead of fixed units like px to ensure that elements scale properly on different screen sizes. - Use a responsive framework such as Bootstrap or Foundation, which provide pre-built CSS classes and components for creating responsive layouts. - Use CSS media queries to target specific screen sizes and apply custom styles as needed. - Test your design on various devices and screen sizes to ensure that it looks good and functions properly across all platforms. Study the code below to understand how to implement Mobile-first Design. ### HTML code ```html <header> <h1>My Website</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <section> <h2>About Me</h2> <p>Hi, my name is John Doe and i am a web developer.</p> </section> <section> <h2>Recente Work</h2> <div class="work"> <a href="#"><img src="work1.jpg" alt="work 1"></a> <a href="#"><img src="work2.jpg" alt="work 2"></a> <a href="#"><img src="work3.jpg" alt="work 3"></a> </div> </section> </main> <footer> <p>Copyrights @ 2024 My Website. All Rights Reserved.</p> </footer> ``` Afterward, create a CSS external file and link it to your html file and include the code below. Ensure to use information suitable to the project you are working on. ### CSS code ```css *{ box-sizing: boder-box; } body { font-family: Arial, sans-serif; font-size: 16px; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: wrap; } nav li { margin: 0 10px; } nav a { color: #fff; text-decoration: none; } main { padding: 20px; } section { margin-bottom: 20px; } section h2 { font-size: 24px; margin-bottom: 10px; } section p { font-size: 16px; line-height: 1.5; } .work { display: flex; flex-direction: wrap; } .work a { flex: 1 1 300px; margin: 10px; } @media screen and(min-width: 768px) { header { display: flex; justify-content: space-between; align-items: center; } nav { flex: 1; } main { display: flex; flex-wrap: wrap; } section { flex: 1; margin: 0 10px; } work a { margin: 10px 0; } } ``` This code includes a simple header, navigation, main content with two sections, and a footer. The CSS includes styles for mobile devices with a small screen width of fewer than 768 pixels, as well as larger screen sizes with a media query. When the screen width is at least 768 pixels, the header, and main content are displayed using a flexbox layout. Make a copy and paste to see what the result was. Let us know in the comments 👇 how it turned out.