Forem: Angshuman

My Journey Learning CSS - Styling Lists, Creating Navbars, and Understanding Overflow🚀 (Day-13)

Angshuman — Mon, 24 Feb 2025 03:40:14 +0000

CSS is an essential part of web development, allowing us to design and structure our web pages effectively. Today, we’re going to dive into three fundamental CSS concepts: styling lists, creating a navigation bar using lists, and managing content overflow. Let’s break them down one by one!

📊 Styling Lists in CSS

Lists are a common HTML element used for menus, navigation, and content organization. CSS provides several ways to style lists to make them visually appealing.

Key Properties for Styling Lists

list-style-type – Controls the appearance of the list marker.

disc (default)

circle

square

none (removes the marker)

list-style-position – Determines where the marker appears.

inside (marker is inside the content)

outside (marker is outside the content)

list-style – A shorthand property to set both list-style-type and list-style-position together.

Example: Styling an Unordered List

ul {
    list-style-type: square;
    list-style-position: inside;
    color: #333;
    font-size: 18px;
}

This will style an unordered list with square markers inside the content, making it look neat and professional.

📊 Creating a Navigation Bar Using Lists

Navigation bars are a crucial part of any website, and lists (<ul> and <li>) are commonly used to structure them. Using CSS, we can transform a simple list into a stylish and functional navbar.

Steps to Create a Simple Navbar

Remove default list styles using list-style: none;.

Display list items inline to create a horizontal layout.

Add padding, margins, and background colors for styling.

📊 Understanding the CSS Overflow Property

The overflow property in CSS helps control how content behaves when it exceeds its container. Without proper handling, overflowing content can break layouts and cause unwanted scrolling.

Common overflow Values

visible (default) – Content spills out of its container.

hidden – Clips any overflow content, making it invisible.

scroll – Adds both horizontal and vertical scrollbars.

auto – Adds scrollbars only when needed.

Example: Controlling Overflow

Using overflow: hidden;, any excess content will be clipped and not visible outside the container.

🎯 Conclusion

Today, we explored three essential CSS topics:

Styling lists to improve their appearance.

Using lists to create a navigation bar, making our menus clean and responsive.

Understanding the overflow property to manage content visibility.

By mastering these concepts, you’ll be able to build more visually appealing and functional websites. Keep experimenting, and happy coding! 🚀

My Journey Learning CSS - Display Properties, Shadows and Outlines🚀 (Day-12)

Angshuman — Tue, 18 Feb 2025 03:49:43 +0000

CSS (Cascading Style Sheets) is an essential part of web development, controlling the layout and design of a webpage. Today, we’ll explore key CSS concepts, including display properties, flexbox, grid, shadows, and outlines.

📊 1. Understanding Display Properties

The display property in CSS determines how an element behaves in the layout. Here are some commonly used values:

a. display: none; vs visibility: hidden;

display: none; → Removes the element from the layout entirely.

visibility: hidden; → Hides the element but it still occupies space.

b. Block vs Inline vs Inline-Block

display: block; → Element takes the full width of its container (e.g., <div>, <p>).

display: inline; → Element only takes up as much space as needed (e.g., <span>, <a>).

display: inline-block; → Behaves like an inline element but allows setting width and height.

📊 2. CSS Flexbox: Simplifying Layouts

Flexbox (display: flex;) is a powerful tool for arranging elements efficiently in a single dimension.

Key Flexbox Properties:

justify-content: → Aligns items horizontally.

center → Centers items.

space-between → Distributes space between items.

space-around → Spaces items evenly with padding.

align-items: → Aligns items vertically.

center → Centers items.

flex-start → Aligns items at the top.

flex-end → Aligns items at the bottom.

flex-direction: → Defines the direction of items.

row (default) → Items placed horizontally.

column → Items placed vertically.

Example of Flexbox:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

📊 3. CSS Grid: Two-Dimensional Layout

Grid (display: grid;) provides a structured way to create complex layouts.

Key Grid Properties:

grid-template-columns: → Defines the number of columns.

