Forem: avery

11. Bootstrap

avery — Thu, 26 Mar 2026 23:54:33 +0000

1. What is Bootstrap?

CSS Frameworks: Bootstrap, Foundation, MUI, Tailwind, etc.
When to use vs not to use
- Use: for fast, responsive, mobile-first development
- Avoid: for very simple projects or highly customized/complex designs
How to use Bootstrap (CDN; Content Delivery Network)
- Official website: https://getbootstrap.com/
- CSS (inside ) : <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
- min → minified file (faster loading, no unnecessary spaces)
- JavaScript (before ) : <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

2. Bootstrap Layout

12-column system : Uses container → row → col(items)
Auto fit : Columns automatically adjust based on available space
Containers : .container, .container-sm(mobile)/md(iPad)/lg(laptop)/xl(desktop)/xxl(TV)/fluid(full-width)
Sized columns
- ex. <div class="container"> <div class="row"> <div class="col-2">Hello</div> <div class="col-4">Hello</div> <div class="col-6">Hello</div> </div> </div>
Breakpoints : <576px, ≥576px, ≥768px, ≥992px, ≥1200px, ≥1400px
- Multiple breakpoints
- ex. <div class="col-sm-12 col-md-8 col-lg-4"></div>

3. Bootstrap Components

Common components: card, button, carousel, navbar, etc.
Navbar : Can include icons using SVG
- Download and use : ex. <img src="./briefcase.svg" alt="briefcase" height="30">
- Or copy SVG directly: ex. <svg ~ > ~ </svg>
Snippets (Pre-built sections) : Heroes, Features, Footers, ...
- How to use : Inspect → copy → paste → customize
Carousel : Use inside a .container for responsive layout
- ex. <div class="container">  </div>
Spacing(ex. mb-2)
Structure
- Property: m (margin), p (padding)
- Side: t (top), b (bottom), s (start), e (end), x, y
- Size: 0 / 1 / 2 / 3 / 4 / 5 / auto
Dark Mode : ex. <html lang="en" data-bs-theme="dark">
Jumbotron-style : Used for highlighting user feedback(Testimonials) or important content

10. Grid

avery — Tue, 03 Feb 2026 13:18:28 +0000

1. Display: Grid

Flexbox (1D) vs Grid (2D)
- Flexbox: focuses on flexibility
- Grid: focuses on precise alignment and spacing
Example : .container { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 1fr; gap: 10px; }
- grid-template-columns: defines the number and width of columns
- grid-template-rows: defines the number and height of rows
- fr unit: represents a fraction of the available space
- gap: sets spacing between grid items

2. Grid Sizing

grid-template shorthand: Defines rows and columns in one line
- Syntax: grid-template: rows / columns; (ex. grid-template: 100px 200px / 400px 800px;)
auto : Automatically sizes the track to fit its content (ex. grid-template-rows: 100px auto;)
Fractional size (fr): Represents a fraction of the available space, Distributes remaining space proportionally
minmax() size: Sets a minimum and maximum size for a grid track, (ex. grid-template-columns: 200px minmax(400px, 800px);)
repeat(): Reduces repetition and improves readability, (ex. grid-template-rows: repeat(2, 200px); /* same as 200px 200px */)
grid-auto-rows: Applies sizing to automatically created rows, Useful when new grid items are added dynamically

3. Grid Placement

Grid structure terms: Lines(the vertical and horizontal dividing lines of the grid), Tracks(rows or columns between two grid lines), Cells(a single grid unit formed by one row and one column), Containers(the grid parent element), Items(direct children of the grid container)
order: Changes the visual order of grid items, Works the same way as in Flexbox
Placing items by cells: Spans an item across multiple grid cells, (ex. grid-column: span 2; grid-row: span 2;)
Placing items by lines: Positions an item between specific grid lines, (ex. grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: -1;)
- Grid lines can also be referenced using negative values, Negative numbers count from the end of the grid, (ex. -1 → the last grid line, -2 → the second-to-last grid line)
grid-area shorthand
- ex. grid-area: 2 / 1 / 3 / 3;
- Syntax: grid-row-start / grid-column-start / grid-row-end / grid-column-end

4. Notes

Visualizing grid lines : Grid lines themselves cannot be styled directly, To visually highlight grid boundaries, use the background-color property on grid items or the grid container, This is commonly used for debugging and layout visualization.

9. Flexbox

avery — Mon, 02 Feb 2026 18:08:50 +0000

1. Display: Flex

