Scribd
Upload
22 views9 pages

Web Development for Grades 7-9: HTML & CSS

slides for web development session

Uploaded by

np05cp4a210071
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views9 pages

Web Development for Grades 7-9: HTML & CSS

slides for web development session

Uploaded by

np05cp4a210071
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

Web Development Basics (HTML &

CSS)
• For Grades 7, 8, and 9
Introduction to the Web
• What is a website?
• Front-end vs Back-end (simple explanation)
• How browsers work
• Roles of HTML and CSS
HTML Basics
• HTML document structure
• Headings, paragraphs, line breaks
• Text formatting tags
• Links and images
• Lists (ordered & unordered)
• Tables
• Basic forms
CSS Basics
• Adding CSS (inline, internal, external)
• CSS syntax: selectors, properties, values
• Colors (name, hex, rgb)
• Fonts and text styles
• Backgrounds
• Borders, margin, padding
• Box model basics
Layout Fundamentals
• Display types (block, inline, inline-block)
• Positioning (static, relative, absolute, fixed)
• Floating and clearing
• Introduction to Flexbox
Making It Interactive with CSS

HOVER EFFECTS ACTIVE AND FOCUS TRANSITIONS AND CHANGING STYLES


STATES ANIMATIONS ON LINKS, BUTTONS,
AND IMAGES
Project Ideas
• Grade 7: Personal bio page
• Grade 8: Multi-page school club website
• Grade 9: Portfolio or blog layout with navigation
Good Practices
• Clean code with proper indentation
• Naming conventions for classes and IDs
• Separate structure (HTML) and style (CSS)
• Responsiveness basics
Fun Extras
• Google Fonts
• Embedding videos
• CSS gradients
• Basic media queries

You might also like