grid-template-rows: → Defines the number of rows.

gap: → Adds spacing between items.

Example of CSS Grid:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

📊 4. Adding Depth with Shadows

Shadows enhance the appearance of elements and text.

Box Shadow:

.box {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

Text Shadow:

.text {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

📊 5. Outlines: Highlighting Elements

Unlike borders, outlines do not take up space and are useful for accessibility.

Example of Outline:

.button {
  outline: 2px solid blue;
  outline-offset: 4px;
}

🎯 Conclusion

Mastering CSS properties like display, flexbox, grid, shadows, and outlines helps create responsive and visually appealing layouts. By practicing these concepts, you’ll gain better control over your webpage designs.

What CSS topics would you like to explore next? Let me know in the comments! 🚀

My Journey Learning CSS - Sizing Units🚀 (Day-11)

Angshuman — Mon, 17 Feb 2025 04:14:04 +0000

When it comes to web design, understanding CSS sizing units is essential for creating layouts that are both flexible and responsive. If you’ve ever been confused about when to use px, em, rem, %, or viewport units like vw and vh, this blog post will clarify everything for you.

1) Absolute vs. Relative Units

CSS offers both absolute and relative units for sizing elements. Absolute units, like px, remain fixed regardless of the parent element, whereas relative units adjust based on other elements or viewport sizes.

2) Absolute Sizing Unit

px (Pixels)

Pixels (px) are fixed-size units that do not change based on the parent element or screen size. They offer precise control over an element’s dimensions but are not ideal for fully responsive designs.

3) Relative Sizing Units

% (Percentage)

The percentage unit (%) is relative to the parent element’s size. This makes it useful for flexible layouts.

em (Relative to Parent Font Size)

em is relative to the font size of its parent element. If the parent’s font size is 16px, then 1em equals 16px.

rem (Relative to Root Font Size)

Unlike em, rem (root em) is based on the root element’s font size (html). This ensures consistency across nested elements.

4) Viewport Units (Responsive Design)

Viewport units make elements scale based on the browser window size.

a) vw (Viewport Width)

1vw = 1% of the viewport’s width.

b) vh (Viewport Height)

1vh = 1% of the viewport’s height.

c) vmin and vmax

vmin = 1% of the smaller viewport dimension (width or height).

vmax = 1% of the larger viewport dimension.

5) Min and Max Constraints

These units help prevent elements from becoming too small or too large.

min-width / min-height

Ensures an element never goes below a specified size.

max-width / max-height

Restricts an element from growing beyond a certain size.

🎯 Conclusion

Each CSS unit serves a different purpose:

Use px for fixed-size elements.

Use % for flexible layouts relative to the parent.

Use em and rem for typography scaling.

Use vw, vh, vmin, and vmax for responsive designs.

Use min-width and max-width for constraints.

Mastering these units will help you build scalable, adaptable, and user-friendly web layouts. Which unit do you find most useful in your projects? Let me know in the comments! 🚀

My Journey Learning CSS - Specificity and Casacade Algorithm 🚀 (Day-10)

Angshuman — Mon, 10 Feb 2025 03:41:37 +0000

📊 Understanding CSS Specificity and the Cascade Algorithm

CSS (Cascading Style Sheets) is a powerful tool for styling web pages, but it can sometimes be tricky to determine why certain styles override others. This is where CSS specificity and the cascade algorithm come into play. Understanding these concepts can help you write cleaner and more predictable styles.

📌 What is CSS Specificity?

Specificity in CSS determines which rules take precedence when multiple rules apply to the same element. It’s calculated using a hierarchical scoring system based on the types of selectors used.

📌 Specificity Hierarchy

Each selector type has a different weight:

Inline styles (e.g., style="color: red;") → Highest specificity (1,0,0,0).

ID selectors (e.g., #id) → High specificity (0,1,0,0).

Class, attribute, and pseudo-class selectors (e.g., .class, [attribute], :hover) → Medium specificity (0,0,1,0).

Element and pseudo-element selectors (e.g., div, p, ::before) → Lowest specificity (0,0,0,1).

📊 Understanding the CSS Cascade Algorithm

The cascade determines the final style when multiple rules target the same element. It follows a strict order:

1) Origin of the Styles

