Welcome to today’s HTML & CSS doubt-clearing session!!
Today’s session was all about clearing our doubts and strengthening our foundation in HTML and CSS. Under the guidance of Vijay Sir, we revisited core topics, clarified common confusions, and discussed interview-focused questions. It was an interactive and productive session!!
Topics Covered & Doubts Cleared:
1.HTML Structure Refresher:
- What is
<!DOCTYPE html>and why it's used - Proper use of
<head>,<body>, and<meta>tags - Semantic tags like
<header>,<main>,<footer>, etc.
2.CSS Basics & Application:
- Difference between Inline, Internal, and External CSS
- CSS Selectors:
class (.),id (#),element selector - The box model:
margin,border,padding, andcontent
3.Positioning in CSS:
-
static,relative,absolute,fixed,sticky - Common use cases and problems when using
position: absolute
4.Flexbox Introduction:
- How to align items using
display: flex - Properties like
justify-content,align-items,flex-direction
5.Responsive Design:
- Using
media queriesto handle different screen sizes - Units like
%,em,rem,vh, andvw
Common Doubts Clarified:
- When to use
<div>vs<section> - Why class names should be meaningful
- Difference between
idandclassin terms of uniqueness - How
z-indexworks and stacking context in CSS - Real-world example: Layout creation using
flexboxandmedia queries
Interview Q&A Practice:
Q1: What is the difference between id and class in HTML?
Answer: id is unique and used for one specific element, whereas class can be reused on multiple elements.
Q2: What is the box model in CSS?
Answer: It’s the structure of an element consisting of content, padding, border, and margin.
Q3: What is the use of semantic HTML tags?
Answer: They improve readability and SEO by clearly defining the purpose of elements (e.g., <article>, <nav>, <aside>).
Q4: How is position: absolute different from relative?
Answer: absolute positions the element relative to the nearest positioned ancestor, while relative positions it relative to its normal position.
Q5: What is Flexbox and why is it used?
Answer: Flexbox is a layout model that makes it easier to align and distribute space among items in a container.
Q6: How can you make a webpage responsive?
Answer: By using flexible units (%, vw, vh) and applying media queries for different screen sizes.
Final Task from Vijay Sir:
To test our understanding and put what we learned into practice, Vijay Sir gave us a practical assignment:
- Recreate the Facebook Login Page using only HTML & CSS.
This will help us:
- Improve our layout skills
- Practice form styling
- Understand responsive design
- Gain real-world UI building experience
Today's Learn:
Today’s session was extremely valuable. We cleared a lot of important doubts and got more confident with the fundamentals of HTML & CSS.
Thanks to Vijay Sir for his clear explanations, real-time examples, and encouraging us with practical tasks. Looking forward to building the Facebook login page and leveling up in the next session!
"Build. Break. Learn. Repeat."
Top comments (1)
Code, code, sleep, REPEAT..!! ;D