Crampete Full Stack Classroom

Batch - August, 2019

Homework, resources, code snippets, live projects and learning hacks can be found in the respective day folders.

Index

• Day 1 & Day 2

  • Overview
  • Homework
  • Code

• Day 3 & Day 4

  • Overview
  • Homework
  • Code

Day 1 & Day 2 Overview

• What is HTML? What is CSS?
• Basic HTML tags
  • h1, h2 etc
  • p
  • div
  • head, body, link, img
  • Self closing tags and explicitly closing tags
• Simple CSS Properties
  • Margin and Padding
  • Hexadecimals for colours
  • Font properties like font-size, font-weight etc
  • Position absolute and relative
  • Inline vs Block
• Using online tools (codepen.io) to quickly get started without having new files.
• Getting fonts from Google font.
• Getting colour palettes online.
• Using ID in CSS.
• Install and use Visual Studio Code to start a project and see output for the HTML.
• Display and block properties. Everything in web design is a box.
• Using Google Chrome's Inspect Elements to make changes quickly, analyse CSS properties and understand the structure better.
• Very basics of relative linking in HTML.
• Made 2 simple pages. Broke them into parts (boxes, individual tags) and built them in class.
  • Page 1
  • Page 2

Day 3 & Day 4 Overview

• Refresher display inline and block elements using inspect elements.
• Anchor tags and how to open in new tabs.
• unordered list tags.
• Centering block elements and centering inline elements.
• Span tags. Use cases and how they differ from paragraph tags.
• Why use a reset.css and using an existing reset.css file.
• What is mobile responsiveness?
• Mobile first approach.
• CSS breakpoints for media queries. Why those breakpoints?
• Linking to an ID in a HTML page.
• Semantic HTML
• Pseudo-Selectors (just hover) in CSS.
• block, inline and inline-block.
• Different CSS for different width devices.
• Linking to different HTML pages using anchor tags.