GuideBeginner
Web Fundamentals Html Css
Learn to structure and style a web page from scratch with a senior developer's judgment: why semantic HTML matters (accessibility, SEO), how an element's real size is calculated with the box model, why one style wins over another (the cascade and specificity), and how Flexbox and CSS Grid solve modern layout. The guide treats HTML and CSS not as "the easy part you skip," but as the foundation that makes it possible to reason about any interface, including the one you'll build later with React or Tailwind. Each module runs the CSS model's logic in Node.js — specificity, box model, Flexbox space distribution, Grid cell placement — so the reasoning gets verified, not memorized. The throughline is Mercado's storefront: you build its semantic, accessible markup, organize its stylesheet with low specificity, lay out its product list as a responsive Grid with Flexbox inside the cards, and make it responsive from mobile to desktop. It's the foundational guide of NIEVA's Fullstack ecosystem: everything that follows (React, Next.js, design systems) renders HTML and applies CSS on top of this base.
- 64
- lessons
- 8
- modules
- English · Spanish
- available in
- Yes
- certificate
- Free
- access
Outcomes
What you'll be able to do
- Structure documents with semantic HTML (`header`, `nav`, `main`, `article`, `section`, `footer`) instead of generic `div`s, and understand the impact on accessibility and SEO
- Calculate any element's real size with the box model (content, padding, border, margin), and choose between `content-box` and `border-box` with judgment
- Resolve why one style wins over another: the cascade (origin, specificity, order of appearance) and each selector's specificity
- Choose the right selector (type, class, id, attribute, pseudo-classes, pseudo-elements, combinators) without inflating specificity
- Build layouts with Flexbox: main and cross axis, `justify-content`, `align-items`, `flex-grow`/`shrink`/`basis`
- Build two-dimensional layouts with CSS Grid: `grid-template-columns`/`rows`, `fr`, `repeat`, `minmax`, grid areas
- Design responsively: mobile-first, media queries, breakpoints, and fluid units (`rem`, `%`, `vw`, `clamp`)
- Build Mercado's full storefront: accessible markup, an organized cascade, and the catalog as a responsive Grid with Flexbox inside the cards
Before you start
What you need to bring
It's for you if...
- Developers who want to master HTML and CSS with judgment, not by memorizing loose properties
- Those about to learn React, Next.js, or Tailwind and need a solid base to understand what those tools do underneath
- Devs whose CSS "works but they don't know why" and want to understand the cascade, specificity, and box model in depth
- Those preparing to build accessible, responsive interfaces from day one
Requirements and materials
- Basic programming knowledge (variables, functions) — no prior HTML or CSS experience required
- A code editor and a modern browser
- Node.js 18+ installed to run the mini-models that verify the CSS logic
- No prior guide required: it's the foundational guide of the Fullstack ecosystem
Content
The syllabus, module by module
Open any of them to see its lessons.
- Module introduction: arranging the boxes, not just painting them
- The flex container and its items
- The main axis and the cross axis
- Distribute on the main axis, align on the cross one
- Stretch and shrink: `flex-grow`, `flex-shrink`, and `flex-basis`
- The `flex` shorthand and the `gap`
- Wrapping to several lines: `flex-wrap`
- Mini-project: laying out the `search-bar` and a row of cards with Flexbox
- Module introduction: from a row to a grid
- The grid container and the tracks: `display: grid` and the grid lines
- The `fr` unit and `repeat()`: columns that share the space
- `minmax()` and `auto-fill`: the grid that adapts on its own
- Placing items: lines and `span`
- `grid-template-areas`: drawing the layout with names
- Grid vs Flexbox: when each one (and why they complement each other)
- Mini-project: Mercado's catalog as a responsive grid
- Module introduction: from a grid that already adapts to controlling the design at every size
- The viewport meta tag and mobile-first
- Media queries: `@media`, conditions, and the cascade
- Choosing breakpoints: by the content, not by the devices
- Fluid units: `%`, `rem`, `vw` (and why `px` doesn't always work)
- `clamp()` and fluid sizing: floor, fluid, ceiling
- Responsive images: don't overflow and don't weigh too much
- Mini-project: making Mercado's storefront responsive
- Module introduction: seven layers, one storefront
- Layer 1: the storefront's semantic skeleton
- Layer 2 + 6: the card box and the catalog grid
- Layer 3 + 4: the stylesheet, flat and well-targeted
- Layer 5: Flexbox in the search-bar and inside the card
- Layer 7: the responsive storefront
- Review: accessibility and final audit
- Final project: the Mercado storefront, end to end
Common questions
What people usually ask
No limit. It's a free guide: come in whenever you like, as often as you like.
No. Modules run from easier to harder, but you can jump to the one you need. Progress is saved per lesson.
Whatever is needed is listed under “What you need to bring”, above. If nothing is listed there, you can start from zero.
In the Club's WhatsApp group, and every two weeks there's a live with an instructor where questions get worked through.
Yes. It's issued automatically once you finish every lesson, with a verifiable code you can share on LinkedIn.
Start whenever you like
What students say
These reviews are from enrolled students who completed at least 50% of the course. We moderate reviews only on content grounds (spam, offensive language, personal data), never for being critical or negative.
No approved reviews yet.
Be the first to share your experience!