CSS Styling
Week 1: Introduction to CSS
Class 1: Cascading Style Sheets (CSS) Introduction
What is CSS and its role in web development
Inline vs. internal vs. external CSS
Basic CSS syntax and selectors
Class 2: CSS Selectors and Properties
Understanding CSS selectors: element, class, ID, and pseudo-classes
Applying styles with CSS properties: colour, font-size, margin, padding, etc.
Using the "box model" concept
Week 2: CSS Layout and Box Model
Class 3: Box Model in Depth
Understanding the box model: content, padding, border, margin
Box sizing and how it affects layout
Creating responsive layouts with CSS
Class 4: CSS Positioning and Display
CSS positioning: static, relative, absolute, fixed
Display property: block, inline, inline-block
Centering elements horizontally and vertically
Week 3: CSS Flexbox and Grid
Class 5: Introduction to CSS Flexbox
Flexbox fundamentals: containers and items
Creating flexible and responsive layouts with Flexbox
Solving common layout challenges
Class 6: CSS Grid Layout
Introduction to CSS Grid
Defining grid containers and grid items
Building complex grid-based layouts
Week 4: Responsive Web Design
Class 7: Media Queries and Responsive Design
Media queries and breakpoints
Creating responsive designs for various devices
Mobile-first vs. desktop-first approaches
Class 8: CSS Best Practices and Optimization
CSS performance optimization techniques
Organising CSS with methodologies like BEM or SMACSS
Review and recap of Month 2 content
Throughout the month, students will practice applying styles to HTML content, building progressively more complex layouts. They will also work on responsive design projects to ensure their websites adapt to different screen sizes.
Practical exercises and assignments will reinforce the concepts learned in each class, and students will have access to resources for self-paced learning. By the end of Month 2, students should have a strong foundation in CSS styling and layout techniques.
Last updated