Skip to content

Latest commit

 

History

History
100 lines (66 loc) · 2.85 KB

Basics-commentary.md

File metadata and controls

100 lines (66 loc) · 2.85 KB
Raw

Basics-Commentary on HTML, CSS, and Bootstrap

Table of Contents

  1. HTML Basics
  2. CSS Basics
  3. Bootstrap Basics
  4. Additional Tips

HTML Basics

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It structures your web content. HTML consists of a series of elements, which you use to enclose or wrap different parts of the content to make it appear or act a certain way.

Key Points

  • Elements: HTML elements are the building blocks of HTML pages.
  • Attributes: Elements can have attributes that provide additional information about the element.
  • Tags: Elements are represented by tags.

Example

<!-- This is a comment -->
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<a href="#">This is a link</a>

CSS Basics

CSS (Cascading Style Sheets) is used for styling HTML elements. It describes how HTML elements should be displayed on screen.

Key Points

  • Selectors: Used to select the HTML element you want to style.
  • Properties: The CSS properties like font-size, color, margin, etc., you want to apply.
  • Values: Each property is given a value to style the HTML element.

Example

/* This is a comment */
body {
  background-color: lightblue;
}
h1 {
  color: white;
  text-align: center;
}

Bootstrap Basics

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS, and JavaScript-based design templates.

Key Points

  • Responsive: Makes it easy to create responsive designs.
  • Components: Comes with a lot of pre-designed components like buttons, navbars, etc.
  • Utilities: Provides utility classes for faster development.

Example

<!-- Bootstrap Button -->
<button class="btn btn-primary">Click Me</button>

<!-- Bootstrap Card -->
<div class="card">
  <div class="card-body">This is a card.</div>
</div>

Additional Tips

Replacing Image Links

In the examples, you'll often see placeholder image links like image1.jpg. You should replace these with the actual paths to the images you want to use.

Comments

Comments are not displayed in the browser but can be useful for leaving notes in your code. In HTML, comments are wrapped in <!-- --> and in CSS, they are wrapped in /* */.

Further Reading

This commentary aims to provide a comprehensive summary and additional tips for better understanding HTML, CSS, and Bootstrap. Feel free to refer back to this page as you continue to learn and build more complex projects.