ex).container { display: flex; gap: 10px; }
When display: flex is applied, all child elements are laid out in a single row by default.
The flex layout ignores traditional display types (inline, block, inline-block, none) for child elements.
inline-flex:
- Similar to inline-block
- The container behaves like an inline element (like <span>)
- The container’s width adjusts to fit its content (based on the largest child item)
- Flex rules still apply to its children

2. Flex Direction

flex-direction
- row (default): main axis(→), cross axis(↓)
- column: main axis(↓), cross axis(→)
- row-reverse / column-reverse : Reverses the start / end order along the main axis
flex-basis -Defines the initial size of an individual flex item along the main axis -Applied to flex items only, not the flex container -Acts like width in row direction and height in column direction

3. Flex Layout

order: 0; (default)
- Applies to flex items
- Higher values appear later along the main axis (to the right in row)
flex-wrap(applies to the container)
- nowrap (default): all items stay on one line
- wrap: items wrap onto multiple lines
- wrap-reverse: items wrap in the opposite direction
justify-content (main axis) : flex-start, flex-end, center, space-between, space-around, space-evenly
align-items (cross axis, single line): flex-start / flex-end / center / baseline / stretch
- Requires a defined container_ height _(e.g. height: 70vh)
- Works when items are not wrapped
- align-self (individual item): Overrides align-items for a single flex item, Uses the same values as align-items
align-content (cross axis, multiple lines): flex-start, flex-end, center, space-between, space-around, space-evenly, stretch
- Requires flex-wrap: wrap;
- Controls spacing between rows or columns
flex-flow : row wrap, column wrap
- Shorthand for flex-direction + flex-wrap
CSS-Tricks Flexbox Guide :
Flexbox Froggy (Practice Game) :

4. Flex Sizing

Sizing Priority (low → high): Content size < width < flex-basis < min-width / max-width
Content-based sizes
- min-content: based on the longest word (minimum possible width)
- max-content: based on all content on one line (maximum possible width)
Flex Grow / Shrink
- flex-grow: controls how much an item grows when extra space is available
- flex-shrink: controls how much an item shrinks when space is limited
- 0: no growing or shrinking
flex shorthand
- ex. flex: 1(flex-grow: grow ratio) 1(flex-shrink: shrink ratio) 0(flex-basis);
- Space is distributed proportionally based on grow/shrink values

8. Advanced CSS

avery — Sat, 03 Jan 2026 13:17:43 +0000

1. CSS Display

<span> ~ </span>
Display types: inline, block, inline-block(inline: same line, block: set width & height), none

2. CSS Float

float: left, right
clear: both (left, right / ex. footer)

3. How to Create Responsive Websites

<meta name="viewpoint"~!>
Media Queries : ex) @media (max-width: 600px){ / * CSS for screens below or equal to 600px wide */}
CSS Grid
- display: grid; (ex. grid-template-columns: 1fr 1fr; grid-template-rows: 100px 200px 200px; gap: 30px; grid-colum: span 2;)
CSS Flexbox : width not fixed(percentage)
- display: flex; (ex. flex: 1; flex: 2; flex: 0.5;)
External Frameworks (e.g: Bootstrap)
- Bootstrap: 12-column gird (ex. class = "col-6" : means 50%)

4. Media Queries

Max/Min width(break point) : @media (max_(or min)_-width: 600px) { h1 { font-size: 15px; } }
Combine
- @media (min-width: 600px) and (max-width: 900px) {}
- @media (max-width: 600px) and (min-width: 900px) {}
Device : Screen, Print(rarely used)
- @media screen_(or print)_(Orientation: landscape){}
- Mobile(319px - 480px), Ipads&Tablets(481px - 1200px), Laptops(1201px - 1600px), Desktop(1601px - )

5. Object-fit : controls how an image or video fits inside its container while respecting its aspect ratio

cover, fill, contain, none, scale-down(contain vs none)
[https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit]

Object fit

7. Intermediate CSS

avery — Thu, 30 Oct 2025 20:30:56 +0000

1. The Cascade - Specificity and Inheritance

External → Internal → Inline
Position(when multiple classes are applied, the last one on the right takes precedence) → Specificity(element → class → attribute → id) → Type(External → Internal → Inline) → Importance(ex. Color; red !important;)

2. Combining CSS selectors

Group : selector, selector { }
Child : selector(parent) > selector(direct child) { }
- ex) .box > p { }
Descendant(not direct) : selector selector { }
Chaining(specific, element → class/ID) : selectorselector
- ex) h1#title.big.heading
Combining combiners : selector selectorselector

3. CSS Positioning

STATIC : default
RELATIVE
ABSOLUTE : nearest ancestor or has relative position attribute or top left corner of web page
FIXED : top left corner of browser window (stays in the same place even when scrolling)
Z-index : stacking order (which element appears in front or behind others)

