Web Development with Coding
HTML & CSS Fundamentals
In This Section, You Will Learn:
- • What HTML is and why it matters
- • HTML structure and semantic elements
- • What CSS is and how it styles pages
- • CSS layout with Flexbox and Grid
- • Responsive design for mobile
- • Your first hands-on coding exercise
HTML – The Structure of the Web
- HTML (HyperText Markup Language) defines the STRUCTURE of every web page.
- Think of HTML as the skeleton — it tells the browser what content exists and how it's organized.
- Basic HTML Structure:
- “`
- <!DOCTYPE html>
- <html>
- <head>
- <title>My Page</title>
- </head>
- <body>
- <h1>Welcome!</h1>
- <p>This is a paragraph.</p>
- </body>
- </html>
- “`
- Key Concepts:
- • Elements are defined by TAGS: <tagname>content</tagname>
- • Some tags are self-closing: <img />, <br />
- • Attributes add info: <a href='url'>Link</a>
Semantic HTML – Write Meaningful Code
- Semantic tags describe WHAT the content is, not just how it looks:
- Use These:
- • <header> – Top section of page/section
- • <nav> – Navigation links
- • <main> – Main content area
- • <section> – Thematic grouping
- • <article> – Self-contained content
- • <footer> – Bottom section
- Instead of:
- • <div> everywhere (vague)
- • <span> everywhere (vague)
- Why Semantic HTML Matters:
- • Better for SEO (Google understands your content)
- • Better for accessibility (screen readers)
- • Cleaner, more readable code
CSS – Making Things Beautiful
- CSS (Cascading Style Sheets) controls how HTML LOOKS.
- If HTML is the skeleton, CSS is the skin, clothes, and makeup.
- How CSS Works:
- “`
- selector {
- property: value;
- }
- “`
- Example:
- “`
- h1 {
- color: blue;
- font-size: 32px;
- }
- “`
- Ways to Add CSS:
- • External: <link rel='stylesheet' href='style.css'>
- • Internal: <style> in head section
- • Inline: style='color: red;' (avoid this)
- Always use external stylesheets for real projects.
CSS Layout – Flexbox & Grid
- Modern Layout Tools: Forget floats. Use Flexbox and Grid.
- Flexbox (1-dimensional):
- • Perfect for rows OR columns
- • Centering, spacing, alignment
- “`
- .container {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- “`
- CSS Grid (2-dimensional):
- • Perfect for complex layouts
- • Rows AND columns simultaneously
- “`
- .container {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr;
- gap: 20px;
- }
- “`
- When to Use Which:
- • Flexbox: Navigation bars, centering, simple layouts
- • Grid: Page layouts, card grids, complex designs
Responsive Design – Mobile First
- 60%+ of web traffic is mobile. Your site MUST work on all screen sizes.
- Media Queries:
- “`
- @media (max-width: 768px) {
- .container {
- flex-direction: column;
- }
- }
- “`
- Mobile-First Approach:
- • Design for mobile FIRST
- • Add styles for larger screens with min-width
- Responsive Units:
- • rem: Relative to root font size (use for fonts)
- • %: Relative to parent container (use for widths)
- • vw/vh: Relative to viewport (use carefully)
- Never use px for text sizes. Use rem for accessibility.