Welcome to my frontend learning diary! 🚀 This repository is mainly for recording my learning process of HTML, CSS, and frontend development, referencing the Bilibili Shang Silicon Valley frontend tutorial, and supplementing with my own notes and practical cases.
-
HTML & CSS Basics
- HTML tags and semantics
- CSS selectors, box model, positioning, Flex layout
- Common CSS animations and transitions
- Responsive design and media queries
-
Frontend Development Tools
- Tips for using VS Code
- Live Server plugin for quick preview
- Chrome DevTools debugging
-
Advanced Learning
- JavaScript basics (to be added)
- Vue / React (to be added)
- Frontend project practice (to be added)
- Watch Shang Silicon Valley HTML+CSS Zero Basic Tutorial and organize notes
- Deepen understanding with MDN documentation
- Practice demos after each module
- Record problems encountered and find solutions
| Date | Content | Notes |
|---|---|---|
| 2025-03-14 | HTML Structure & Basic Concepts | Understanding HTML elements, attributes, basic structure, comments, character encoding, document declaration, standard structure, typography tags, semantic tags, block and inline elements |
| 2025-03-15 | HTML Tags & Hyperlinks | Learned p, h1-h6, pre, code, blockquote, mastered |
| 2025-03-16 | HTML Lists & Tables | Mastered ordered list (ol), unordered list (ul), definition list (dl); learned table structure (table/thead/tbody/tfoot), cell merging (colspan/rowspan), common table attributes; added br, hr, pre tags; started learning forms |
| 2025-04-05 | HTML Forms In-depth | Mastered form controls (input/select/textarea), form attributes (action/method), form validation, various input types (text/password/radio/checkbox), label usage, fieldset grouping |
| 2025-04-06 | iframe Learning | Learned basic usage of iframe, attributes (src/width/height), frame communication, security, responsive iframe, common scenarios |
| 2025-04-07 | HTML Entities | Mastered concept and usage of HTML entities ( , <, >, &, ", © etc.), correct usage in code, escaping special characters, use cases for space entities |
| 2025-04-08 | CSS Basics | Learned CSS selectors (element/class/ID/attribute), CSS import methods (inline/internal/external), basic syntax, selector specificity, common properties (color/font/background etc.) |
| 2025-03-15 | Advanced CSS Selectors | Learned ID selector (#id), compound selectors: intersection (tag.class), union (selector1,selector2), parent-child selector (parent > child) |
| 2025-05-12 | CSS Selectors in Detail | Mastered compound selectors (intersection, union, descendant, child, sibling), attribute selectors, pseudo-class selectors, pseudo-element selectors, understood selector specificity, structural pseudo-classes (:first-child, :last-child, :nth-child, :not), and can flexibly use various selectors for page styling. |
| To be updated | ... | ... |
📌 Continuously updating...
If you are also learning frontend, feel free to communicate! If you have better learning suggestions, please let me know, I will keep improving my learning methods! 😊