Browser default styles (lowest priority)

User-defined styles (e.g., custom styles set in the browser)

Author-defined styles (CSS written by the developer)

Inline styles (highest priority unless overridden by !important)

2) Specificity

The rule with higher specificity takes precedence.

3) Importance (!important)

Any rule marked with !important overrides other rules, regardless of specificity.

4) Source Order

If specificity and importance are the same, the last declared rule in the stylesheet wins.

📌 Best Practices for Managing Specificity & Cascade

Use low-specificity selectors when possible to keep styles flexible and reusable.

Avoid using !important unless absolutely necessary, as it can make debugging difficult.

Use consistent naming conventions (e.g., BEM methodology) to avoid specificity conflicts.

Keep stylesheets organized, grouping related styles together and maintaining a clear structure.

Leverage CSS variables and utility classes to reduce the need for high-specificity selectors

🎯 Final Thoughts

Understanding CSS specificity and the cascade algorithm is essential for writing clean, maintainable, and predictable styles. By following best practices and structuring stylesheets thoughtfully, you can avoid common pitfalls and ensure your styles behave as expected.

Want to test your knowledge? Try modifying styles in a live project and see how specificity and cascade influence the final appearance!

Happy coding! 🎨✨

My Journey Learning CSS - Fonts, Text and Color Properties 🚀 (Day-9)

Angshuman — Fri, 07 Feb 2025 11:08:04 +0000

Whether you're a beginner or looking to refine your skills, understanding font properties, spacing, and styling is essential. In this post, we’ll explore the fundamentals of typography in web development and how to implement them in HTML and CSS.

Understanding Font Properties 📊

Fonts shape the visual appeal of a website and impact how users perceive content. Here are some key font properties:

. Font Family

The font-family property defines the typeface used on a webpage. It’s always a good practice to include multiple font choices as fallbacks in case a browser doesn't support a specific font.

. Font Size

Font size determines how large or small the text appears. Common units include:

px (pixels) – fixed size.

em – relative to the parent element.

rem – relative to the root element.

% – percentage of the parent element's font size.

. Font Weight

The font-weight property controls how bold or light the text appears. It accepts predefined values like normal, bold, lighter, or numeric values from 100 (thin) to 900 (extra bold).

. Line Height

The line-height property adjusts the space between lines of text, improving readability.

. Letter Spacing

Letter spacing determines the space between characters in a word.

Importing and Applying Fonts 📊

Using custom fonts enhances the uniqueness of your website. One of the easiest ways to import fonts is through Google Fonts.

Importing Fonts via Google Fonts

Visit Google Fonts.

Select a font and copy the provided <link> tag.

Paste it inside the <head> section of your HTML file.

Text Decoration and Colors 📊

Enhancing text styling makes content visually appealing. Here are some common properties:

. Text Decoration

The text-decoration property controls underlining, overlining, and strikethrough effects.

Example:

. Text Color

