Devlog - 2025-09-25

🚀 What I Did

• Business Card.

🧠 What I Learned

• File structure example:

.
├── /assets
│   ├── /images
│   │   ├── logo.png
│   │   ├── banner.jpg
│   │   └── icons.svg
│   ├── /fonts
│   │   ├── custom-font.woff
│   │   └── custom-font.woff2
├── /css
│   ├── main.css
│   ├── about.css
│   └── contact.css
├── index.html
├── about.html
├── contact.html
└── README.md

Computer Basics

• Motherboard – main circuit board, connects all components.
• CPU – executes instructions, does calculations.
• RAM – temporary memory for active processes.
• HDD – permanent storage (slower).
• SSD – faster, flash-based permanent storage.
• PSU – converts wall power for computer.
• GPU – renders visuals/graphics.

Internet Basics

• ISP – company providing internet (dial-up, DSL, cable, fiber, satellite).
• Safe Sign-in – strong password, 2FA, password manager.

Developer Tools

• IDE – write, test, debug code in one place.
• Code Editor – lightweight tool to write/debug code.
• Git – version control for tracking/collaboration.
• Repo Hosting – GitHub, GitLab, Bitbucket.
• Package Managers – handle dependencies (npm, pip, Maven).
• Testing – ensures code works (Jest, PHPUnit, JUnit).

File Formats

• Naming – use descriptive names (about-us.html).
• Root Directory – top-level folder.
• Markdown – simple markup for docs (README).
• index.html – default website page.
• File Managers – Explorer (Windows), Finder (Mac).
• Search – built-in file search.

File Types

• HTML (.html), CSS (.css), JS (.js)
• Images: JPEG, PNG, GIF, SVG
• Audio/Video: MP3, MP4, MOV
• Fonts: TTF, WOFF, WOFF2
• ZIP: compressed files

Web Browsing

• Browser – software to access websites (Chrome, Firefox, Edge).
• Search Engine – find info online (Google, Bing, Yahoo).

Search Tricks

• site:example.com → search inside a site
• filetype:pdf → search file types
• -term → exclude results

• +term → must include term

• CSS is made up of two parts selecter and a declaration block.

selector {
  property: value;
}

CSS ways to apply

• inline - for overriding styles quickly on a single element.
• internal - best suited for applying styles to a single webpage only.
• external - It promotes separation of concerns and reusability across multiple pages.

Combinators

• Child combinator (>) - used to select elements that are direct children of a specified parent element.
• Next-sibling combinator (+) - selects an element that immediately follows a specified sibling element.

• Subsequent-sibling combinator (~) - selects all siblings of a specified element that come after it.

• margin - create space between the border of an element and its neighboring elements.
• padding - create space between the content of an element and its border.

🔥 What’s Next

• CSS and Java.