Day - 2: CSS Basics and Introduction to Developers Tools

The second day of the Web Development Basics 101 boot camp, in partnership with Reactplay, was focused on helping attendees deepen their knowledge of web development. The day started with a revision of HTML basics to ensure that everyone was on the same page before delving into the essentials of CSS.

The day's topics included core CSS concepts such as selectors, properties, and values, as well as a quick introduction to the developer tools available in most modern web browsers.

One of the major topics of the day was the box model, which is fundamental to CSS. The box model refers to how an element's content, padding, border, and margin interact to create the final visual layout of a webpage. A significant amount of time was spent explaining the intricacies of the box model to ensure that attendees had a clear understanding of how it works and how to use it effectively.

A brief overview of the content covered is as follows:

CSS Basics

• Box Model
• Selectors
• Standard Properties
• • border
  • margin
  • padding
  • outline 
  • border-radius 
  • background 
  • colors 
  • simple, gradient, alpha transparency 
  • fonts 
  • Formatting text with CSS 
  • position relative, absolute, etc. 
  • dimension top, left, height, width, max-width, aspect ratio etc 
• How to use Developer Tools effectively for styling?

The things discussed above were explained simply enough that even a novice who is studying them for the first time could understand them.

Here are a few highlights from Day 2 of the boot camp:

Find the link for Day - 2 of the Web Development Basics 101 boot camp here: