Let's dive into the creation of a frontend project that incorporates all the vital elements including navigation bar, modals, dropdowns, and responsiveness using HTML and CSS. The rationale behind every step will also be detailed to offer a deep understanding of the entire process.
Frontend Development Exercise: Building a Responsive Website with Advanced UI Elements
Pre-requisites:
- Basic understanding of HTML and CSS.
- A code editor like Visual Studio Code, Sublime Text, or any other of your choice.
- A modern web browser for testing.
Step 1: Project Setup
- Action: Create a new folder to house your project files. Within this folder, create subfolders named
css and images. Also, create index.html and style.css files.
Step 2: Structuring the HTML Document
-
Action: In your index.html file, set up a basic HTML structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Responsive Website</title>
</head>
<body>
<!-- We'll add content here -->
</body>
</html>
-
Rationale: We have linked our CSS file and set up a viewport meta tag to ensure our website is scalable and responsive on all devices.
Step 3: Creating a Navbar
In the <body> tag, we will create a navigation bar.
-
Action: Add the following HTML code to create a navbar with dropdowns.
<nav>
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li class="dropdown">
<a href="#services" class="dropbtn">Services</a>
<div class="dropdown-content">
<a href="#service1">Service 1</a>
<a href="#service2">Service 2</a>
</div>
</li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
-
Rationale: We have created a simple navigation bar with a dropdown menu to showcase different services. This helps in categorizing the content and offering a neat layout.
Step 4: Adding Modals
We will add a modal that will pop up when a button is clicked.
-
Action: Add a button and a modal section in your HTML as shown below.
<button id="modalBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
-
Rationale: Modals are used to display additional information without needing to reload the page. It helps in maintaining the aesthetic of the page while offering more content.
Step 5: Styling the UI Elements
Now, we'll style our navbar, dropdown, and modal using CSS.
-
Action: Add the following CSS in your style.css file to style the navbar and dropdown.
body {
font-family: 'Arial, sans-serif';
}
.navbar {
overflow: hidden;
background-color: #333;
display: flex;
justify-content: space-around;
}
.navbar a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
-
Rationale: The CSS above styles the navigation bar and the dropdown menu to make them visually appealing and functional. The :hover pseudo-class is used to show the dropdown content when the user hovers over the dropdown button.
-
Action: Next, style the modal using the following CSS code.
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height:
100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
- **Rationale**: The modal is initially hidden (`display: none`). When triggered, it will cover the entire screen (`width: 100%; height: 100%;`) and blur out the rest of the page with a semi-transparent black background (`background-color: rgba(0,0,0,0.4)`).
#### Step 6: Making it Responsive
One of the critical aspects of modern web design is ensuring your website is accessible and usable on all devices, especially mobile.
- **Action**: Add the following CSS to make the navbar responsive.
```css
@media screen and (max-width: 600px) {
.navbar a, .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
- Rationale: The
@media query ensures that on screens with a width of 600px or less, the navbar items stack on top of each other and take the full width of the screen. This adjustment ensures better visibility and interaction on smaller devices.
Step 7: Adding Interactivity using JavaScript
The final step involves using JavaScript to make the modal work.
-
Action: Add the following script at the bottom of your index.html.
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("modalBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
-
Rationale: The script allows you to open the modal when you click the button and close it either by clicking the 'x' or clicking outside the modal. This provides a user-friendly experience.
Conclusion:
This exercise walked you through building a responsive website frontend using only HTML and CSS with advanced features like a navbar, dropdowns, and modals. The rationale behind each step helps to understand the decision-making process, ensuring the design is both visually appealing and functional across different devices.
Originally posted by @akash-coded in #195
Let's dive into the creation of a frontend project that incorporates all the vital elements including navigation bar, modals, dropdowns, and responsiveness using HTML and CSS. The rationale behind every step will also be detailed to offer a deep understanding of the entire process.
Frontend Development Exercise: Building a Responsive Website with Advanced UI Elements
Pre-requisites:
Step 1: Project Setup
cssandimages. Also, createindex.htmlandstyle.cssfiles.Step 2: Structuring the HTML Document
Action: In your
index.htmlfile, set up a basic HTML structure.Rationale: We have linked our CSS file and set up a viewport meta tag to ensure our website is scalable and responsive on all devices.
Step 3: Creating a Navbar
In the
<body>tag, we will create a navigation bar.Action: Add the following HTML code to create a navbar with dropdowns.
Rationale: We have created a simple navigation bar with a dropdown menu to showcase different services. This helps in categorizing the content and offering a neat layout.
Step 4: Adding Modals
We will add a modal that will pop up when a button is clicked.
Action: Add a button and a modal section in your HTML as shown below.
Rationale: Modals are used to display additional information without needing to reload the page. It helps in maintaining the aesthetic of the page while offering more content.
Step 5: Styling the UI Elements
Now, we'll style our navbar, dropdown, and modal using CSS.
Action: Add the following CSS in your
style.cssfile to style the navbar and dropdown.Rationale: The CSS above styles the navigation bar and the dropdown menu to make them visually appealing and functional. The
:hoverpseudo-class is used to show the dropdown content when the user hovers over the dropdown button.Action: Next, style the modal using the following CSS code.
100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
@mediaquery ensures that on screens with a width of 600px or less, the navbar items stack on top of each other and take the full width of the screen. This adjustment ensures better visibility and interaction on smaller devices.Step 7: Adding Interactivity using JavaScript
The final step involves using JavaScript to make the modal work.
Action: Add the following script at the bottom of your
index.html.Rationale: The script allows you to open the modal when you click the button and close it either by clicking the 'x' or clicking outside the modal. This provides a user-friendly experience.
Conclusion:
This exercise walked you through building a responsive website frontend using only HTML and CSS with advanced features like a navbar, dropdowns, and modals. The rationale behind each step helps to understand the decision-making process, ensuring the design is both visually appealing and functional across different devices.
Originally posted by @akash-coded in #195