Things I Learned This Week :-
This week, I dived into HTML and explored the core building blocks of web development. Here's a summary of the topics I covered:
Basic Structure of an HTML Website & Types of Tags
I learned the fundamental structure of an HTML document, including the essential elements like<!DOCTYPE html>,<html>,<head>, and<body>. Understanding the types of tags (block-level, inline, semantic) was also crucial to grasping how HTML organizes content. If you're curious to learn more, check out my keynotes.Heading, Paragraphs, and Anchor Tags
I explored the different heading tags (<h1>to<h6>) used for content hierarchy, and paragraph tags (<p>) for text. Anchor tags (<a>) were also covered, including how thetargetattribute controls how links open (e.g., in the same window or a new tab). Want to know more? Head over to my keynotes.Images, Lists, and Tables
I learned how to embed images using the<img>tag, create ordered and unordered lists with<ol>and<ul>, and design tables using<table>,<tr>,<th>, and<td>elements. These tags are essential for structuring various types of content on a webpage. Curious to explore them further? Refer to my keynotes.SEO, Core Web Vitals, and Lighthouse Reports
SEO (Search Engine Optimization) techniques were introduced to ensure better visibility on search engines. I also learned about Core Web Vitals, which measure site performance, and how to use Lighthouse reports to analyze and improve webpage quality. For more details, refer to my keynotes.Forms and Input Elements
I explored creating forms using<form>, along with input elements like<input>,<textarea>,<select>, and<option>. These tags are vital for gathering user data, and understanding their attributes was key to building interactive and dynamic web pages. For more on this, check out my keynotes.Inline Elements, Block Elements & Display Property
I learned to distinguish between inline and block-level elements and how the CSSdisplayproperty (e.g.,inline,block,none) controls their layout behavior. This helps in structuring and styling content effectively. Check out my keynotes for more details.Id & Classes
I practiced usingidandclassattributes to uniquely identify elements and apply CSS styles. These attributes make it easier to target specific elements for styling or JavaScript interactions. For more details, refer to my keynotes.Video, Audio & Media Tags
I explored how to embed multimedia content using the<video>and<audio>tags. I also learned to use the<svg>tag for vector graphics and the<iframe>tag to embed external content like maps or videos. Check out my keynotes for more details.Semantic Tags
Finally, I discovered the importance of semantic HTML tags like<article>,<section>,<header>, and<footer>. These tags not only improve accessibility but also help search engines better understand the structure of the page. Curious to explore them further? Refer to my keynotes.Entities, Code Tags & More
I learned about HTML entities, which are used to represent special characters like<and&to avoid conflicts. I explored the<code>tag for displaying inline code, and the<q>and<blockquote>tags for handling quotes. Additionally, I worked with the<pre>tag, which preserves formatting, and studied the importance of character sets, particularly UTF-8, to ensure proper encoding of text. Check out my keynotes for more details.
Steps That I Did :-
To kickstart my web development journey, I followed a structured learning path throughout this week. Here are the steps I took to get through the fundamentals of HTML:
Set Up My Development Environment
I made sure to set up a clean, efficient workspace by installing a code editor (VS Code) and setting up GitHub for version control. This ensured that my progress could be easily tracked and shared.Studied HTML Syntax and Structure
I started by understanding the basic syntax and structure of an HTML document. This involved learning the different types of tags (block, inline, and semantic tags) and how they contribute to a webpage’s overall layout.Explored Key HTML Elements
I worked through understanding core HTML elements such as headings, paragraphs, and anchor tags. I also explored various media elements like images, videos, and audio tags to understand how they are embedded in a webpage.Learned About Forms and Input Elements
I dove deep into form elements like<input>,<textarea>,<select>, and<option>, learning how to collect user data through forms. Understanding the attributes and behavior of these elements was essential for creating interactive web pages.Practiced Layout with Inline and Block Elements
To better understand layout control, I studied how inline and block-level elements behave. I also experimented with thedisplayproperty in CSS to adjust element layouts dynamically.Enhanced Accessibility with Semantic Tags
I learned the importance of semantic tags in improving accessibility and SEO. Tags like<header>,<footer>,<article>, and<section>help create a well-structured, meaningful HTML document that both users and search engines can navigate more easily.Evaluated Performance with SEO and Lighthouse
I explored tools like Lighthouse to assess the performance of my webpages, focusing on Core Web Vitals. I learned how optimizing SEO and improving page load speed can enhance the user experience.Explored Entities, Code Tags & More
I started by reviewing HTML syntax and tags, then experimented with using entities,
<code>, and quotation tags in real examples. I also practiced displaying code using the<pre>tag to preserve formatting, and made sure to include the<meta charset="UTF-8">tag for proper text encoding.Documented My Learnings
Throughout the week, I documented everything I learned in my keynotes on Hashnode. I made sure to take notes, experiment with code, and push all my work to GitHub for tracking progress and sharing with others.
Challenges I Faced & How I Overcame Them :-
As a beginner, diving into web development came with its fair share of challenges. Here are some of the hurdles I faced this week and how I tackled them:
Understanding the Structure of an HTML Document
Challenge: At first, understanding the structure of an HTML document was confusing. I wasn't sure where to place certain tags or how to organize them effectively.
How I Overcame It: I referred to examples and templates online, which helped me visualize the structure of a well-formed HTML document. I practiced writing simple documents and experimented with adding different elements to get a feel for their hierarchy.Working with Forms and Input Fields
Challenge: Forms and input elements seemed complicated, especially with all the different attributes likename,value,placeholder, etc. I wasn’t sure how to tie everything together.
How I Overcame It: I broke down each input element and studied its attributes one by one. I created a small contact form and tested it to see how each input type behaved, which helped me understand their functionality.Ensuring Proper SEO and Accessibility
Challenge: SEO and accessibility were concepts that felt overwhelming at first. I wasn't sure how to use semantic tags properly or what role they played in SEO.
How I Overcame It: I read blogs and tutorials on SEO best practices and the importance of semantic HTML. I started incorporating semantic tags in my projects and used tools like Lighthouse to check my pages for performance and accessibility issues.Debugging Code and Fixing Errors
Challenge: Debugging HTML code was sometimes frustrating, especially when something didn’t display as expected. Finding the root cause of an issue in a long file could be time-consuming.
How I Overcame It: I got into the habit of checking the browser's developer tools to identify errors. I also used the W3C HTML Validator to spot any syntax issues and gradually improved my debugging skills by tackling one error at a time.
Resources I Used :-
Documentation :- MDN Web Docs
Conclusion :-
Week 1 has been an exciting and transformative journey into the world of web development. From mastering the foundational structure of HTML to understanding key concepts like forms, semantic tags, and SEO, I've learned a lot in just a short time.
What stands out the most is how each new concept builds upon the last, forming a solid foundation for the more complex topics ahead. I’ve come to realize that web development isn’t just about writing code—it's about creating meaningful experiences for users, optimizing performance, and making the web more accessible for everyone.
The path has its challenges, but overcoming each one has been incredibly rewarding. I’m excited to continue this journey, and I can’t wait to dive deeper into CSS and JavaScript in the coming weeks.
Thank you for following my journey, and stay tuned for next week’s update as I take another step forward in the world of web development. Let’s keep learning and growing together! 🚀
For all the source code, click here :- https://github.com/CodingDhairya-7/Learning-In-Public/tree/FundamentalsToCore-WebDev/HTML5