{"key":"css_day_by_day_study_plan_2026_03_19","title":"CSS Day By Day Study Plan","content":"Day-by-day CSS study plan created on 2026-03-19.\n\nDay 1: What CSS Is\nLearn what CSS does, how to connect CSS to HTML, selectors, colors, background colors, and basic text styling.\nPractice: connect a stylesheet to an HTML page, then change text color, background color, and font size.\nGoal: understand that CSS controls presentation, not structure.\n\nDay 2: Fonts and Text\nLearn font family, font size, font weight, line height, text align, and text decoration.\nPractice: style a page’s headings and paragraphs and make text readable and consistent.\nGoal: improve readability without overthinking design.\n\nDay 3: The Box Model\nLearn width, height, padding, border, and margin.\nPractice: add spacing around sections and experiment with borders and content boxes.\nGoal: understand why elements have space around them.\n\nDay 4: Display and Positioning Basics\nLearn block vs inline, inline-block, and basic display behavior.\nPractice: inspect how elements behave by default and change display values to see what happens.\nGoal: stop guessing why elements stack or sit side by side.\n\nDay 5: Flexbox Part 1\nLearn flex container, flex direction, justify content, and align items.\nPractice: create a horizontal nav or row of cards.\nGoal: learn the easiest way to line things up.\n\nDay 6: Flexbox Part 2\nLearn gap, wrapping, and nested flex layouts.\nPractice: build a small page section using Flexbox and make a layout with multiple aligned blocks.\nGoal: get comfortable using Flexbox for real page sections.\n\nDay 7: Review and Small Build\nPractice: build a styled personal homepage using spacing, fonts, colors, box model, and Flexbox.\nGoal: combine what was learned into one small page.\n\nDay 8: CSS Grid Part 1\nLearn grid container, columns, rows, and gap.\nPractice: build a simple grid layout and make a section with multiple blocks.\nGoal: understand two-dimensional layout.\n\nDay 9: CSS Grid Part 2\nLearn placing items in a grid, combining Grid and Flexbox, and choosing when to use each.\nPractice: create a more structured layout like a gallery or features section.\nGoal: stop treating Grid like magic.\n\nDay 10: Responsive Design Basics\nLearn responsive thinking, percentages, max-width, media queries, and how layouts change on small screens.\nPractice: make a page look decent on desktop and mobile.\nGoal: understand that layouts must adapt.\n\nDay 11: Buttons, Forms, and UI Elements\nLearn styling buttons, styling inputs, borders, border radius, hover states, and focus states.\nPractice: style a contact form or signup form.\nGoal: make common UI elements look intentional.\n\nDay 12: Layout Polish\nLearn visual hierarchy, spacing consistency, alignment, repeated styles, and simple design systems thinking.\nPractice: clean up one of the earlier pages and improve spacing, headings, and section balance.\nGoal: make the page feel more deliberate.\n\nDay 13: Rebuild Without Looking\nPractice: build a styled page from scratch using your own HTML and apply typography, spacing, Flexbox or Grid, and responsive behavior.\nGoal: expose weak spots in CSS understanding.\n\nDay 14: Final CSS Checkpoint\nPractice: style a complete multi-section homepage.\nInclude good spacing, readable typography, at least one Flexbox layout, at least one Grid section, basic responsive adjustments, and styled buttons or forms.\nFinal checkpoint: can take plain HTML and make it look organized, readable, and intentional.\n\nDaily study method: 45 to 90 minutes, first half learning and second half building, then end by changing one thing independently.\nRule: do not just tweak random values until it works; try to understand why the layout changed.\n\n---\n**2026-03-19 11:00:26 UTC | Created via MCP**","summary":"Day-by-day CSS study plan created on 2026-03-19.\n\nDay 1: What CSS Is\nLearn what CSS does, how to connect CSS to HTML, selectors, colors, background colors, and basic text styling.\nPractice: connect a stylesheet to an HTML page, then change text color, background color, and font size.\nGoal: understand that CSS controls presentation, not structure.\n\nDay 2: Fonts and Text\nLearn font family, font size, font weight, line height, text align, and text decoration.\nPractice: style a page’s headings and paragraphs and make text readable and consistent.\nGoal: improve readability without overthinking design.\n\nDay 3: The Box Model\nLearn width, height, padding, border, and margin.\nPractice: add spacing around sections and experiment with borders and content boxes.\nGoal: understand why elements have space around them.\n\nDay 4: Display and Positioning Basics\nLearn block vs inline, inline-block, and basic display behavior.\nPractice: inspect how elements behave by default and change display values to see what happens.\nGoal: stop guessing why elements stack or sit side by side.\n\nDay 5: Flexbox Part 1\nLearn flex container, flex direction, justify content, and align items.\nPractice: create a horizontal nav or row of cards.\nGoal: learn the easiest way to line things up.\n\nDay 6: Flexbox Part 2\nLearn gap, wrapping, and nested flex layouts.\nPractice: build a small page section using Flexbox and make a layout with multiple aligned blocks.\nGoal: get comfortable using Flexbox for real page sections.\n\nDay 7: Review and Small Build\nPractice: build a styled personal homepage using spacing, fonts, colors, box model, and Flexbox.\nGoal: combine what was learned into one small page.\n\nDay 8: CSS Grid Part 1\nLearn grid container, columns, rows, and gap.\nPractice: build a simple grid layout and make a section with multiple blocks.\nGoal: understand two-dimensional layout.\n\nDay 9: CSS Grid Part 2\nLearn placing items in a grid, combining Grid and Flexbox, and choosing when to use each.\nPractice: create a more structured layout like a gallery or features section.\nGoal: stop treating Grid like magic.\n\nDay 10: Responsive Design Basics\nLearn responsive thinking, percentages, max-width, media queries, and how layouts change on small screens.\nPractice: make a page look decent on desktop and mobile.\nGoal: understand that layouts must adapt.\n\nDay 11: Buttons, Forms, and UI Elements\nLearn styling buttons, styling inputs, borders, border radius, hover states, and focus states.\nPractice: style a contact form or signup form.\nGoal: make common UI elements look intentional.\n\nDay 12: Layout Polish\nLearn visual hierarchy, spacing consistency, alignment, repeated styles, and simple design systems thinking.\nPractice: clean up one of the earlier pages and improve spacing, headings, and section balance.\nGoal: make the page feel more deliberate.\n\nDay 13: Rebuild Without Looking\nPractice: build a styled page from scratch using your own HTML and apply typography, spacing, Flexbox or Grid, and responsive behavior.\nGoal: expose weak spots in CSS understanding.\n\nDay 14: Final CSS Checkpoint\nPractice: style a complete multi-section homepage.\nInclude good spacing, readable typography, at least one Flexbox layout, at least one Grid section, basic responsive adjustments, and styled buttons or forms.\nFinal checkpoint: can take plain HTML and make it look organized, readable, and intentional.\n\nDaily study method: 45 to 90 minutes, first half learning and second half building, then end by changing one thing independently.\nRule: do not just tweak random values until it works; try to understand why the layout changed.\n\n---\n**2026-03-19 11:00:26 UTC | Created via MCP**","status":"active","namespace":"general","namespace_name":"general","namespace_tier":"shared","tags":[]}