Weekly Progress Report: Insights of Week-2

🔍 What I Explored This Week:

I officially began my CSS journey and dove deeper into the magic of semantic HTML. Here's a quick rundown of what I learned and implemented:

🌱Things I Learned:

• Semantic HTML: Improves SEO and accessibility by helping search engines and screen readers better understand webpage content.

• HTML Entities: Useful when displaying tags like <p></p> using < p > < /p >.

• <pre> Tag: Preserves formatting exactly as written in the editor, including spaces.

• Symbols in HTML:

  • © → Copyright symbol

  •   → non-breaking space

• Displaying Code: Use <code> along with <pre> for structured output.

🎨 CSS — Styling Begins

• I think CSS is all about selectors and declarations.

• I practiced all three types of CSS-Inline, Internal and External (preferred for clean structure)

• Types of CSS Selectors Explored-Element, Class, ID, Child & Descendant and Universal (*)

• Box Model Breakdown: Margin → Border → Padding → Content

• 

  Learned how margin collapse works when elements overlap-whichever the maximum one that is executed.

Bonus:

• Discovered CodePen as a great space to test frontend ideas interactively.

• Placing a block element inside an inline element doesn't work with HTML.

✨ What I Practiced:

• Structured the layout using semantic tags and HTML entities

• Styled <div> and <span> using internal CSS with single/multiple selectors

• Applied inline styles with ID and classes to understand the Box Model visually

• Experimented with text styling, fonts (via Google Fonts), and color techniques

• Added fonts from Google Fonts in two ways: by importing them and by downloading them to a local machine.

• Used all the different methods to add color to the webpage.

• Completed a mentor-given exercise focused on paragraph styling

🧩Challenges I Faced:

Nothing major, just a few small questions that came up, which I resolved using Google.

🧠 Reflections from the Week:

This week felt like a proper launchpad 🚀. Starting with CSS gave me a real sense of creative control—turning plain HTML into something visually engaging. Semantic HTML wasn’t just theory; it helped me understand how to organize content better. It’s not just about making things look nice; it’s about making them meaningful too.

Google Fonts and CodePen were cool finds. They made the whole process feel more fun and creative.

Source Codes:

GitHub Profile- avinashh-gh

LinkedIn Profile-www.linkedin.com/in/avinash-chaurasia-701181368