SECTION 3: JAVASCRIPT FOR WEB3 FRONTEND DEVELOPMENT
CSS3 Animations, Transitions, and Responsive Design
Introduction:
Let’s dive into the dynamic aspects of CSS3, enabling your web pages to transition from static to animated with smooth transitions and responsive layouts.
This lesson focuses on bringing motion and adaptability to your web applications, ensuring they’re not just functional but also aesthetically pleasing and accessible across all devices.
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:
- Understand how to utilize CSS3 animations and transitions to enhance user experience.
- Learn the principles of responsive web design using CSS3.
- Apply CSS3 features to improve the Token Minter dApp’s aesthetics and responsiveness.
Lesson Video:
What Is CSS3?
CSS3 stands for Cascading Style Sheets level 3, which is the latest iteration of the CSS standard used in web design and development.
CSS3 is a powerful tool for web designers and developers, offering a range of new features and improvements over previous versions to enhance the look and interactivity of web pages.
Here’s what makes CSS3 significant:
- Modularity: CSS3 is split into “modules”, making the specification easier to update and allowing browsers to support more recent features without having to wait for the entire specification to be finalized.
- Advanced Selectors: With CSS3, developers can use more sophisticated selectors that allow for greater flexibility and specificity when styling elements.
- Visual Effects: CSS3 includes a wide range of visual effects like box shadows, text shadows, rounded corners, gradients, and border images that were not possible with CSS2 unless images or JavaScript were used.
- Animations and Transitions: It introduces the ability to create animations and transitions without relying on scripting languages like JavaScript. This means you can have elements fade, move, or change over a given timeline.
- Multiple Backgrounds: CSS3 allows multiple background images for a single element, each layer with its own position and repeat settings.
- 2D/3D Transformations: Developers can manipulate elements on a two-dimensional (2D) plane or a three-dimensional (3D) space to create complex transformations.
- Responsive Design: With media queries, CSS3 enables the creation of responsive web designs that adjust smoothly to different screen sizes and resolutions.
- Flexbox and Grid Layouts: These layout modules offer more efficient ways to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic.
- Custom Fonts: CSS3 makes it easier to use a variety of fonts through the
@font-facerule, which allows for custom fonts to be loaded on a webpage.
CSS3 plays a crucial role in modern web design, allowing developers to build more responsive, dynamic, and visually appealing websites. It works in conjunction with HTML5 and JavaScript to create the sophisticated web experiences that users expect today.
CSS3 Animations and Transitions:
CSS3 animations make it possible to animate transitions from one CSS style configuration to another. Transitions provide a way to control animation speed when changing CSS properties.
Animation was introduced to CSS 3 as a way to animate HTML element without actually using Javascript to handle the animation process.
Responsive Design with CSS3:
Responsive design ensures that your web applications look and function well on various devices, providing an optimal user experience. CSS3 facilitates this with media queries, flexible grid layouts, and more.
Implementing CSS3 Animations and Transitions:
Let’s take our Token Minter dApp to the next level by incorporating these advanced CSS features.
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 */
}
}
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>
Enhance the Capstone Project with New Features from this Lesson:
CSS Code:
/* External CSS File: animations.css */
/* 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: #ff4500;
}
/* 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 */
}
AFTER:
Your code may look something like the following after applying the above adjustment from this 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>
Conclusion:
In this exploration, you have learned to create a more interactive and responsive dApp by leveraging the robust features of CSS3.
Animations and transitions add a layer of polish to your application, while responsive design ensures accessibility and an optimal user experience across all devices.
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.
Good day Sir. Thank you very much for this opportunity. I noticed that the first reference link for css sequencing is for javascript and not css3 Sir.
It was a mixup. I have removed it.
Thanks for pointing it out!