My Full Stack Development Learning Journey: Week

Hey everyone, in this week, I learned about the following HTML concepts:

Live Preview Extension in VSCode
Client-Server Interaction
Basic Structure of an HTML File
Text Content Elements
Media Integration
Forms and Input Tags
Semantic Tags & SEO

These are the steps I took to grasp the concepts:

Live Preview Extension in VSCode:
- I used the Live Preview extension in VSCode, which eliminates the need to refresh the browser manually.
- This extension allows real-time previews side by side as I make changes to the code.
- It helped me test layouts quickly and debug HTML issues without switching between tabs.
Client-Server Interaction:
- I learned that web browsers act as clients that send requests to servers and receive responses.
- Next, the Servers respond by delivering resources such as HTML, CSS, JS, and other assets.
- Understanding this client-server relationship is very useful particularly when dealing with external resources like APIs or media.
Basic Structure of an HTML File:
- <!DOCTYPE>: Declares the HTML version to the browser.
- <head>: Contains metadata like the page title and links to stylesheets or scripts.
- <body>: Includes the visible content that users interact with on the webpage.
Text Content Elements:
- Used headings (<h1> to <h6>) for structuring web content.
- Paragraphs (<p>) were used to organize blocks of text.
- Hyperlinks using anchor tags (<a>) were used to navigate between pages or external websites
Media Integration:
- Use Images using the <img> tag with attributes like src for the file path and alt text for accessibility.
- Also, Integrating audio content using <audio> and video content with <video> elements to create more interactive content.
Forms and Input Tags:
- Forms and input tags play a vital role in collecting user data on websites such as:
  - Text fields (<input type="text">) for user text input.
  - Checkboxes and radio buttons for multiple-choice options.
  - Submit buttons (<button>) for form submissions.
Semantic Tags & SEO:
- Commonly used semantic tags are <article>, <section>, <nav>, <header>, and <footer>.
- These tags help browsers and search engines understand the meaning and structure of content.
- Semantic HTML improves accessibility and enhances SEO performance by organizing content hierarchically.

These are the problems that I encountered:

Error Accessing Localhost Websites on Mobile.
Facing Image Quality Issues When Resizing.
SVG Image Not Displaying Error in Browser.
Semantic vs Non-Semantic Tags.

This is how I solved those problems:

1. Error Accessing Localhost Websites on Mobile:

Problem: When I attempted to preview a website developed on my local computer by accessing it from a mobile device using the IPv4 address generated in Live Preview (https://192.168.1.44:3000/index.html).

I encountered an error message saying:

Solution: To fix this error, we can use 2 methods:

Disable the Firewall for the Private Network:

One common reason for this issue is that the computer's firewall might be blocking the connection. Here's how I resolved it:
- Open Wi-Fi Settings on your computer.
- Navigate to Configure Firewall and Security Settings.
- Under the Private Network section, turn off the firewall.
- Once the firewall was disabled, I could access the website on my mobile without any issues.

⚠️ Note: Remember to re-enable the firewall once you are done testing to maintain your computer's security.

Use Built-in Mobile Preview on Desktop:

If the first solution doesn't work or you're concerned about disabling the firewall, you can preview your website directly on your computer using Chrome's DevTools:
- Open your website in the browser on your computer.
- Right-click anywhere on the page and select Inspect.
- Click on the Toggle Device Toolbar icon or use the shortcut Ctrl + Shift + M.
- Select any mobile device from the list at the top for a responsive preview.

This approach mimics a mobile environment without requiring an actual mobile device.

2. Facing Image Quality Issues When Resizing:

Problem: While developing websites, I encountered an issue where images in JPG or PNG format lost quality when resized. This happens especially for responsive designs where images need to scale across different screen sizes.

Solution: Use SVG (Scalable Vector Graphics) format instead of JPG or PNG. SVGs are vector-based graphics that maintain their quality regardless of size, making them ideal for scalable designs.

Examples:

Embedding an SVG tag directly in a HTML file:

<svg height="100" width="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>

Using SVG Files as Image Tags:

<img src="image.svg" alt="Sample SVG">

3. SVG Image Not Displaying Error in Browser:

Problem: Instead of Embedding an SVG tag directly in an HTML file, I created an SVG file with the following code in image.svg:

<svg height="100" width="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>

Then, I used this syntax in index.html to display the image:

<img src="image.svg" alt="Sample SVG">

However, despite the correct code, the image didn’t appear in the browser, which was confusing and frustrating.

Solution:

The problem was that the SVG file was missing a crucial attribute: the XML namespace (xmlns). Without it, browsers may fail to render the SVG correctly.
The xmlns attribute specifies the XML namespace for SVG content (http://www.w3.org/2000/svg).
Adding this ensures the browser recognizes the content as an SVG and renders it properly.

Corrected Code for image.svg:

<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

4. Semantic vs Non-Semantic Tags:

Problem: While learning HTML, confusion between semantic and non-semantic tags is common for beginners.

Solution:

Semantic Tags:

Semantic Tags were introduced from HTML5 onwards, which are used to arrange things in a good and clean way making it easier for developers and browsers to understand the page structure.

Use of Semantic tags are:

Improves code readability
Enhances SEO by helping search engines better understand content
Increases accessibility for assistive technologies
Helps create well-structured, maintainable HTML

Examples of Semantic Tags: <header>, <nav>, <section>, <article>, <aside> and <footer>

Non-Semantic Tags:

Non-semantic tags don’t provide specific information about the content they wrap. It can only be used when semantic meaning isn't required, such as for applying custom CSS or handling dynamic components.

Examples of Non-Semantic Tags: <div>, <span>, <b>, <i>

These are the resources that helped me learn:

MDN Web Docs - HTML
w3schools
My GitHub Repository - Link

My Full Stack Development Learning Journey: Week - 1

Table of contents