As a web developer, I’ve always struggled with the mobile responsiveness of my websites. However, I recently came across a detailed CSS3 course by Dave Grey on YouTube that provided me with valuable tips and tricks for creating mobile-responsive websites. One of the hacks I learned was to use border-box,” which simplified web development as a whole. In this blog post, I will share how I created a mobile-responsive website using HTML and CSS.
HTML Boilerplate:
The HTML boilerplate for a mobile-responsive website should start with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="author" content="Nafisa Faruna | website developer" />
<title>Contact Form</title>
<link rel="stylesheet" href="styles.css">
</head>
Body:
The body of the webpage should contain the following code:
<body>
<div class="container">
<div><h1 class="heading">LET US CONVERSE MORE</h1></div>
<div><h2 class="sub-heading">CONTACT ME</h2></div>
<div id="form">
<form class="contact-form">
<div>
<input
class="name-input"
type="text"
placeholder="Enter your name"
required/>
</div>
<div>
<input
placeholder="Enter your email"
type="email"
class="email-input"
required/>
</div>
<div>
<textarea
type="text"
class="message-input"
placeholder="Enter your message"></textarea>
</div>
<div>
<a class="btn" href="mailto:nafisafaruna@gmail.com">
<span><i class="fas fa-leaf"></i></span>
<span class="btn-text">Contact Me</span>
</a>
</div>
</form>
</div>
</div>
</body>
CSS Styling:
To create a mobile responsive website, it's important to use proper CSS styling. Here are some important parts of the CSS code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
The CSS reset code "*{ margin: 0; padding: 0; box-sizing: border-box;}" is used at the beginning of the CSS file to override default styles and provide a clean slate for applying custom styles to HTML elements.
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
scroll-behavior: smooth;
}
The "body" CSS code sets the display property to "flex", which enables the creation of flexible layouts using flexbox. It also aligns the items (child elements) within the body element both vertically and horizontally to the center, and sets the minimum height of the body element to 100vh for a full-height layout. The "scroll-behavior: smooth;" property provides a smooth scrolling experience when navigating within the webpage.
.container {
position: relative;
align-items: center;
justify-content: center;
}
The "container" CSS code sets the position property to "relative", which allows for adjustments of its position relative to its normal position in the document flow. This can be useful for creating responsive layouts based on the screen size or viewport.
Conclusion:
Creating a mobile responsive website is crucial in today's digital landscape. Using the tips and tricks I learned from Dave Grey's CSS3 course, such as using "border-box" and proper CSS styling, I was able to create a mobile responsive website with ease. Following these best practices for mobile responsiveness. Happy coding!