Forwarded from Health Fitness & Diet Tips - Gym Motivation 💪
How to be Top 1% in 2024 📈
• Workout
• Meditation
• Daily Sun
• No alcohol
• Productivity
• 8hours Sleep
• Chase goals
• Spend time with family
• Discipline
• Selflove
Agree?? 🤔💭
• Workout
• Meditation
• Daily Sun
• No alcohol
• Productivity
• 8hours Sleep
• Chase goals
• Spend time with family
• Discipline
• Selflove
Agree?? 🤔💭
👍111❤25🔥9🤔1
21 Days Web Development Project Plan 👇👇
https://t.iss.one/webdevcoursefree/720
Day 7: Responsive Design
1. Understand Responsive Design: Learn the basics of responsive design, which ensures your website looks good on all devices (desktops, tablets, and mobile phones). Responsive design typically involves using flexible grid layouts, flexible images, and CSS media queries.
2. Set Up Media Queries: Open your
3. Make Images Responsive: Ensure your images resize appropriately on different devices by setting their maximum width to 100% and height to auto.
4. Flexible Grid Layouts: Use flexible grid layouts to create responsive designs. You can use CSS flexbox or CSS grid to achieve this. Here's an example using flexbox:
5. Adjust Typography for Different Screens: Adjust font sizes and line heights for better readability on smaller screens.
6. Test Your Design: Save your
7. Use Responsive Frameworks: If you're familiar with CSS frameworks like Bootstrap, you can use their built-in responsive classes to make your design responsive more easily.
8. Save and Publish: Once you're happy with the responsiveness of your projects, update your files online to ensure your projects look great on all devices.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
Like for more 😄
ENJOY LEARNING 👍👍
https://t.iss.one/webdevcoursefree/720
Day 7: Responsive Design
1. Understand Responsive Design: Learn the basics of responsive design, which ensures your website looks good on all devices (desktops, tablets, and mobile phones). Responsive design typically involves using flexible grid layouts, flexible images, and CSS media queries.
2. Set Up Media Queries: Open your
styles.css file and start by adding media queries to handle different screen sizes. Media queries allow you to apply specific CSS styles based on the screen width of the device./* Base styles for all devices */
body {
font-family: Arial, sans-serif;
color: #333;
background-color: #f8f8f8;
margin: 0;
padding: 20px;
}
/* Styles for tablets and larger screens */
@media (min-width: 600px) {
.container {
width: 90%;
margin: 0 auto;
}
}
/* Styles for desktops and larger screens */
@media (min-width: 1024px) {
.container {
width: 70%;
margin: 0 auto;
}
}
3. Make Images Responsive: Ensure your images resize appropriately on different devices by setting their maximum width to 100% and height to auto.
img {
max-width: 100%;
height: auto;
}
4. Flexible Grid Layouts: Use flexible grid layouts to create responsive designs. You can use CSS flexbox or CSS grid to achieve this. Here's an example using flexbox:
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 calc(33.333% - 20px);
margin: 10px;
}
@media (max-width: 600px) {
.item {
flex: 1 1 calc(100% - 20px);
}
}
5. Adjust Typography for Different Screens: Adjust font sizes and line heights for better readability on smaller screens.
body {
font-size: 16px;
line-height: 1.6;
}
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
6. Test Your Design: Save your
styles.css file and open your HTML files in different devices or use the browser's developer tools to simulate different screen sizes. Adjust your styles as needed.7. Use Responsive Frameworks: If you're familiar with CSS frameworks like Bootstrap, you can use their built-in responsive classes to make your design responsive more easily.
8. Save and Publish: Once you're happy with the responsiveness of your projects, update your files online to ensure your projects look great on all devices.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
Like for more 😄
ENJOY LEARNING 👍👍
👍24🔥7👏3❤2
21 Days Web Development Project Plan 👇👇
https://t.iss.one/webdevcoursefree/720
Day 8: Pricing Table
1. Plan Your Pricing Table: Decide on the product or service for which you're creating a pricing table. Determine the different pricing tiers and features associated with each tier.
2. Create a New HTML File: Open your text editor and create a new file named
3. Set Up the Structure: Add the basic structure of an HTML document, including the
4. Build the Table: Inside the
5. Add Basic CSS Styling: Create a new file named
6. Save and View: Save your
7. Optional: Advanced Styling: Enhance the visual appeal of your pricing table with more advanced styling, such as adding hover effects, animations, or icons.
8. Publish Your Pricing Table: Once you're satisfied with your pricing table, upload your HTML and CSS files to your hosting service to share it online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
https://t.iss.one/webdevcoursefree/720
Day 8: Pricing Table
1. Plan Your Pricing Table: Decide on the product or service for which you're creating a pricing table. Determine the different pricing tiers and features associated with each tier.
2. Create a New HTML File: Open your text editor and create a new file named
pricing_table.html.3. Set Up the Structure: Add the basic structure of an HTML document, including the
<!DOCTYPE html> declaration, <html>, <head>, and <body> tags.4. Build the Table: Inside the
<body> tag, use the <table>, <thead>, <tbody>, <tr>, <th>, and <td> tags to create your pricing table.<!DOCTYPE html>
<html>
<head>
<title>Pricing Table</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Pricing Plans</h1>
<table class="pricing-table">
<thead>
<tr>
<th>Plan</th>
<th>Price</th>
<th>Features</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basic</td>
<td>$10/month</td>
<td>Feature 1, Feature 2, Feature 3</td>
</tr>
<tr>
<td>Standard</td>
<td>$20/month</td>
<td>Feature 1, Feature 2, Feature 3, Feature 4</td>
</tr>
<tr>
<td>Premium</td>
<td>$30/month</td>
<td>All features included</td>
</tr>
</tbody>
</table>
</body>
</html>
5. Add Basic CSS Styling: Create a new file named
styles.css and link it to your HTML document. Add basic styles to make your table visually appealing. body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
color: #333;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.pricing-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.pricing-table th, .pricing-table td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
.pricing-table th {
background-color: #f2f2f2;
}
.pricing-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.pricing-table tr:hover {
background-color: #eaeaea;
}
6. Save and View: Save your
pricing_table.html and styles.css files. Open the HTML file in a web browser to see how it looks. Adjust the layout or styling as needed.7. Optional: Advanced Styling: Enhance the visual appeal of your pricing table with more advanced styling, such as adding hover effects, animations, or icons.
.pricing-table th, .pricing-table td {
text-align: center;
}
.pricing-table td {
font-size: 18px;
}
.pricing-table .highlight {
background-color: #ffd700;
font-weight: bold;
}
8. Publish Your Pricing Table: Once you're satisfied with your pricing table, upload your HTML and CSS files to your hosting service to share it online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
👍20❤8👏4
21 Days Web Development Project Plan 👇👇
https://t.iss.one/webdevcoursefree/720
Day 9: Newsletter Signup
1. Plan Your Newsletter Signup Form: Decide what fields you want to include in your newsletter signup form, such as name and email. Plan the validation rules (e.g., email format).
2. Create a New HTML File: Open your text editor and create a new file named
3. Set Up the Structure: Add the basic structure of an HTML document, including the
4. Build the Form: Inside the
5. Add Basic CSS Styling: Create a new file named
6. Add Form Validation: Use HTML5 attributes to validate the form inputs. The
7. Save and View: Save your
8. Optional: Add JavaScript Validation: Enhance form validation with JavaScript for additional checks. Create a new file named
```javascript
document.querySelector('.signup-form').addEventListener('submit', function(event) {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
if (name === '' || email === '') {
alert('Please fill out all fields.');
event.preventDefault();
} else if (!email.includes('@')) {
alert('Please enter a valid email address.');
event.preventDefault();
}
});
9. Publish Your Newsletter Signup Form: Once you're satisfied with your newsletter signup form, upload your HTML, CSS, and JavaScript files to your hosting service to share it online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
https://t.iss.one/webdevcoursefree/720
Day 9: Newsletter Signup
1. Plan Your Newsletter Signup Form: Decide what fields you want to include in your newsletter signup form, such as name and email. Plan the validation rules (e.g., email format).
2. Create a New HTML File: Open your text editor and create a new file named
newsletter_signup.html.3. Set Up the Structure: Add the basic structure of an HTML document, including the
<!DOCTYPE html> declaration, <html>, <head>, and <body> tags.4. Build the Form: Inside the
<body> tag, use the <form> element to create your signup form. Include input fields for the name and email, and a submit button.<!DOCTYPE html>
<html>
<head>
<title>Newsletter Signup</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Subscribe to our Newsletter</h1>
<form class="signup-form" action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Subscribe</button>
</form>
</body>
</html>
5. Add Basic CSS Styling: Create a new file named
styles.css and link it to your HTML document. Add basic styles to make your form visually appealing. body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
color: #333;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.signup-form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #fff;
}
.signup-form label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
.signup-form input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.signup-form button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.signup-form button:hover {
background-color: #45a049;
}
6. Add Form Validation: Use HTML5 attributes to validate the form inputs. The
required attribute ensures that the name and email fields are not left empty, and the type="email" attribute ensures that the email format is correct.7. Save and View: Save your
newsletter_signup.html and styles.css files. Open the HTML file in a web browser to see how it looks and test the form validation.8. Optional: Add JavaScript Validation: Enhance form validation with JavaScript for additional checks. Create a new file named
script.js and link it to your HTML document using the <script> tag.<script src="script.js"></script>
```javascript
document.querySelector('.signup-form').addEventListener('submit', function(event) {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
if (name === '' || email === '') {
alert('Please fill out all fields.');
event.preventDefault();
} else if (!email.includes('@')) {
alert('Please enter a valid email address.');
event.preventDefault();
}
});
`9. Publish Your Newsletter Signup Form: Once you're satisfied with your newsletter signup form, upload your HTML, CSS, and JavaScript files to your hosting service to share it online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
👍19❤7🥰1
21 Days Web Development Project Plan 👇👇
https://t.iss.one/webdevcoursefree/720
Day 10: Testimonials
1. Plan Your Testimonials Page: Decide on the layout and design for displaying customer testimonials. Determine the content for each testimonial, including the customer's name, feedback, and any images or ratings.
2. Create a New HTML File: Open your text editor and create a new file named
3. Set Up the Structure: Add the basic structure of an HTML document, including the
4. Build the Testimonials Section: Inside the
5. Add Basic CSS Styling: Create a new file named
6. Save and View: Save your
7. Optional: Add Additional Features: Enhance your testimonials section with additional features like star ratings, animations, or transitions.
8. Publish Your Testimonials Page: Once you're satisfied with your testimonials page, upload your HTML and CSS files to your hosting service to share it online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
https://t.iss.one/webdevcoursefree/720
Day 10: Testimonials
1. Plan Your Testimonials Page: Decide on the layout and design for displaying customer testimonials. Determine the content for each testimonial, including the customer's name, feedback, and any images or ratings.
2. Create a New HTML File: Open your text editor and create a new file named
testimonials.html.3. Set Up the Structure: Add the basic structure of an HTML document, including the
<!DOCTYPE html> declaration, <html>, <head>, and <body> tags.4. Build the Testimonials Section: Inside the
<body> tag, create a section to display the testimonials. Use HTML tags like <div>, <h2>, <p>, and <img> to structure each testimonial.<!DOCTYPE html>
<html>
<head>
<title>Customer Testimonials</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>What Our Customers Say</h1>
<div class="testimonials">
<div class="testimonial">
<img src="customer1.jpg" alt="Customer 1">
<h2>John Doe</h2>
<p>"This product has changed my life! Highly recommend to everyone."</p>
</div>
<div class="testimonial">
<img src="customer2.jpg" alt="Customer 2">
<h2>Jane Smith</h2>
<p>"Amazing service and fantastic support. Five stars!"</p>
</div>
<div class="testimonial">
<img src="customer3.jpg" alt="Customer 3">
<h2>Michael Brown</h2>
<p>"I am very satisfied with my purchase. Will definitely buy again."</p>
</div>
</div>
</body>
</html>
5. Add Basic CSS Styling: Create a new file named
styles.css and link it to your HTML document. Add basic styles to make your testimonials visually appealing. body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
color: #333;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.testimonials {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.testimonial {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 10px;
padding: 20px;
width: calc(33% - 40px);
text-align: center;
}
.testimonial img {
border-radius: 50%;
max-width: 100px;
margin-bottom: 10px;
}
.testimonial h2 {
font-size: 1.2em;
margin-bottom: 10px;
}
.testimonial p {
font-size: 1em;
color: #555;
}
@media (max-width: 768px) {
.testimonial {
width: calc(50% - 40px);
}
}
@media (max-width: 480px) {
.testimonial {
width: calc(100% - 40px);
}
}
6. Save and View: Save your
testimonials.html and styles.css files. Open the HTML file in a web browser to see how it looks. Adjust the layout or styling as needed.7. Optional: Add Additional Features: Enhance your testimonials section with additional features like star ratings, animations, or transitions.
.testimonial p {
font-size: 1em;
color: #555;
margin-bottom: 10px;
}
.testimonial .rating {
color: #ffd700;
font-size: 1.2em;
}
.testimonial {
transition: transform 0.3s ease;
}
.testimonial:hover {
transform: scale(1.05);
}
8. Publish Your Testimonials Page: Once you're satisfied with your testimonials page, upload your HTML and CSS files to your hosting service to share it online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
👍30❤9😁1
🌟 Step-by-Step Guide to Become a Full Stack Web Developer 🌟
1. Learn Front-End Technologies:
- 🖌 HTML: Dive into the structure of web pages, creating the foundation of your applications.
- 🎨 CSS: Explore styling and layout techniques to make your websites visually appealing.
- 📜 JavaScript: Add interactivity and dynamic content, making your websites come alive.
2. Master Front-End Frameworks:
- 🅰️ Angular, ⚛️ React, or 🔼 Vue.js: Choose your weapon! Build responsive, user-friendly interfaces using your preferred framework.
3. Get Backend Proficiency:
- 💻 Choose a server-side language: Embrace Python, Java, Ruby, or others to power the backend magic.
- ⚙️ Learn a backend framework: Express, Django, Ruby on Rails - tools to create robust server-side applications.
4. Database Fundamentals:
- 🗄 SQL: Master the art of manipulating databases, ensuring seamless data operations.
- 🔗 Database design and management: Architect and manage databases for efficient data storage.
5. Dive into Back-End Development:
- 🏗 Set up servers and APIs: Construct server architectures and APIs to connect the front-end and back-end.
- 📡 Handle data storage and retrieval: Fetch and store data like a pro!
6. Version Control & Collaboration:
- 🔄 Git: Time to track changes like a wizard! Collaborate with others using the magical GitHub.
7. DevOps and Deployment:
- 🚀 Deploy applications on servers (Heroku, AWS): Launch your creations into the digital cosmos.
- 🛠 Continuous Integration/Deployment (CI/CD): Automate the deployment process like a tech guru.
8. Security Basics:
- 🔒 Implement authentication and authorization: Guard your realm with strong authentication and permission systems.
- 🛡 Protect against common web vulnerabilities: Shield your applications from the forces of cyber darkness.
9. Learn About Testing:
- 🧪 Unit, integration, and end-to-end testing: Test your creations with the rigor of a mad scientist.
- 🚦 Ensure code quality and functionality: Deliver robust, bug-free experiences.
10. Explore Full Stack Concepts:
- 🔄 Understand the flow of data between front-end and back-end: Master the dance of data between realms.
- ⚖️ Balance performance and user experience: Weave the threads of speed and delight into your creations.
11. Keep Learning and Building:
- 📚 Stay updated with industry trends: Keep your knowledge sharp with the ever-evolving web landscape.
- 👷♀️ Work on personal projects to showcase skills: Craft your digital masterpieces and show them to the world.
12. Networking and Soft Skills:
- 🤝 Connect with other developers: Forge alliances with fellow wizards of the web.
- 🗣 Effective communication and teamwork: Speak the language of collaboration and understanding.
Remember, the path to becoming a Full Stack Web Developer is an exciting journey filled with challenges and discoveries. Embrace the magic of coding and keep reaching for the stars! 🚀🌟
Engage with a reaction for more guides like this!❤️🤩
ENJOY LEARNING 👍👍
1. Learn Front-End Technologies:
- 🖌 HTML: Dive into the structure of web pages, creating the foundation of your applications.
- 🎨 CSS: Explore styling and layout techniques to make your websites visually appealing.
- 📜 JavaScript: Add interactivity and dynamic content, making your websites come alive.
2. Master Front-End Frameworks:
- 🅰️ Angular, ⚛️ React, or 🔼 Vue.js: Choose your weapon! Build responsive, user-friendly interfaces using your preferred framework.
3. Get Backend Proficiency:
- 💻 Choose a server-side language: Embrace Python, Java, Ruby, or others to power the backend magic.
- ⚙️ Learn a backend framework: Express, Django, Ruby on Rails - tools to create robust server-side applications.
4. Database Fundamentals:
- 🗄 SQL: Master the art of manipulating databases, ensuring seamless data operations.
- 🔗 Database design and management: Architect and manage databases for efficient data storage.
5. Dive into Back-End Development:
- 🏗 Set up servers and APIs: Construct server architectures and APIs to connect the front-end and back-end.
- 📡 Handle data storage and retrieval: Fetch and store data like a pro!
6. Version Control & Collaboration:
- 🔄 Git: Time to track changes like a wizard! Collaborate with others using the magical GitHub.
7. DevOps and Deployment:
- 🚀 Deploy applications on servers (Heroku, AWS): Launch your creations into the digital cosmos.
- 🛠 Continuous Integration/Deployment (CI/CD): Automate the deployment process like a tech guru.
8. Security Basics:
- 🔒 Implement authentication and authorization: Guard your realm with strong authentication and permission systems.
- 🛡 Protect against common web vulnerabilities: Shield your applications from the forces of cyber darkness.
9. Learn About Testing:
- 🧪 Unit, integration, and end-to-end testing: Test your creations with the rigor of a mad scientist.
- 🚦 Ensure code quality and functionality: Deliver robust, bug-free experiences.
10. Explore Full Stack Concepts:
- 🔄 Understand the flow of data between front-end and back-end: Master the dance of data between realms.
- ⚖️ Balance performance and user experience: Weave the threads of speed and delight into your creations.
11. Keep Learning and Building:
- 📚 Stay updated with industry trends: Keep your knowledge sharp with the ever-evolving web landscape.
- 👷♀️ Work on personal projects to showcase skills: Craft your digital masterpieces and show them to the world.
12. Networking and Soft Skills:
- 🤝 Connect with other developers: Forge alliances with fellow wizards of the web.
- 🗣 Effective communication and teamwork: Speak the language of collaboration and understanding.
Remember, the path to becoming a Full Stack Web Developer is an exciting journey filled with challenges and discoveries. Embrace the magic of coding and keep reaching for the stars! 🚀🌟
Engage with a reaction for more guides like this!❤️🤩
ENJOY LEARNING 👍👍
👍132❤58🥰10👏6🔥5🤔3👌3
How to get freelancing clients for web development projects
👇👇
https://t.iss.one/freelancing_upwork/16
👇👇
https://t.iss.one/freelancing_upwork/16
Telegram
Learn Freelancing | Fiverr | Upwork
Securing freelancing clients for web development projects requires a strategic mix of online presence, networking, and demonstrating your skills. Here are some effective strategies:
1. Online Freelance Platforms:
- Upwork and Freelancer: Create detailed…
1. Online Freelance Platforms:
- Upwork and Freelancer: Create detailed…
❤9👍6🤔1
21 Days Web Development Project Plan
Day 11: Animated Buttons
1. Plan Your Animated Buttons: Decide type of animations you want to create for buttons. Common effects include hover animations, click effects, and loading animations.
2. Create a New HTML File: Open text editor and create file named
3. Set Up the Structure: Add the basic HTML document, including the
4. Create the Buttons: Inside the
5. Add Basic CSS Styling: Create file named
6. Add Hover Animation: Use CSS
7. Add Click Animation: Use CSS transitions and the
8. Add Loading Animation: Use CSS keyframes to create a loading animation. Create a pseudo-element to show a loading spinner inside the button.
9. Save and View: Save your
10. Optional: Explore More Animations: Experiment with more CSS animations like shadow effects, color transitions, and complex keyframes to make your buttons engaging.
11. Publish Your Animated Buttons
Like for more ❤️
ENJOY LEARNING 👍👍
Day 11: Animated Buttons
1. Plan Your Animated Buttons: Decide type of animations you want to create for buttons. Common effects include hover animations, click effects, and loading animations.
2. Create a New HTML File: Open text editor and create file named
animated_buttons.html.3. Set Up the Structure: Add the basic HTML document, including the
<!DOCTYPE html> declaration, <html>, <head>, and <body> tags.4. Create the Buttons: Inside the
<body> tag, create several buttons to apply animations. Use HTML <button> elements.<!DOCTYPE html>
<html>
<head>
<title>Animated Buttons</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Animated Buttons</h1>
<button class="btn btn-hover">Hover Me</button>
<button class="btn btn-click">Click Me</button>
<button class="btn btn-loading">Loading</button>
</body>
</html>
5. Add Basic CSS Styling: Create file named
styles.css and link it to your HTML document. Add basic styles for buttons. body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
color: #333;
padding: 20px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
.btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
}
6. Add Hover Animation: Use CSS
:hover selector to add a hover effect to the button. .btn-hover:hover {
background-color: #45a049;
}
7. Add Click Animation: Use CSS transitions and the
:active selector to create a click effect. .btn-click:active {
background-color: #3e8e41;
transform: scale(0.95);
}
8. Add Loading Animation: Use CSS keyframes to create a loading animation. Create a pseudo-element to show a loading spinner inside the button.
.btn-loading {
position: relative;
overflow: hidden;
}
.btn-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
border: 3px solid white;
border-top: 3px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
transform: translate(-50%, -50%);
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
9. Save and View: Save your
animated_buttons.html and styles.css files. Open the HTML file in a web browser to see how the buttons look and test their animations.10. Optional: Explore More Animations: Experiment with more CSS animations like shadow effects, color transitions, and complex keyframes to make your buttons engaging.
11. Publish Your Animated Buttons
Like for more ❤️
ENJOY LEARNING 👍👍
👍48❤11🔥2👏2
21 Days Web Development Project Plan
Day 12: Flexbox Layout
1. Understand Flexbox: Familiarize yourself with the basics of CSS Flexbox, a powerful layout module that allows you to create complex layouts with ease. Review the main concepts like flex containers, flex items, and properties such as
2. Create a New HTML File: Open your text editor and create a new file named
3. Set Up the Structure: Add the basic structure of an HTML document, including the
4. Build the Layout: Inside the
5. Add Basic CSS Styling: Create a new file named
6. Apply Flexbox Properties: Use Flexbox properties to control the layout of the navbar and content areas. Notice the use of
7. Save and View: Save your
8. Explore Additional Flexbox Features: Experiment with more Flexbox properties and values to create various layouts. Try properties like
9. Resources:
- [CSS Tricks - A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [MDN Web Docs - CSS Flexible Box Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)
10. Publish Your Flexbox Layout: Once you're satisfied with your Flexbox layout, upload your HTML and CSS files to your hosting service to share them online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
Day 12: Flexbox Layout
1. Understand Flexbox: Familiarize yourself with the basics of CSS Flexbox, a powerful layout module that allows you to create complex layouts with ease. Review the main concepts like flex containers, flex items, and properties such as
justify-content, align-items, flex-direction, and flex-wrap.2. Create a New HTML File: Open your text editor and create a new file named
flexbox_layout.html.3. Set Up the Structure: Add the basic structure of an HTML document, including the
<!DOCTYPE html> declaration, <html>, <head>, and <body> tags.4. Build the Layout: Inside the
<body> tag, create a container div with several child divs to represent the flex items. For this example, let's create a simple navigation bar using Flexbox.<!DOCTYPE html>
<html>
<head>
<title>Flexbox Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="navbar">
<div class="logo">MyLogo</div>
<nav class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</header>
<main class="content">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</main>
</body>
</html>
5. Add Basic CSS Styling: Create a new file named
styles.css and link it to your HTML document. Add basic styles for your layout. body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
color: #333;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #333;
color: white;
}
.nav-links {
display: flex;
gap: 20px;
}
.nav-links a {
color: white;
text-decoration: none;
}
.content {
display: flex;
justify-content: space-around;
align-items: center;
flex-grow: 1;
padding: 20px;
}
.box {
background-color: #4CAF50;
color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
width: 30%;
}
6. Apply Flexbox Properties: Use Flexbox properties to control the layout of the navbar and content areas. Notice the use of
display: flex, justify-content, align-items, and other Flexbox-specific properties.7. Save and View: Save your
flexbox_layout.html and styles.css files. Open the HTML file in a web browser to see how the layout looks. Adjust the layout or styling as needed.8. Explore Additional Flexbox Features: Experiment with more Flexbox properties and values to create various layouts. Try properties like
flex-direction: column, align-self, order, and flex-grow. .box {
background-color: #4CAF50;
color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
flex: 1;
margin: 10px;
}
.content {
flex-direction: column;
align-items: stretch;
}
.box:nth-child(2) {
order: -1;
}
9. Resources:
- [CSS Tricks - A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [MDN Web Docs - CSS Flexible Box Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)
10. Publish Your Flexbox Layout: Once you're satisfied with your Flexbox layout, upload your HTML and CSS files to your hosting service to share them online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
👍30❤6👏1
21 Days Web Development Project Plan
Day 13: CSS Grid
1. Understand CSS Grid: CSS Grid is a powerful layout system for creating complex web layouts. Review the main concepts like grid containers, grid items, and properties such as
2. Create a New HTML File: Open your text editor and create a new file named
3. Set Up the Structure: Add the basic structure of an HTML document, including the
4. Build the Grid Layout: Inside the
5. Add Basic CSS Styling: Create a new file named
6. Define the Grid Layout: Use CSS Grid properties to define the layout of the grid container and its items. Notice the use of
7. Save and View: Save your
8. Explore Additional CSS Grid Features: Experiment with more CSS Grid properties and values to create various layouts. Try properties like
9. Resources:
- [CSS Tricks - https://css-tricks.com/snippets/css/complete-guide-grid/)
- [CSS Grid: https://t.iss.one/javascript_courses/182]
10. Publish Your CSS Grid Layout: Once you're satisfied with your CSS Grid layout, upload your HTML and CSS files to your hosting service to share them online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
Day 13: CSS Grid
1. Understand CSS Grid: CSS Grid is a powerful layout system for creating complex web layouts. Review the main concepts like grid containers, grid items, and properties such as
grid-template-columns, grid-template-rows, gap, grid-area, and justify-items.2. Create a New HTML File: Open your text editor and create a new file named
css_grid_layout.html.3. Set Up the Structure: Add the basic structure of an HTML document, including the
<!DOCTYPE html> declaration, <html>, <head>, and <body> tags.4. Build the Grid Layout: Inside the
<body> tag, create a container div with several child divs to represent the grid items. For this example, let's create a simple website layout with a header, sidebar, main content area, and footer.<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<header class="header">Header</header>
<aside class="sidebar">Sidebar</aside>
<main class="main-content">Main Content</main>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
5. Add Basic CSS Styling: Create a new file named
styles.css and link it to your HTML document. Add basic styles for your grid layout. body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
color: #333;
margin: 0;
padding: 0;
}
.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
gap: 10px;
height: 100vh;
}
.header {
grid-column: 1 / -1;
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
.sidebar {
background-color: #4CAF50;
color: white;
padding: 20px;
}
.main-content {
background-color: #fff;
padding: 20px;
}
.footer {
grid-column: 1 / -1;
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
6. Define the Grid Layout: Use CSS Grid properties to define the layout of the grid container and its items. Notice the use of
grid-template-columns, grid-template-rows, and gap.7. Save and View: Save your
css_grid_layout.html and styles.css files. Open the HTML file in a web browser to see how the layout looks. Adjust the layout or styling as needed.8. Explore Additional CSS Grid Features: Experiment with more CSS Grid properties and values to create various layouts. Try properties like
grid-template-areas, grid-column, grid-row, and align-items. .grid-container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main-content"
"footer footer";
gap: 10px;
height: 100vh;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main-content {
grid-area: main-content;
}
.footer {
grid-area: footer;
}
9. Resources:
- [CSS Tricks - https://css-tricks.com/snippets/css/complete-guide-grid/)
- [CSS Grid: https://t.iss.one/javascript_courses/182]
10. Publish Your CSS Grid Layout: Once you're satisfied with your CSS Grid layout, upload your HTML and CSS files to your hosting service to share them online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
👍31❤12
24 Youtube Channels for Web Developers
✅ Academind
✅ Clever Programmer
✅ Codecourse
✅ Coder Coder
✅ DevTips
✅ DerekBanas
✅ Fireship
✅ FreeCodeCamp
✅ FlorinPop
✅ Google Developers
✅ Joseph Smith
✅ KevinPowell
✅ LearnCode academy
✅ LearnWebCode
✅ LevelUpTuts
✅ Netanel Peles
✅ Programming with Mosh
✅ SteveGriffith
✅ TheNetNinja
✅ TheNewBoston
✅ TraversyMedia
✅ Treehouse
✅ WebDevSimplified
✅ Codewithharry
✅ Academind
✅ Clever Programmer
✅ Codecourse
✅ Coder Coder
✅ DevTips
✅ DerekBanas
✅ Fireship
✅ FreeCodeCamp
✅ FlorinPop
✅ Google Developers
✅ Joseph Smith
✅ KevinPowell
✅ LearnCode academy
✅ LearnWebCode
✅ LevelUpTuts
✅ Netanel Peles
✅ Programming with Mosh
✅ SteveGriffith
✅ TheNetNinja
✅ TheNewBoston
✅ TraversyMedia
✅ Treehouse
✅ WebDevSimplified
✅ Codewithharry
❤44👍30
21 Days Web Development Project Plan
Day 14: CSS Frameworks
1. Understand CSS Frameworks: CSS frameworks like Bootstrap and Foundation provide pre-written CSS and JavaScript components that help you quickly build responsive and stylish web pages. They include a variety of tools like grid systems, typography, buttons, forms, and more.
2. Choose a Framework: Decide which CSS framework you want to use. Bootstrap is one of the most popular and well-documented options, but you can also explore others like Foundation, Bulma, or Tailwind CSS.
3. Set Up Your Project: Open your text editor and create a new HTML file named
For Bootstrap:
4. Create a Basic Layout: Use the grid system provided by the framework to create a responsive layout. For Bootstrap, use the
Day 14: CSS Frameworks
1. Understand CSS Frameworks: CSS frameworks like Bootstrap and Foundation provide pre-written CSS and JavaScript components that help you quickly build responsive and stylish web pages. They include a variety of tools like grid systems, typography, buttons, forms, and more.
2. Choose a Framework: Decide which CSS framework you want to use. Bootstrap is one of the most popular and well-documented options, but you can also explore others like Foundation, Bulma, or Tailwind CSS.
3. Set Up Your Project: Open your text editor and create a new HTML file named
css_framework.html. Include the necessary links to the CSS and JavaScript files of your chosen framework.For Bootstrap:
<!DOCTYPE html>
<html>
<head>
<title>Using Bootstrap</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Your content goes here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
4. Create a Basic Layout: Use the grid system provided by the framework to create a responsive layout. For Bootstrap, use the
container, row, and col classes.<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
</div>
</div>
👍12❤3😁1
5. Add More Components: Explore and add more components provided by the framework, such as navigation bars, buttons, forms, and modals. Customize them as needed.
6. Customize the Design: Use custom CSS to override the default styles of the framework if needed. Create a new file named
```css
.navbar {
background-color: #4CAF50 !important;
}
.card {
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-primary {
background-color: #333;
border-color: #333;
}
7. Save and View: Save your `css_framework.html` and `custom_styles.css` files. Open the HTML file in a web browser to see how the layout looks. Adjust the layout or styling as needed.
8. Resources:
- [Bootstrap Documentation](https://getbootstrap.com/docs/)
- [Foundation Documentation](https://get.foundation/sites/docs/)
- [Bulma Documentation](https://bulma.io/documentation/)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
9. Publish Your Project: Once you're satisfied with your project, upload your HTML, CSS, and any other required files to your hosting service to share it online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
6. Customize the Design: Use custom CSS to override the default styles of the framework if needed. Create a new file named
custom_styles.css and link it to your HTML document after the framework’s CSS file.<link href="custom_styles.css" rel="stylesheet">
```css
.navbar {
background-color: #4CAF50 !important;
}
.card {
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-primary {
background-color: #333;
border-color: #333;
}
`7. Save and View: Save your `css_framework.html` and `custom_styles.css` files. Open the HTML file in a web browser to see how the layout looks. Adjust the layout or styling as needed.
8. Resources:
- [Bootstrap Documentation](https://getbootstrap.com/docs/)
- [Foundation Documentation](https://get.foundation/sites/docs/)
- [Bulma Documentation](https://bulma.io/documentation/)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
9. Publish Your Project: Once you're satisfied with your project, upload your HTML, CSS, and any other required files to your hosting service to share it online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
👍19❤7😁1
21 Days Web Development Project Plan
Day 15: Landing Page
1. Understand Landing Pages: A landing page is a single web page designed to capture a visitor's attention and encourage them to take a specific action, such as signing up for a newsletter or purchasing a product. The focus is on aesthetics and user experience.
2. Plan Your Layout: Sketch out the layout of your landing page. Common sections include a header, hero section, features, testimonials, call-to-action, and footer. Decide on the content and images you'll need.
3. Create a New HTML File: Open your text editor and create a new file named
4. Set Up the Structure: Add the basic structure of an HTML document, including the
5. Build the Layout: Inside the
Day 15: Landing Page
1. Understand Landing Pages: A landing page is a single web page designed to capture a visitor's attention and encourage them to take a specific action, such as signing up for a newsletter or purchasing a product. The focus is on aesthetics and user experience.
2. Plan Your Layout: Sketch out the layout of your landing page. Common sections include a header, hero section, features, testimonials, call-to-action, and footer. Decide on the content and images you'll need.
3. Create a New HTML File: Open your text editor and create a new file named
landing_page.html.4. Set Up the Structure: Add the basic structure of an HTML document, including the
<!DOCTYPE html> declaration, <html>, <head>, and <body> tags.5. Build the Layout: Inside the
<body> tag, create the structure of your landing page. Use semantic HTML tags like <header>, <section>, and <footer>.<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<nav class="navbar">
<a href="#" class="logo">Brand</a>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="hero">
<h1>Welcome to Our Product</h1>
<p>Discover the amazing features and benefits</p>
<a href="#" class="btn">Get Started</a>
</div>
</header>
<section class="features">
<h2>Features</h2>
<div class="feature">
<h3>Feature 1</h3>
<p>Detail about feature 1.</p>
</div>
<div class="feature">
<h3>Feature 2</h3>
<p>Detail about feature 2.</p>
</div>
<div class="feature">
<h3>Feature 3</h3>
<p>Detail about feature 3.</p>
</div>
</section>
<section class="testimonials">
<h2>Testimonials</h2>
<div class="testimonial">
<p>"This product changed my life!" - Customer A</p>
</div>
<div class="testimonial">
<p>"Amazing features and great support!" - Customer B</p>
</div>
</section>
<section class="call-to-action">
<h2>Ready to Get Started?</h2>
<a href="#" class="btn">Sign Up Now</a>
</section>
<footer class="footer">
<p>© 2024 Brand. All rights reserved.</p>
</footer>
</body>
</html>
❤15👍13👏1
6. Add Basic CSS Styling: Create a new file named
7. Customize and Refine: Adjust the layout and styling to fit your content and design preferences. Use CSS Grid or Flexbox for advanced layouts, and add custom styles to enhance the appearance.
8. Save and View: Save your
9. Resources:
- [Unbounce - Anatomy of a Landing Page](https://unbounce.com/landing-page-articles/anatomy-of-a-landing-page/)
- [HubSpot - Best Practices for Landing Page Design](https://blog.hubspot.com/marketing/landing-page-best-practices-list)
- [MDN Web Docs - HTML Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
10. Publish Your Landing Page: Once you're satisfied with your landing page, upload your HTML and CSS files to your hosting service to share it online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
styles.css and link it to your HTML document. Add styles for your layout, focusing on making it visually appealing. body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
color: #333;
}
.header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 50px 0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.nav-links {
list-style-type: none;
padding: 0;
}
.nav-links li {
display: inline;
margin: 0 10px;
}
.nav-links a {
color: white;
text-decoration: none;
}
.hero {
padding: 100px 20px;
}
.hero h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero p {
font-size: 18px;
margin-bottom: 40px;
}
.btn {
background-color: #333;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}
.features, .testimonials, .call-to-action {
padding: 50px 20px;
text-align: center;
}
.feature, .testimonial {
margin-bottom: 20px;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px 0;
}
7. Customize and Refine: Adjust the layout and styling to fit your content and design preferences. Use CSS Grid or Flexbox for advanced layouts, and add custom styles to enhance the appearance.
8. Save and View: Save your
landing_page.html and styles.css files. Open the HTML file in a web browser to see how the layout looks. Make adjustments as needed.9. Resources:
- [Unbounce - Anatomy of a Landing Page](https://unbounce.com/landing-page-articles/anatomy-of-a-landing-page/)
- [HubSpot - Best Practices for Landing Page Design](https://blog.hubspot.com/marketing/landing-page-best-practices-list)
- [MDN Web Docs - HTML Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
10. Publish Your Landing Page: Once you're satisfied with your landing page, upload your HTML and CSS files to your hosting service to share it online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
👍12❤8🔥6
21 Days Web Development Project Plan
Day 16: Parallax Scrolling
1. Understand Parallax Scrolling: Parallax scrolling is a web design technique where background images move slower than the foreground content, creating an illusion of depth.
2. Set Up Your Project: Open your text editor and create a new file named
3. Set Up the Structure: Add the basic structure of an HTML document, including the
4. Create the Parallax Sections: Inside the
5. Add Basic CSS Styling: Create a new file named
6. Test the Parallax Effect: Save your
7. Enhance the Effect: Experiment with different background images, content positioning, and additional CSS properties to enhance the parallax effect. You can also add more sections with varying background speeds for a more dynamic experience.
8. Resources:
- [MDN Web Docs - Using CSS Backgrounds](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
- [CSS Tricks - Parallax](https://css-tricks.com/snippets/css/parallax-background-image/)
- [W3Schools - Parallax Scrolling](https://www.w3schools.com/howto/howto_css_parallax.asp)
9. Publish Your Parallax Page: Once you're satisfied with your parallax scrolling effect, upload your HTML and CSS files to your hosting service to share it online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
Day 16: Parallax Scrolling
1. Understand Parallax Scrolling: Parallax scrolling is a web design technique where background images move slower than the foreground content, creating an illusion of depth.
2. Set Up Your Project: Open your text editor and create a new file named
parallax_scrolling.html.3. Set Up the Structure: Add the basic structure of an HTML document, including the
<!DOCTYPE html> declaration, <html>, <head>, and <body> tags.4. Create the Parallax Sections: Inside the
<body> tag, create sections that will have parallax background images and regular content sections.<!DOCTYPE html>
<html>
<head>
<title>Parallax Scrolling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax-section" id="section1">
<div class="content">
<h1>Welcome to Our Site</h1>
<p>Scroll down to see the parallax effect in action.</p>
</div>
</div>
<div class="content-section">
<h2>About Us</h2>
<p>This is a regular content section.</p>
</div>
<div class="parallax-section" id="section2">
<div class="content">
<h1>Our Services</h1>
<p>More information about what we offer.</p>
</div>
</div>
<div class="content-section">
<h2>Contact Us</h2>
<p>Get in touch with us.</p>
</div>
</body>
</html>
5. Add Basic CSS Styling: Create a new file named
styles.css and link it to your HTML document. Add styles for your layout, focusing on the parallax effect. body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.parallax-section {
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#section1 {
background-image: url('https://via.placeholder.com/1200x800');
}
#section2 {
background-image: url('https://via.placeholder.com/1200x800');
}
.content {
text-align: center;
padding: 50px;
background: rgba(0, 0, 0, 0.5);
color: white;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.content-section {
padding: 50px;
text-align: center;
background-color: #f8f8f8;
}
.content-section h2, .content-section p {
margin: 0 0 20px;
}
6. Test the Parallax Effect: Save your
parallax_scrolling.html and styles.css files. Open the HTML file in a web browser and scroll through the page to see the parallax effect. Adjust the background images and content as needed.7. Enhance the Effect: Experiment with different background images, content positioning, and additional CSS properties to enhance the parallax effect. You can also add more sections with varying background speeds for a more dynamic experience.
8. Resources:
- [MDN Web Docs - Using CSS Backgrounds](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
- [CSS Tricks - Parallax](https://css-tricks.com/snippets/css/parallax-background-image/)
- [W3Schools - Parallax Scrolling](https://www.w3schools.com/howto/howto_css_parallax.asp)
9. Publish Your Parallax Page: Once you're satisfied with your parallax scrolling effect, upload your HTML and CSS files to your hosting service to share it online.
Web Development Best Resources: https://topmate.io/coding/930165
Share with credits: https://t.iss.one/webdevcoursefree
ENJOY LEARNING 👍👍
❤16👍9