Web Development
Learn Web Development From Scratch Buy ads: https://telega.io/c/webdevcoursefree Admin: @Guideishere12
Больше
Network:35 829
Подписчики
+27624 часа
+1 3347 дней
+5 73930 дней
- Подписчики
- Просмотры постов
- ER - коэффициент вовлеченности
Загрузка данных...
Прирост подписчиков
Загрузка данных...
6. 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 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;
}
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.me/webdevcoursefree
ENJOY LEARNING 👍👍🔥 5👍 3❤ 2
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
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>❤ 9
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.
<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>
custom_styles.css and link it to your HTML document after the framework’s CSS file.
<link href="custom_styles.css" rel="stylesheet">
`
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.me/webdevcoursefree
ENJOY LEARNING 👍👍👍 12❤ 4😁 1
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
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>
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>👍 5❤ 1
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
❤ 24👍 18
Repost from N/a
00:28
Видео недоступноПоказать в Telegram
🐳 @whale – #1 licensed platform gaming and sportsbook on Telegram!
1mil+ people trust us, 226k native users on @whalesocials, and the community is only growing!😈
❤️🔥Our buns ❤️🔥
🥰Supports BTC, USDT, TON, CELO and NOT
🤑Instant withdrawals
🥰Regular giveaways
Share your thoughts and feedback of @Whale on Ton.app and Trustpilot. You make us better ❔
new Video.MP47.85 MB
👍 4❤ 2🤔 2🔥 1
🐳 Join us 🐳
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
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>
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;
}
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;
}
👍 23❤ 10
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
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>
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%;
}
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;
}
👍 23❤ 3