6. CSS Properties

avery — Sat, 27 Sep 2025 14:50:48 +0000

1. Font Properties

Size
- 1px : 1/96th inch
- 1pt : 1/72nd inch, rarely used in web
- 1em : 100% of parent
- 1rem : 100% of root <html>
Weight
- Keywords : normal/bold
- Relative : lighter/bolder
- number : 100-900 (commonly 400 = normal, 700 = bold)
Family
- Generic font type : sans-serif, serif, monospace, cursive, fantasy
- Quotes("") : Required when the font name contains spaces
- https://fonts.google.com/ : inside <head> ~ </head>

2. Inspecting CSS (Open Chrome DevTools)

Windows : Ctrl + Shift + I(or F12)
Mac: Cmd + Option + I (or Fn + F12)
CSS Overview : A DevTools panel that gives you a summary of colors, fonts, unused declarations, and more

3. The CSS Box Model - Margin, Padding and Border

border : Does not affect the size of the content inside.
Width/Spacing order (margin, padding, border): Clockwise order (top → right → bottom → left)
- For vertical and horizontal shorthand: top + bottom / left + right
Padding < Border < Margin(between elements)
<div> ~ </div> : Content division element

5. Introduction to CSS

avery — Sat, 27 Sep 2025 12:15:07 +0000

1. How to add CSS

Inline : Single element
- <tag style = "CSS(property : value)" />
Internal : Single web page, <head> ~ </head>
- <style> CSS(ex. html { background : red; }) </style>
External : Multipage, <head> ~ </head>
- <link rel = "stylesheet" href = "style.css" />

2. CSS Selectors

Element Selector : ex) h1
Class(attribute, for many elements) Selector : ex) .red_heading
Id(attribute, for one element) Selector : ex) #main
Attribute Selector : ex) p[draggable = "false"]
Universal Selector : ex) *

4. Multi-Page Websites

avery — Thu, 25 Sep 2025 10:12:21 +0000

1. Computer File Path

Absolute(full path from the root directory)
Relative(path based on the location of the current file)
- ../: Parent directory(one level up from the current folder)
- ./ : Current directory(the same folder as the current file)

2. The HTML Boilerplate

<!DOCTYPE html> : html5 ver
<html lang = "en"> ~ </html> : screen reader
<head> ~ </head> : not to be seen
- <meta charset = "UTF-8"> : character encoding
- <title> ~ </title>
<body> ~ </body> : contents

3. How to Host Your Website for Free with GitHub

Web Hosting(Web Server) (vs Local development)
Upload the whole root folder for projects (for collaboration and code management), but only its contents for GitHub Pages (for proper deployment), so that index.html is at the repository root.

3. Intermediate HTML

avery — Fri, 19 Sep 2025 22:10:33 +0000

1. The List Element

<ul> ~ </ul> : Unordered List (Bullet)
<ol> ~ </ol> : Ordered List (Number)
<li> ~ </li> : List item
Proper indentation is important

2. Anchor Elements

<a> ~ </a>
attribute : href (URL), target (open location : _self/_blank), title (tooltip text), rel (relationship, security), download (save file), draggable (drag element: true/false)

3. Image Elemnts

<img src = " ", alt = " ">
src (source) : Defines the path or URL of the image file
alt (alternative text)

2. Introduction to HTML

avery — Wed, 17 Sep 2025 22:15:31 +0000

1. HTML Heading Elements

Tag(ex. <h1></h1>) vs Element (ex. <h1> Book </h1>)
<h1> ~ <h6> Use headings in order(<h1> → <h2> → <h3> → …) Avoid skipping levels (e.g., <h1> directly to <h3>)
<h1> = Page title (only one per page)

2. HTML Paragraph Elements

<p> </p>
Lorem Ipsum : Used for layout and design testing, Not meant to be read or understood

3. Self Closing Tags

void element
XTHML : <br />, <hr />, <img />, ...
HTML5 : <br>, <hr>, <img>, ...
Using <br /> instead of proper <p> tags can cause accessibility issues, especially for screen readers.

1. Front-End Web Development

avery — Wed, 17 Sep 2025 20:12:19 +0000

1. How does the internet actually work?

Client (request a website) → ISP (Internet Service Provider : connects you to the internet and forwards your request) → DNS (Domain Name System : finds the IP address of the website) → Web Server (sends back the website’s data (HTML, CSS, JS)) → Browser (displays the website to you)

2. How Do Websites Actually Work?

3 Code Files : HTML(Structure) + CSS(style) + JS(Interaction)