SECTION 3: JAVASCRIPT FOR WEB3 FRONTEND DEVELOPMENT
Best Practices in CSS and Responsive Web Design
Introduction:
In this lesson, we will focus on the meticulous world of CSS best practices and the sophistication of responsive web design.
As the digital landscape evolves, so too must our approaches to crafting user interfaces, particularly in the dynamic area of Web3 frontend development.
Remember, watching the lesson video will offer a deeper understanding of this topic.
Learning Objectives:
By the end of this lesson, you will be able to:
- Implement CSS best practices to maintain clean, efficient, and scalable code.
- Understand advanced strategies in responsive web design to ensure your dApps adapt across different devices seamlessly.
- Optimize the user experience of the Token Minter dApp with responsive design techniques.
Lesson Video:
What Is CSS Best Practices?
Best practices in CSS are guidelines that help you write CSS that is maintainable and scalable.
They include organization techniques, such as using:
- Comments,
- Maintaining a logical order and
- Utilizing CSS variables for color schemes and font stacks.
Responsive Web Design Strategies:
Responsive web design is not just about adjusting screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design.
CSS3 offers a suite of tools including flexbox, grid layouts, and media queries that aid in crafting designs that respond to the user’s behavior and environment.
Implementing CSS Best Practices:
Let’s refine our Token Minter dApp with best practices and responsive design.
A clean codebase is just as important as a responsive interface, both contribute to a professional and user-friendly dApp.
Example Codes for Practical Application:
Expanding the Capstone Project
Expanding on our Token Minter dApp, let’s enhance its features using what you learned from this lesson.
Existing Capstone Project Code from Previous Lesson:
CSS Code:
/* External CSS */
/* IMPORTS */
/* Importing a custom Google font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/* BODY */
/* Basic styling for the body */
body {
font-family: 'Roboto', sans-serif; /* Applying the imported font family to the body */
background-color: #f4f4f4;
background: linear-gradient(to right, #630404, #e040fb, #6a027c); /* Darker brown to lighter purple gradient background */
}
/* NAVIGATION */
/* Styling navigation menu using child combinator */
nav > ul > li {
display: inline;
margin-right: 20px;
text-align: center; /* Aligns text to the center */
/* Flex item styling for responsive nav items */
padding: 10px;
flex: 1; /* Allows each item to grow */
}
/* Pseudo-classes for interactive navigation links: Styling the navigation menu with a hover effect */
nav a:hover, nav a:focus {
background-color: #630404; /* Light background on hover */
color: #f3e40d; /* Dark text on hover */
}
/* HYPERLINKS */
/* Styling links using attribute selector */
a[href^="#"] {
text-decoration: none;
color: white;
}
/* HEADINGS */
/* Styling for the header using element selector */
header {
background: #333;
color: white;
padding: 10px;
text-align: center;
/* Flex container for the header to space out elements */
display: flex;
justify-content: space-between; /* Distributes space between items */
align-items: center; /* Aligns items vertically */
padding: 0 10px;
}
/* Styling headings for emphasis */
h1 {
font-weight: 700; /* Makes the font bold */
position: relative; /* This will allow absolute positioning of the pseudo-element relative to the h1 */
}
/* Pseudo-element for the subtitle */
h1::after {
content: '...the future of token minting'; /* This is the subtitle */
display: block;
text-align: center;
color: #aaa; /* Lighter text color for the subheading */
position: absolute; /* Position the subtitle absolutely */
width: 100%; /* Let the subtitle span the entire width of the h1 */
left: 0; /* Align left edge with the h1 */
top: 100%; /* Position it just below the h1 */
font-size: 0.55em; /* Adjust the font size as needed */
}
/* Styling headings for emphasis */
h1, h2, h3 {
font-weight: 700; /* Makes the font bold */
}
/* Styling paragraph using adjacent sibling combinator */
h2 + p {
color: #cfbdbd;
}
/* MAIN */
/* Styling for the main content area */
/* main {
margin: 20px;
border: 2px solid #333;
padding: 10px;
display: grid;
grid-template-columns: 2fr 3fr; One column for the aside, three for the main content
gap: 20px; Space between grid items
} */
/* Flex container for main content area */
main {
display: flex;
flex-direction: row; /* Stacks items vertically */
gap: 10px; /* Creates space between flex items */
}
/* ARTICLE */
/* Styling for the article */
article {
margin-bottom: 15px;
padding: 10px;
border: 1px solid grey;
/* Flex item adjustments for articles within main */
flex: 1; /* Allows the article to grow and fill the space */
}
/* Applying Box Model to the paragraph */
article p {
margin-bottom: 20px;
border: 1px solid grey;
padding: 15px;
}
/* IDs */
/* Targeting specific section with ID selector */
#mint {
background-color: #eaeaea;
padding: 15px;
margin-top: 10px;
}
/* Styling for the form inside the mint section */
#mint form {
padding: 10px;
border: 1px solid #ddd;
margin-top: 10px;
}
/* Flex container for the form inside mint section */
#mint form {
display: flex;
flex-direction: column; /* Stacks form items vertically */
gap: 10px; /* Creates space between form items */
}
/* Styling for input and button elements */
#mint input,
#mint button {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
flex: 1; /* Allows inputs and button to grow */
}
/* PARAGRAPH */
/* Adjusting paragraph line spacing for readability */
p {
line-height: 3.5; /* Sets the space between lines */
}
/* MEDIA QUERY */
/* Media query for tablet devices */
@media (min-width: 768px) and (max-width: 1024px) {
body {
background: linear-gradient(to right, #6a027c, #630404); /* Adjust the gradient for medium screens */
}
main {
flex-direction: row; /* Aligns main content and aside side by side */
}
}
/* Media query for mobile devices */
@media (max-width: 767px) {
nav ul {
flex-direction: column; /* Stacks nav items vertically */
}
.button {
padding: 15px; /* Larger padding for touch targets */
}
}
/* ANIMATION AND TRANSITION */
/* Keyframes for button animation */
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* Button animation using keyframes */
.button {
animation: pulse 2s infinite;
}
/* Transition for link color change */
a {
transition: color 0.5s ease;
}
a:hover {
color: #f5f121;
}
/* Media query for responsive layout */
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
/* Pseudo-class for input validation */
input:invalid {
border-color: red;
}
/* Pseudo-element for placeholder styling */
::placeholder {
color: #888;
opacity: 1; /* Firefox */
}
HTML Code:
<!DOCTYPE html> <!-- Defines document type and HTML version -->
<html lang="en"> <!-- Sets the language of the page -->
<head>
<meta charset="UTF-8"> <!-- Sets character encoding for the document -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensures proper rendering on mobile devices -->
<title>Token Minter dApp</title> <!-- Title of the webpage -->
<link rel="stylesheet" href="/globalstyles.css"> <!-- Link to external CSS file -->
</head>
<body>
<header>
<!-- Site header with navigation -->
<h1>Token Minter dApp</h1>
<nav>
<!-- Navigation links -->
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#mint">Mint Tokens</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<!-- Main content section -->
<article id="home">
<!-- Introduction article -->
<h2>Introduction to Token Minting</h2>
<p>This dApp allows users to mint their own tokens on the blockchain.</p>
</article>
<section id="mint">
<!-- Token minting form section -->
<h2>Mint Your Tokens</h2>
<form action="#">
<!-- Form for token minting -->
<input type="email" placeholder="Enter your email">
<input type="number" placeholder="Token amount">
<button class="button" type="submit">Mint</button>
</form>
</section>
<aside>
<!-- Sidebar with additional information -->
<h3>Learn More:</h3>
<p>Explore more about blockchain technology.</p>
</aside>
</main>
<footer>
<!-- Footer with contact information -->
<p>Contact us at <a href="mailto:hello@dProgrammingUniversity.com">hello@dProgrammingUniversity.com</a></p>
</footer>
</body>
</html>
AI Rewrites the CSS:
I sent the following prompt to dPU-Web3DevGPT to readjust to align with CSS best practices as discussed in this lesson:
Based on this current lesson below. Adjust the CSS to implement best practices wherever its need to like introducing variables.
NOTE: Ensure you maintain the existing commenting styles and comment with order of arrangement while adding or adjusting for missing CSS best practice in the code below (Only send codes not lesson content again):
Lesson: Best Practices in CSS and Responsive Web Design
Introduction:
In this lesson, we will focus on the meticulous world of CSS best practices and the sophistication of responsive web design.
As the digital landscape evolves, so too must our approaches to crafting user interfaces, particularly in the dynamic area of Web3 frontend development.
Remember, watching the lesson video will offer a deeper understanding of this topic.
Learning Objectives:
By the end of this lesson, you will be able to:
Implement CSS best practices to maintain clean, efficient, and scalable code.
Understand advanced strategies in responsive web design to ensure your dApps adapt across different devices seamlessly.
Optimize the user experience of the Token Minter dApp with responsive design techniques.
Lesson Video:
Very sorry this lesson video is not available now
Kindly check back in 24 hours.
What Is CSS Best Practices?
Best practices in CSS are guidelines that help you write CSS that is maintainable and scalable.
They include organization techniques, such as using:
Comments,
Maintaining a logical order and
Utilizing CSS variables for color schemes and font stacks.
Responsive Web Design Strategies:
Responsive web design is not just about adjusting screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design.
CSS3 offers a suite of tools including flexbox, grid layouts, and media queries that aid in crafting designs that respond to the user’s behavior and environment.
Implementing CSS Best Practices:
Let’s refine our Token Minter dApp with best practices and responsive design.
A clean codebase is just as important as a responsive interface, both contribute to a professional and user-friendly dApp.
CSS code:
/* External CSS */
/* IMPORTS */
/* Importing a custom Google font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/* BODY */
/* Basic styling for the body */
body {
font-family: 'Roboto', sans-serif; /* Applying the imported font family to the body */
background-color: #f4f4f4;
background: linear-gradient(to right, #630404, #e040fb, #6a027c); /* Darker brown to lighter purple gradient background */
}
/* NAVIGATION */
/* Styling navigation menu using child combinator */
nav > ul > li {
display: inline;
margin-right: 20px;
text-align: center; /* Aligns text to the center */
/* Flex item styling for responsive nav items */
padding: 10px;
flex: 1; /* Allows each item to grow */
}
/* Pseudo-classes for interactive navigation links: Styling the navigation menu with a hover effect */
nav a:hover, nav a:focus {
background-color: #630404; /* Light background on hover */
color: #f3e40d; /* Dark text on hover */
}
/* HYPERLINKS */
/* Styling links using attribute selector */
a[href^="#"] {
text-decoration: none;
color: white;
}
/* HEADINGS */
/* Styling for the header using element selector */
header {
background: #333;
color: white;
padding: 10px;
text-align: center;
/* Flex container for the header to space out elements */
display: flex;
justify-content: space-between; /* Distributes space between items */
align-items: center; /* Aligns items vertically */
padding: 0 10px;
}
/* Styling headings for emphasis */
h1 {
font-weight: 700; /* Makes the font bold */
position: relative; /* This will allow absolute positioning of the pseudo-element relative to the h1 */
}
/* Pseudo-element for the subtitle */
h1::after {
content: '...the future of token minting'; /* This is the subtitle */
display: block;
text-align: center;
color: #aaa; /* Lighter text color for the subheading */
position: absolute; /* Position the subtitle absolutely */
width: 100%; /* Let the subtitle span the entire width of the h1 */
left: 0; /* Align left edge with the h1 */
top: 100%; /* Position it just below the h1 */
font-size: 0.55em; /* Adjust the font size as needed */
}
/* Styling headings for emphasis */
h1, h2, h3 {
font-weight: 700; /* Makes the font bold */
}
/* Styling paragraph using adjacent sibling combinator */
h2 + p {
color: #cfbdbd;
}
/* MAIN */
/* Styling for the main content area */
/* main {
margin: 20px;
border: 2px solid #333;
padding: 10px;
display: grid;
grid-template-columns: 2fr 3fr; One column for the aside, three for the main content
gap: 20px; Space between grid items
} */
/* Flex container for main content area */
main {
display: flex;
flex-direction: row; /* Stacks items vertically */
gap: 10px; /* Creates space between flex items */
}
/* ARTICLE */
/* Styling for the article */
article {
margin-bottom: 15px;
padding: 10px;
border: 1px solid grey;
/* Flex item adjustments for articles within main */
flex: 1; /* Allows the article to grow and fill the space */
}
/* Applying Box Model to the paragraph */
article p {
margin-bottom: 20px;
border: 1px solid grey;
padding: 15px;
}
/* IDs */
/* Targeting specific section with ID selector */
#mint {
background-color: #eaeaea;
padding: 15px;
margin-top: 10px;
}
/* Styling for the form inside the mint section */
#mint form {
padding: 10px;
border: 1px solid #ddd;
margin-top: 10px;
}
/* Flex container for the form inside mint section */
#mint form {
display: flex;
flex-direction: column; /* Stacks form items vertically */
gap: 10px; /* Creates space between form items */
}
/* Styling for input and button elements */
#mint input,
#mint button {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
flex: 1; /* Allows inputs and button to grow */
}
/* PARAGRAPH */
/* Adjusting paragraph line spacing for readability */
p {
line-height: 3.5; /* Sets the space between lines */
}
/* MEDIA QUERY */
/* Media query for tablet devices */
@media (min-width: 768px) and (max-width: 1024px) {
body {
background: linear-gradient(to right, #6a027c, #630404); /* Adjust the gradient for medium screens */
}
main {
flex-direction: row; /* Aligns main content and aside side by side */
}
}
/* Media query for mobile devices */
@media (max-width: 767px) {
nav ul {
flex-direction: column; /* Stacks nav items vertically */
}
.button {
padding: 15px; /* Larger padding for touch targets */
}
}
/* ANIMATION AND TRANSITION */
/* Keyframes for button animation */
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* Button animation using keyframes */
.button {
animation: pulse 2s infinite;
}
/* Transition for link color change */
a {
transition: color 0.5s ease;
}
a:hover {
color: #f5f121;
}
/* Media query for responsive layout */
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
/* Pseudo-class for input validation */
input:invalid {
border-color: red;
}
/* Pseudo-element for placeholder styling */
::placeholder {
color: #888;
opacity: 1; /* Firefox */
}
HTML Code:
<!DOCTYPE html> <!-- Defines document type and HTML version -->
<html lang="en"> <!-- Sets the language of the page -->
<head>
<meta charset="UTF-8"> <!-- Sets character encoding for the document -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensures proper rendering on mobile devices -->
<title>Token Minter dApp</title> <!-- Title of the webpage -->
<link rel="stylesheet" href="/globalstyles.css"> <!-- Link to external CSS file -->
</head>
<body>
<header>
<!-- Site header with navigation -->
<h1>Token Minter dApp</h1>
<nav>
<!-- Navigation links -->
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#mint">Mint Tokens</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<!-- Main content section -->
<article id="home">
<!-- Introduction article -->
<h2>Introduction to Token Minting</h2>
<p>This dApp allows users to mint their own tokens on the blockchain.</p>
</article>
<section id="mint">
<!-- Token minting form section -->
<h2>Mint Your Tokens</h2>
<form action="#">
<!-- Form for token minting -->
<input type="email" placeholder="Enter your email">
<input type="number" placeholder="Token amount">
<button class="button" type="submit">Mint</button>
</form>
</section>
<aside>
<!-- Sidebar with additional information -->
<h3>Learn More:</h3>
<p>Explore more about blockchain technology.</p>
</aside>
</main>
<footer>
<!-- Footer with contact information -->
<p>Contact us at <a href="mailto:hello@dProgrammingUniversity.com">hello@dProgrammingUniversity.com</a></p>
</footer>
</body>
</html>
Then I got the CSS code below from the AI for use. Give it a try too:
Enhance the Capstone Project with New Features from this Lesson:
CSS Code:
/* External CSS */
/* IMPORTS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/* CSS Variables for consistent theming and easy maintenance */
:root {
--font-family: 'Roboto', sans-serif;
--bg-color: #f4f4f4;
--bg-gradient: linear-gradient(to right, #630404, #e040fb, #6a027c);
--nav-hover-bg-color: #630404;
--nav-hover-text-color: #f3e40d;
--text-color-white: #ffffff;
--header-bg-color: #333;
--header-text-color: white;
--subtitle-text-color: #aaa;
--paragraph-color: #cfbdbd;
--main-border-color: #333;
--article-border-color: grey;
--form-border-color: #ddd;
--input-border-color: #ccc;
--button-hover-color: #f5f121;
--invalid-input-border-color: red;
--placeholder-color: #888;
}
/* BODY */
body {
font-family: var(--font-family);
background-color: var(--bg-color);
background: var(--bg-gradient);
}
/* NAVIGATION */
nav > ul > li {
display: inline;
margin-right: 20px;
text-align: center;
padding: 10px;
flex: 1;
}
nav a:hover, nav a:focus {
background-color: var(--nav-hover-bg-color);
color: var(--nav-hover-text-color);
}
/* HYPERLINKS */
a[href^="#"] {
text-decoration: none;
color: var(--text-color-white);
}
/* HEADINGS */
header {
background: var(--header-bg-color);
color: var(--header-text-color);
padding: 10px;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
}
h1 {
font-weight: 700;
position: relative;
}
h1::after {
content: '...the future of token minting';
display: block;
text-align: center;
color: var(--subtitle-text-color);
position: absolute;
width: 100%;
left: 0;
top: 100%;
font-size: 0.55em;
}
h1, h2, h3 {
font-weight: 700;
}
h2 + p {
color: var(--paragraph-color);
}
/* MAIN */
main {
display: flex;
flex-direction: row;
gap: 10px;
}
/* ARTICLE */
article {
margin-bottom: 15px;
padding: 10px;
border: 1px solid var(--article-border-color);
flex: 1;
}
article p {
margin-bottom: 20px;
border: 1px solid var(--article-border-color);
padding: 15px;
}
/* IDs */
#mint {
background-color: #eaeaea;
padding: 15px;
margin-top: 10px;
}
#mint form {
padding: 10px;
border: 1px solid var(--form-border-color);
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
#mint input,
#mint button {
padding: 10px;
margin-bottom: 10px;
border: 1px solid var(--input-border-color);
flex: 1;
}
/* PARAGRAPH */
p {
line-height: 3.5;
}
/* MEDIA QUERY */
@media (min-width: 768px) and (max-width: 1024px) {
body {
background: var(--bg-gradient);
}
main {
flex-direction: row;
}
}
@media (max-width: 767px) {
nav ul {
flex-direction: column;
}
.button {
padding: 15px;
}
}
/* ANIMATION AND TRANSITION */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.button {
animation: pulse 2s infinite;
}
a {
transition: color 0.5s ease;
}
a:hover {
color: var(--button-hover-color);
}
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
input:invalid {
border-color: var(--invalid-input-border-color);
}
::placeholder {
color: var(--placeholder-color);
opacity: 1;
}
AFTER:
Your code may look something like the following after applying the above adjustment from this lesson:
CSS Code:
/* External CSS */
/* IMPORTS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/* CSS Variables for consistent theming and easy maintenance */
:root {
--font-family: 'Roboto', sans-serif;
--bg-color: #f4f4f4;
--bg-gradient: linear-gradient(to right, #630404, #e040fb, #6a027c);
--nav-hover-bg-color: #630404;
--nav-hover-text-color: #f3e40d;
--text-color-white: #ffffff;
--header-bg-color: #333;
--header-text-color: white;
--subtitle-text-color: #aaa;
--paragraph-color: #cfbdbd;
--main-border-color: #333;
--article-border-color: grey;
--form-border-color: #ddd;
--input-border-color: #ccc;
--button-hover-color: #f5f121;
--invalid-input-border-color: red;
--placeholder-color: #888;
}
/* BODY */
body {
font-family: var(--font-family);
background-color: var(--bg-color);
background: var(--bg-gradient);
}
/* NAVIGATION */
nav > ul > li {
display: inline;
margin-right: 20px;
text-align: center;
padding: 10px;
flex: 1;
}
nav a:hover, nav a:focus {
background-color: var(--nav-hover-bg-color);
color: var(--nav-hover-text-color);
}
/* HYPERLINKS */
a[href^="#"] {
text-decoration: none;
color: var(--text-color-white);
}
/* HEADINGS */
header {
background: var(--header-bg-color);
color: var(--header-text-color);
padding: 10px;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
}
h1 {
font-weight: 700;
position: relative;
}
h1::after {
content: '...the future of token minting';
display: block;
text-align: center;
color: var(--subtitle-text-color);
position: absolute;
width: 100%;
left: 0;
top: 100%;
font-size: 0.55em;
}
h1, h2, h3 {
font-weight: 700;
}
h2 + p {
color: var(--paragraph-color);
}
/* MAIN */
main {
display: flex;
flex-direction: row;
gap: 10px;
}
/* ARTICLE */
article {
margin-bottom: 15px;
padding: 10px;
border: 1px solid var(--article-border-color);
flex: 1;
}
article p {
margin-bottom: 20px;
border: 1px solid var(--article-border-color);
padding: 15px;
}
/* IDs */
#mint {
background-color: #eaeaea;
padding: 15px;
margin-top: 10px;
}
#mint form {
padding: 10px;
border: 1px solid var(--form-border-color);
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
#mint input,
#mint button {
padding: 10px;
margin-bottom: 10px;
border: 1px solid var(--input-border-color);
flex: 1;
}
/* PARAGRAPH */
p {
line-height: 3.5;
}
/* MEDIA QUERY */
@media (min-width: 768px) and (max-width: 1024px) {
body {
background: var(--bg-gradient);
}
main {
flex-direction: row;
}
}
@media (max-width: 767px) {
nav ul {
flex-direction: column;
}
.button {
padding: 15px;
}
}
/* ANIMATION AND TRANSITION */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.button {
animation: pulse 2s infinite;
}
a {
transition: color 0.5s ease;
}
a:hover {
color: var(--button-hover-color);
}
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
input:invalid {
border-color: var(--invalid-input-border-color);
}
::placeholder {
color: var(--placeholder-color);
opacity: 1;
}
HTML Code:
<!DOCTYPE html> <!-- Defines document type and HTML version -->
<html lang="en"> <!-- Sets the language of the page -->
<head>
<meta charset="UTF-8"> <!-- Sets character encoding for the document -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensures proper rendering on mobile devices -->
<title>Token Minter dApp</title> <!-- Title of the webpage -->
<link rel="stylesheet" href="/globalstyles.css"> <!-- Link to external CSS file -->
</head>
<body>
<header>
<!-- Site header with navigation -->
<h1>Token Minter dApp</h1>
<nav>
<!-- Navigation links -->
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#mint">Mint Tokens</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<!-- Main content section -->
<article id="home">
<!-- Introduction article -->
<h2>Introduction to Token Minting</h2>
<p>This dApp allows users to mint their own tokens on the blockchain.</p>
</article>
<section id="mint">
<!-- Token minting form section -->
<h2>Mint Your Tokens</h2>
<form action="#">
<!-- Form for token minting -->
<input type="email" placeholder="Enter your email">
<input type="number" placeholder="Token amount">
<button class="button" type="submit">Mint</button>
</form>
</section>
<aside>
<!-- Sidebar with additional information -->
<h3>Learn More:</h3>
<p>Explore more about blockchain technology.</p>
</aside>
</main>
<footer>
<!-- Footer with contact information -->
<p>Contact us at <a href="mailto:hello@dProgrammingUniversity.com">hello@dProgrammingUniversity.com</a></p>
</footer>
</body>
</html>
Conclusion:
In this lesson, you’ve traversed the essentials of CSS best practices and responsive web design.
Your journey has not just been about learning to code but adopting methodologies that facilitate the creation of scalable and maintainable stylesheets.
As you incorporate these practices into the Token Minter dApp, you lay a foundation for professional web development that will serve you throughout your career in Web3 frontend development and beyond.
Resources & References:
To deepen your understanding of this lesson, you can explore the following resources:
These resources provide comprehensive guides and examples that will be invaluable as you learn and apply them in your journey of Web3 frontend development.
Support:
If you need help with this lesson, questions, suggestions and improvement. The best way to get help is to use the comment below:
1. First check existing comments if your questions have been answered before posting.
2. If no existing related question with an answer, then you can post a new one (kindly avoid duplicating previously asked and answered questions).
NOTE: This is the most recommended way of getting support directly from the instructor of this course. Posting on other platforms like Discord may get support from other community members and not from the course instructor directly.
Images|Videos|Links: To support your question with a screenshot, Github repo link or other media, kindly upload it somewhere online like Drive/Dropbox or Github (for codes) first, then post the link to it in your comment. Please do not upload media/codes directly, it may fail or cause your comment to be deleted.
Please ONLY post questions that are specific to this lesson not the entire course to ensure others can find it helpful. Each lesson allows comments relating to it ONLY. Off-lesson questions will be deleted even if they relate to this course as a whole but as long as they are not specific to this lesson, they are not allowed.
Post a comment