Week 1: Diving into HTML and CSS - The Building Blocks of the Web
Pratham
Posted on August 12, 2024
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are the foundation of web development. Here's what I covered today:
HTML Essentials:
Document structure
<!DOCTYPE html>,<html>,<head>,<body>Basic tags:
<h1> to <h6>,<p>,<div>,<span>Lists:
<ul>,<ol>,<li>Links:
<a href="...">Images:
<img src="..." alt="...">Tables:
<table>,<tr>,<td>,<th>Forms:
<form>,<input>,<textarea>,<button>Semantic HTML5 elements:
<header>,<nav>,<main>,<article>,<section>,<aside>,<footer>Meta tags for SEO and responsiveness
CSS Fundamentals:
Inline, internal, and external CSS
Selectors: element, class, ID, attribute, pseudo-class, and pseudo-element
Basic properties:
color,background-color,font-size,margin,paddingBox model:
width,height,border,box-sizingText styling:
font-family,font-weight,text-align,text-decorationLayout properties:
display,position,floatFlexbox basics: display:
flex,flex-direction,ustify-content,align-itemsCSS Grid introduction: display:
grid,grid-template-columns,grid-template-rowsResponsive design basics: media queries, viewport meta tag
CSS variables (custom properties)
Transitions and simple animations
What I Built
To practice these concepts, I created a simple "About Me" webpage. Here's an expanded snippet of the HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Page</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>Hello, I'm Pratham. I'm learning web development!</p>
<img src="profile.jpg" alt="My profile picture">
</section>
<section id="skills">
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Learning JavaScript</li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form>
<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>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send</button>
</form>
</section>
</main>
<footer>
<p>© 2024 Pratham. All rights reserved.</p>
</footer>
</body>
</html>
CSS:
:root {
--primary-color: #333;
--secondary-color: #666;
--background-color: #f4f4f4;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: var(--background-color);
}
header {
background-color: var(--primary-color);
color: white;
padding: 1rem;
}
nav ul {
display: flex;
list-style-type: none;
padding: 0;
}
nav ul li {
margin-right: 1rem;
}
nav a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
h1, h2 {
color: var(--primary-color);
}
p {
color: var(--secondary-color);
}
img {
max-width: 100%;
height: auto;
}
form {
display: grid;
gap: 1rem;
}
button {
background-color: var(--primary-color);
color: white;
padding: 0.5rem 1rem;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: var(--secondary-color);
}
@media (max-width: 600px) {
nav ul {
flex-direction: column;
}
}
Challenges Faced
Understanding the box model in CSS
Remembering to close all HTML tags properly
Grasping the cascading nature of CSS
Key Takeaways
HTML provides the structure, while CSS brings the style.
The cascade in CSS can be both powerful and tricky.
Browser developer tools are invaluable for inspecting and debugging.
What's Next
Tomorrow, I plan to dive deeper into CSS layouts, exploring well and will create a clone of any website.
Posted on August 12, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