The color property sets the font color using named colors, hexadecimal (#000000), RGB (rgb(0,0,0)), or HSL values.

Example:

Conclusion 🎯

Mastering typography is essential for creating visually appealing and readable web pages. By understanding font properties, spacing, and styling, you can significantly enhance your website’s design. Experiment with different fonts and styles to find what works best for your project!

My Journey Learning CSS - Selectors and Box Model 🚀 (Day-8)

Angshuman — Wed, 05 Feb 2025 04:10:51 +0000

Cascading Style Sheets (CSS) is a fundamental part of web design, allowing developers to control the look and feel of a webpage. Today, we'll dive into essential CSS selectors and the CSS Box Model, along with an interesting concept known as Margin Collapse

Understanding CSS Selectors 📊

CSS selectors are used to target and style specific HTML elements. Here are some key types of selectors:

Element Selector

This selector applies styles to all instances of a specific HTML element.

div { color: blue; }

The above rule applies to all <p> elements, making the text color blue.

Class Selector

Class selectors are reusable and apply styles to elements with a specific class.

.my-class { font-size: 18px; }

Apply this style by adding class="my-class" to an element.

ID Selector

ID selectors target a unique element with a specific ID.

#unique-id { background-color: yellow; }

Since IDs are unique, this style applies only to one element per page.

Child Selector

This targets only direct child elements.

div > p { color: red; }

Only <p> elements directly inside a <div> are styled.

Descendant Selector

Unlike the child selector, this applies styles to all matching nested elements.

div p { color: green; }

This rule affects all <p> elements inside a <div>, no matter how deeply nested they are.

Universal Selector

Applies styles to all elements on a page.

* { margin: 0; padding: 0; }

Useful for resetting default browser styles.

Pseudo Selectors

These include pseudo-classes and pseudo-elements:

CSS Box Model 📊

Every element in CSS is structured as a box consisting of the following:

Content - The actual text, image, or media.
Padding - Space between the content and border.
Border - A boundary around the element.
Margin - Space outside the element, affecting its distance from others.

Example of Box Model

Margin Collapse 📊

Margin collapse occurs when vertical margins of adjacent elements overlap instead of adding up.

Example

Instead of 50px (20px + 30px), the actual margin will be 30px (the larger value).

Avoiding Margin Collapse

Use padding instead of margin or add overflow: hidden; to the parent container.

Conclusion 🎯

Understanding CSS selectors and the box model is crucial for designing responsive and well-structured web pages. Experiment with different selectors and box model properties to refine your CSS skills!

My Journey Learning CSS - Types-Inline, Internal, External 🚀 (Day-7)

Angshuman — Tue, 04 Feb 2025 02:37:40 +0000

📌 Before Starting let me write on (Day-6)

I created a small project on html from what i learned and here”s is the pic:

Now with today’s topic-

CSS (Cascading Style Sheets) is essential for styling web pages, and there are multiple ways to integrate CSS into an HTML document. In this blog, we’ll explore the three primary methods: Inline CSS, Internal CSS, and External CSS—when to use them and why external CSS is the best practice for large-scale projects.

📊 1. Inline CSS (Avoid if Possible)

Inline CSS is applied directly to an HTML element using the style attribute. While it may seem convenient for quick changes, it is generally not recommended because it makes code harder to maintain and update.

When to Use:

Quick fixes or testing without modifying stylesheets.
When styling only a single element.

Why Avoid It?

Difficult to manage as the website grows.
Reduces code readability and reusability.
Overrides styles from internal or external stylesheets, making debugging harder.

📊 2. Internal CSS (For Small Web Pages)

Internal CSS is defined inside a <style> tag within the

section of an HTML document. It is useful for styling a single HTML page without needing an external file.

When to Use:

Small projects or single-page websites.
When external CSS is unnecessary.

Limitations:

Not ideal for larger projects with multiple pages.
Can make the HTML file bloated.

📊 3. External CSS (Best for Large Websites)

External CSS is written in a separate .css file and linked to the HTML document using the <link> tag. This is the most efficient and scalable method for styling websites.

When to Use:

For production-grade websites with multiple pages.
When maintaining consistent styling across an entire site.
For better performance by caching styles in the browser.
Benefits:
Keeps HTML clean and organized.
Improves maintainability and reusability of styles.
Enhances page loading speed when CSS files are cached.

🎯 Conclusion

Each CSS method has its use case, but external CSS is the best approach for professional web development. Avoid inline CSS whenever possible, use internal CSS only for small projects, and adopt external CSS for scalable and maintainable code.

Mastering CSS is essential for building beautiful, functional websites. Keep practicing, and happy coding! 🚀

My Journey Learning HTML ID and Classes, Multimedia,SVG, Iframe and various Entities and tags 🚀(Day-5)

Angshuman — Sat, 01 Feb 2025 04:39:13 +0000

HTML is the backbone of every website, and today, I explored some fundamental concepts that make web development more structured and interactive. From IDs and classes to embedding multimedia and structuring content effectively, here's a summary of my learning journey.

Understanding ID and Classes in HTML 📊

One of the most important aspects of HTML is organizing elements efficiently. IDs and classes help us achieve this:

ID: A unique identifier for an element, often used for styling or creating anchor links for quick navigation.

Class: A reusable attribute that can be applied to multiple elements for styling consistency.

Using IDs, we can create direct links within a webpage

This makes it easy to jump to specific sections within a page.

Embedding Audio and Video in Webpages

Multimedia content enhances user experience. HTML provides the <audio> and <video> tags to embed sound and video files. Some essential attributes include

autoplay: Plays the media automatically.

loop: Repeats the media once it ends.

controls: Displays playback controls.

Introduction to SVG Images

Scalable Vector Graphics (SVG) allow us to render high-quality images that remain crisp at any resolution. Unlike traditional image formats (JPEG, PNG), SVG files are defined using XML-based markup, making them ideal for icons and logos.

Using iFrame to Embed External Content

The tag lets us embed other websites, videos, or maps inside a webpage. This feature is useful for displaying external content without redirecting users away.

Example:

The Power of Semantic HTML

Semantic elements improve the structure, readability, and SEO of a webpage. Some commonly used semantic tags include:

<header>: Represents the introductory section.

<section>: Groups related content.

<article>: Defines self-contained content.

<footer>: Represents the bottom section of a page.

Using semantic tags makes websites more accessible and easier to maintain.

Working with HTML Entities

HTML entities allow us to display special characters that might otherwise be interpreted as code. Common entities include:

< for <

> for >

© for ©

These ensure that the correct symbols appear on the webpage without breaking the HTML structure.

Quotation and Code Formatting Tags

HTML provides several tags to display quoted text and code snippets effectively:

<blockquote>: For block quotes.

<q>: For inline quotations.

<code>: For displaying code.

<pre>: For preserving formatting in code blocks.

<kbd>: For representing keyboard input.

These tags enhance readability, especially in technical documentation and blogs

Conclusion 🎯

Today’s learning covered essential HTML concepts that are crucial for web development. From structuring content with IDs and classes to embedding multimedia and using semantic tags, each of these topics contributes to a well-organized, accessible, and visually appealing website.

Excited to continue my journey and explore more web development concepts!

My Journey Learning HTML FORMS and Inline vs. Block Elements 🚀(Day-4)

Angshuman — Fri, 31 Jan 2025 04:26:24 +0000

Understanding HTML Forms and Inline vs. Block Elements 📊

HTML forms are an essential part of web development, allowing users to input and submit data to a server. Today, we will explore how forms work, the difference between GET and POST requests, various input types, and the distinction between inline and block elements.

GET vs. POST Requests

Forms use HTTP methods to send data to a server. The two most common methods are:

GET Request:
1.Sends data as URL parameters.
2.Less secure since data appears in the URL.
3.Used for search queries and retrieving information.

POST Request:
1.Sends data in the request body.
2.More secure as data is not visible in the URL.
3.Used for form submissions, login credentials, and sensitive data.

Common Form Elements

1.Input Fields
2.Labels: Improve accessibility and usability.
3.Text area: Allows multi-line text input.
4.Select Dropdown
Example:

Inline vs. Block Elements 📌

Understanding the difference between inline and block elements is crucial for layout design:

Inline Elements:
. Do not start on a new line.
. Take up only as much width as necessary.
Examples: <span>, <a>, <input>, <button>.

Block Elements:
. Start on a new line and take up the full width available.
Examples: <div>, <p>, <form>, <h1> to <h6>.

Conclusion 🎯

Understanding HTML forms and their elements is crucial for creating interactive web pages. Knowing when to use GET vs. POST requests, how different input types work, and the distinction between inline and block elements will help you build better web applications.

Happy coding! 😊

My Journey Learning HTML & SEO Optimization 🚀(Day-3)

Angshuman — Thu, 30 Jan 2025 04:54:58 +0000

Introduction

Today was an exciting day in my web development journey as I explored essential HTML concepts and dived into the basics of SEO optimization. In this blog, I'll share what I learned about adding images, tables, lists, line breaks, and SEO best practices that improve user experience.

📌 Adding Images in HTML

One of the fundamental elements in HTML is the tag, which is used to insert images into a webpage. I learned how to:

Use the <img> tag with the src attribute to specify an image.

Set the width and height to control its dimensions.

Optimize images for performance and responsiveness.

Setting the alt attribute improves accessibility and helps in SEO ranking by allowing search engines to understand the image content.

📊 Understanding HTML Tables

HTML tables allow us to display data in a structured way. I learned about:

The <thead>, <tfoot>, and <tbody> sections for organizing table content.

Adding captions using the <caption> tag.

Structuring rows with <tr> and columns with <td>.

learned about colspan and Rowspan

🔥 The Function of `<br>` in HTML

The <br> tag is used to insert line breaks within content, making text more readable. Unlike paragraphs (<p>), it doesn’t add extra spacing.

📜 HTML Lists & Their Types

Lists play a crucial role in organizing content. I learned about three types of lists:

Ordered Lists (<ol>) – Displays items in numerical order.

Unordered Lists (<ul>) – Displays items with bullet points.

Description Lists (<dl>) – Used for term-definition pairs.

By changing the type attribute in ordered lists, we can use different numbering styles (e.g., 1, A, i).

🚀 SEO & User Experience Optimization in HTML

Beyond structuring web pages, SEO (Search Engine Optimization) plays a major role in improving a website’s visibility. I explored:

✅ Core Web Vitals
Google uses these metrics to evaluate a website’s user experience:

CLS (Cumulative Layout Shift): Measures visual stability. The less it is the better it is

LCP (Largest Contentful Paint): Measures loading performance.

FID (First Input Delay): Measures interactivity and responsiveness.

✅ Inspection To check CWV go to your website and click on inspect and then go to lighthouse there u can see analyzed reports of your website

✅ Meta Description & Keywords
Meta tags provide search engines with a summary of the webpage

Adding well-structured meta descriptions and keywords helps boost a website’s ranking on search engines.

🎯 Conclusion

Today’s learning journey helped me understand both HTML structuring and SEO fundamentals. By implementing best practices, I can improve both design and user experience on web pages.

🚀 Stay tuned for more updates on my learning journey! 😊

2025 Game Plan: Learning, Building, and Thriving🚀

Angshuman — Wed, 29 Jan 2025 14:37:07 +0000

Before I dive into my roadmap, here’s a fun fact—I started out in management but made the leap into software and web development. At first, it felt intimidating, but now i can say it was the best decision I made! I'm loving the journey and excited to keep exploring and growing in this field.

As we have just started 2025(one month already gone), it's time to set goals, refine skills, and embark on new learning. This roadmap outlines the key milestones I aim to achieve in various aspects of life, from personal growth to professional aspirations.

📚 Learning & Skill Development

1. Master a New Programming Language: This year, I plan to learn Mern Stack and NextJS

2. Strengthen Skills: Get hands-on experience with the tech stacks i learned
3. Refining Technical Writing: Publish technical blogs to share knowledge and my journey

4. Learn Data Structures & Algorithms (DSA): Improve problem-solving skills and coding efficiency by practicing DSA regularly.

🚀 Side Projects & Open Source Contributions

1. Develop a Personal Productivity App: Build an open-source tool for task management and goal tracking,Personal Blog and Portfolio Web

2. Engage in MERN Stack Open Source Projects: Contribute to projects like freeCodeCamp, Mattermost, Rocket.Chat, or Strapi.

3. Contribute to Open Source: Actively participate in at least three open-source projects.

4.Hackathon Participation: Join at least two hackathons to collaborate and innovate with other developers.

💼 Career & Professional Growth

1. Achieve a Technical Certification: Cloud Computing certification.

2. Attend Tech Conferences: Network with industry leaders at events like KubeCon or PyCon.

3. Course: Learn Database Management System

4. Mentor & Give Back: Help newcomers in tech by sharing my journey which will give them an idea how to start and offering guidance.

🎯 Final Thoughts

2025 is a year of exploration, learning, and impact. By following this roadmap, I aim to grow both professionally and personally, making meaningful contributions to the tech community. Here’s to a year of progress and innovation!

Thank you so much for taking the time to read through my learning plan and roadmap 🤗. Your support means a lot!

Getting Started with HTML: My Learning Journey and First Project(Day-2)

Angshuman — Wed, 29 Jan 2025 13:21:05 +0000

Introduction

As I embark on my journey into web development, today marked an important milestone—I learned the basics of HTML and applied my knowledge to create a simple bookmark project. This blog serves as a reflection on what I learned and how I implemented it in a practical way.

Understanding the Basics of HTML

HTML (HyperText Markup Language) is the backbone of any webpage. Today, I explored its fundamental structure and key elements, which include:

✅ HTML Structure – Understanding the basic building blocks of a webpage.

HTML Attributes – Adding additional properties to elements.

✅ Headings – Organizing content hierarchically.

✅ Paragraphs – Structuring text content.

✅ Links – Creating hyperlinks to navigate
between web pages.

My First HTML Project: A Bookmark Page

To apply what I learned, I built a Bookmark Page using HTML. This simple project allows me to store quick access links to my favorite websites. Here’s a look at the structure

Previewing a Webpage on Mobile

One interesting skill I picked up today was how to preview my HTML page on my mobile device using VS Code's Live Preview. Here’s how I did it:
Find your IPv4 address – Open your terminal (Command Prompt or Bash) and type ipconfig (Windows) or ifconfig (Mac/Linux) to get your IPv4 address.
Configure VS Code – Open VS Code settings, locate Live Preview: Host IP, and enter your IPv4 address.
Restart VS Code – Close and reopen VS Code for changes to take effect.
Copy the Address – Start the Live Preview and copy the generated URL.
Open on Mobile – Paste the URL in your phone’s browser to see your webpage in action!

FINAL THOUGHTS

Learning HTML has been a fun and rewarding experience. Creating a bookmark project allowed me to apply my skills in a practical way. I’m excited to continue exploring CSS, JavaScript, and beyond to enhance my web development skills.

If you're starting your own journey, keep experimenting and building small projects—it’s the best way to learn! 🚀

Forem: Angshuman

My Journey Learning CSS - Styling Lists, Creating Navbars, and Understanding Overflow🚀 (Day-13)

My Journey Learning CSS - Display Properties, Shadows and Outlines🚀 (Day-12)

My Journey Learning CSS - Sizing Units🚀 (Day-11)

My Journey Learning CSS - Specificity and Casacade Algorithm 🚀 (Day-10)

My Journey Learning CSS - Fonts, Text and Color Properties 🚀 (Day-9)

My Journey Learning CSS - Selectors and Box Model 🚀 (Day-8)

Understanding CSS Selectors 📊

My Journey Learning CSS - Types-Inline, Internal, External 🚀 (Day-7)

My Journey Learning HTML ID and Classes, Multimedia,SVG, Iframe and various Entities and tags 🚀(Day-5)

My Journey Learning HTML FORMS and Inline vs. Block Elements 🚀(Day-4)

Understanding HTML Forms and Inline vs. Block Elements 📊

Inline vs. Block Elements 📌

My Journey Learning HTML & SEO Optimization 🚀(Day-3)

Introduction

📌 Adding Images in HTML

📊 Understanding HTML Tables

🔥 The Function of <br> in HTML

📜 HTML Lists & Their Types

🚀 SEO & User Experience Optimization in HTML

🎯 Conclusion

2025 Game Plan: Learning, Building, and Thriving🚀

📚 Learning & Skill Development

🚀 Side Projects & Open Source Contributions

💼 Career & Professional Growth

Getting Started with HTML: My Learning Journey and First Project(Day-2)

🔥 The Function of `<br>` in HTML