Forem: Pratham

Week 2: Crafting with HTML and CSS

Pratham — Wed, 14 Aug 2024 17:01:55 +0000

Hello dev.to community! It's day 2 of my web development journey, and today I tackled a practical project: creating a landing page inspired by the Visual Studio Code website. This exercise helped solidify my HTML and CSS knowledge while introducing me to some more advanced concepts.
Today's Achievement: VS Code-Inspired Landing Page
I chose to recreate elements of the VS Code website because it's a tool I'm using in my coding journey, and its design is both sleek and functional.

Key Components I Implemented:

1.Navigation Bar:

Logo
Menu items
Download button

2.Hero section

Headline
Sub-headline
Download buttons for different OS
Background image

3.Feature Highlights:

Grid layout of key VS Code features
Icons and brief descriptions

4.Footer:

Links to documentation, community, and social media

New Concepts I Learned:

CSS Grid for layout
Background images and overlays
Flexbox for navigation bar
CSS variables for consistent color scheme
Basic responsive design with media queries

Challenges I Faced:

Aligning items perfectly in the navigation bar
Making the hero section responsive
Choosing the right units (px vs rem vs %) for different elements

Key Takeaways:

Planning the layout before coding saves time
The importance of consistent spacing and alignment
How to use browser dev tools to troubleshoot CSS issues
The power of CSS Grid in creating responsive layouts

What's Next:
Next, I am going to start learning JavaScript. So to make dynamic webpages.

Resources I Used:

VS Code official website for reference
MDN Web Docs for CSS properties
CSS-Tricks for Flexbox and Grid guides

Week 1: Diving into HTML and CSS - The Building Blocks of the Web

Pratham — Mon, 12 Aug 2024 15:56:19 +0000

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, padding
Box model: width, height, border, box-sizing
Text styling: font-family, font-weight, text-align, text-decoration
Layout properties: display, position, float
Flexbox basics: display: flex, flex-direction, ustify-content, align-items
CSS Grid introduction: display: grid, grid-template-columns, grid-template-rows
Responsive 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>&copy; 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.

Embarking on My Web Dev and DevOps Journey

Pratham — Sun, 11 Aug 2024 08:17:42 +0000

Introduction:
Hello dev.to community! I'm Pratham, and I'm excited to share my journey as I dive into web development and DevOps over the next 100 days. I'll be focusing on the MERN stack (MongoDB, Express.js, React, and Node.js) and essential DevOps practices.
Why I'm Starting This Journey:
I am thinking to document my journey of learning Web Development. My goal is to connect with people around the globe. Want to share and learn from them too.
My Background:
I am graduate. I did my Bachelor's of Engineering in Computer.

What I Plan to Learn:
Data Structures and Algorithms with java.

MERN Stack:
MongoDB for database management
Express.js for backend development
React for frontend development
Node.js for server-side JavaScript
HTML, CSS, Javascript, Typescript

DevOps:
Version control with Git
CI/CD pipelines
Containerization with Docker
Cloud platforms (e.g., AWS or Azure)
Kubernetes

My Learning Plan:
Currently, I am enrolled in some Web Dev courses for better roadmap and learn from them.

I'm thrilled to embark on this journey and share my experiences with the dev.to community. I welcome any advice, resources, or encouragement you might have!

100DaysOfCode #webdev #MERN #DevOps #learning #beginners