BRAINBIT INFOTECH · RANCHI

COMPLETE HTML + CSS COURSE · PART 4 OF 4

Components, Pro Workflow & Capstone Projects

Build reusable UI components with pure CSS, work like a professional, and finish five complete websites.

3 modules~12 hours15 examples + 5 projectsNeeds Parts 1-3

By the end of this part you can build

Accordion, modal, tabs, tooltips without JavaScript
Clean, accessible, SEO-ready code
A live website on GitHub Pages
Portfolio, cafe, school, store and tourism websites

Every example opens in a live browser preview. Click ✎ Edit on any preview, or press L, to open the Code Lab.

ROADMAP FOR THIS PART

Module 18Pure-CSS UI Components3.5 h

Module 19Professional Workflow & Deployment2.5 h

Module 20Capstone Projects6+ h

HTML + CSSBefore we begin

How to Use This Part

Every module has

1
A "Where is it used?" diagram of a real web page
2
Concept slides with code + live browser preview
3
Animations and playgrounds: click, drag and watch
4
A Live Lab: edit code, see the result instantly
5
5 practice examples with solutions
6
An animated recap + quiz

Controls→ next, ← back, M menu, L Code Lab, F fullscreen. Click ✎ Edit on any preview to change its code.

MODULE 18

Pure-CSS UI Components

⏱ 3.5 hours5 practice examplesLive code lab

You will learn

A reusable button system and cards
Alerts, badges, breadcrumbs, pagination
Accordion with details/summary
Modal popup with :target, tabs with radio buttons
Tooltips with attr(), toggle switches and styled forms

You will build

An FAQ accordion
A modal popup and a tab panel
A fully styled contact form

Module 18Real-world use

Where Is This Used on a Web Page?

You will find it here

Buttons and cards on every page
Accordions: FAQ sections, mobile menus
Modals: login popups, offers, confirm dialogs
Tabs: product details / reviews / specifications
Tooltips, breadcrumbs, pagination on shopping and government sites

Component thinkingA component is a reusable piece of UI with its own HTML + CSS: build once, use on every page. This is how React, Bootstrap and Tailwind work too.

Module 18Buttons

A Button System: Base + Variants + Sizes

file:///D:/my-website/buttons.html

The patternBase class (.btn) holds shared styles. Variant classes change colour. Size classes change padding. Combine: class="btn btn-outline btn-sm".

BootstrapThis is exactly how Bootstrap names its buttons. Learn the pattern and every framework will feel familiar.

buttons.cssCSS

Module 18Small components

Alerts, Badges, Breadcrumbs and Pagination

file:///D:/my-website/components.html

Component	Key CSS idea
Alert	Coloured left border + light background per type
Badge	Small inline-block pill, border-radius
Breadcrumb	Flex list; separator with `li + li::before`
Pagination	Flex row of boxed links; `.on` for current page

AccessibilityDo not rely on colour alone: add an icon or word ("Error:") so colour-blind users understand. Wrap breadcrumbs in <nav aria-label="Breadcrumb">.

Module 18Accordion

Accordion: <details> and <summary> (Built In!)

file:///D:/my-website/faq.html

Click the questionsThe browser opens and closes them by itself. No JavaScript needed.

faq.htmlHTML

faq.cssCSS

Open by defaultAdd the open attribute: <details open>.

Module 18Modal

Modal Popup with :target

file:///D:/my-website/modal.html

Click "View Offer"The link changes the URL to #offer. The element with that id matches :target and appears. The × link goes to # and it hides again.

modal.cssCSS

1
Hidden full-screen overlay (fixed, inset 0)
2
Show it when it is the :target
3
Fade with opacity + visibility (display cannot animate)
4
Centre the box with flex

Real projectsFor important dialogs use the HTML <dialog> element with a little JavaScript. :target is great for learning and simple popups.

Module 18Tabs

Tabs with Radio Buttons and the ~ Selector

file:///D:/my-website/tabs.html

1
Radio buttons (same name) remember which tab is active
2
Hide the radios; labels act as the tab buttons
3
#t2:checked ~ .p2 shows the matching panel
4
Style the active label the same way

tabs.cssCSS

Why radios?Only one radio in a group can be checked, exactly like only one tab can be open. CSS reads that state with :checked.

Module 18Tooltip + switch

Tooltips with attr() and a Toggle Switch

file:///D:/my-website/tooltip.html

Hover and clickHover JAC and deadline. Click the switch.

content: attr(data-tip) shows the text stored in the HTML attribute
Arrow made with ::before and transparent borders
Switch = hidden checkbox + styled span; :checked + .sl moves the knob

tooltip.cssCSS

switch.cssCSS

Module 18Live Lab

Live Lab: Combine Components into a Card

components-lab.html – edit me!

Live preview

TryAdd a tooltip to the badge with data-tip. Change the button to an outline variant. Add an alert above the card: "Only 5 seats left!".

Module 18Practice Example 1 of 5

FAQ Accordion

BeginnerThe BrainBit Infotech admissions page needs an FAQ section with 4 questions.

Your tasks

Use <details> and <summary>
Remove the default triangle and add your own +/- icon with ::after
Highlight the open question
Rounded borders and spacing between items
First item open by default

Where this is used: FAQ sections, mobile menus, filters on shopping sites.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/faq.html

faq.htmlHTML

Module 18Practice Example 2 of 5

Modal Popup with :target

IntermediateA "Request a Call Back" popup for Gupta Electronics with a small form inside.

Your tasks

Button link to #callback
Overlay: fixed, inset 0, dark transparent, hidden by default
.modal:target shows it with a fade
Box with a close × link to #
Form with name, mobile and a submit button inside

Where this is used: Login popups, newsletter sign-ups, "Are you sure?" dialogs.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/callback.html

callback.htmlHTML

Module 18Practice Example 3 of 5

Product Tabs

IntermediateA Jharkhand Handicrafts product page shows Description, Care and Shipping in tabs.

Your tasks

3 hidden radio inputs with the same name
3 labels styled as tabs
3 panels; only the checked one is visible
Active tab has a coloured bottom border
Panels have padding and a border

Where this is used: Product pages, settings screens, dashboards.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/tabs.html

tabs.htmlHTML

Module 18Practice Example 4 of 5

Tooltips for a Government Form

IntermediateShort forms like PAN, IFSC and DOB confuse users. Show a tooltip on hover/focus explaining each.

Your tasks

Use a data-tip attribute on a small "?" icon
Tooltip via ::after with content: attr(data-tip)
Arrow via ::before
Show on :hover and :focus (add tabindex="0")
Smooth fade with opacity transition

Where this is used: Banking, tax and exam application forms; icon buttons in apps.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/tooltips.html

tooltips.htmlHTML

Module 18Practice Example 5 of 5

Fully Styled Contact Form

AdvancedCreate a professional contact form for BrainBit Infotech with consistent inputs, focus states and a toggle switch.

Your tasks

Labels above inputs; inputs full width with padding and rounded border
Focus: coloured border + glow; invalid (after typing): red
Custom select arrow using appearance: none + background gradient
Toggle switch for "Send me course updates on WhatsApp"
Big full-width submit button with hover state

Where this is used: Contact pages, enquiry forms, sign-up pages.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/contact.html

contact.htmlHTML

Module 18Module complete

Recap: What You Completed in Module 18

✓Button system: base + variant + size classes
✓Alerts, badges, breadcrumbs, pagination
✓Accordion with details / summary
✓Modal with :target, opacity + visibility
✓Tabs with radio + :checked ~ panel
✓Tooltips with attr(data-tip)
✓Toggle switch and styled form controls

Coming next

Module 19: Professional Workflow – clean code, accessibility, SEO and putting your site online.

Quick quiz – click an answer

Q1. Which HTML element gives an accordion for free?

details/summary open and close without JavaScript.

Q2. What makes the :target modal appear?

Clicking a link to #offer makes #offer the target.

Q3. Show the text of data-tip in CSS:

attr() reads an attribute value.

MODULE 19

Professional Workflow & Deployment

⏱ 2.5 hours5 practice examplesLive code lab

You will learn

Organised project folders and file naming
CSS reset, base styles and BEM class names
Debugging layouts in DevTools
Accessibility, SEO, Open Graph and performance checks
Git basics and publishing on GitHub Pages / Netlify

You will build

A clean, BEM-named component
An accessible, SEO-ready page
Your first live website URL

Module 19Real-world use

Where Is This Used on a Web Page?

You will find it here

Clients and companies judge you by clean, organised code
Good structure lets a team work on the same website
Accessibility and SEO decide who can use and find your site
Deployment turns your folder into a real website anyone can visit

For freelancersThese habits are what separate a student project from paid work on Upwork or for local businesses.

Module 19Organisation

Project Folder Structure and Naming Rules

Home page is always index.html (servers open it by default)
Lowercase, hyphens: about-us.html, team-photo.jpg
No spaces or special characters in file names
Separate folders for css, images, js
Image names describe the content (helps SEO)

Capital lettersOn Windows Logo.PNG and logo.png are the same. On real web servers (Linux) they are different files, so images break after uploading.

Module 19Clean CSS

Start Every Project with a Reset and an Order

style.cssCSS

Section	Why
Reset	Browsers have different default margins and sizes; reset makes them equal
Variables	Brand colours and sizes in one place
Base	Body font, headings, links
Layout	Containers, grids, page structure
Components	Buttons, cards, navbars...
Utilities	Small helpers like .text-center

Comment headingsBig comment headings make a 1,000-line CSS file easy to navigate. Use Ctrl+F to jump to "COMPONENTS".

Module 19Naming

BEM: Block__Element--Modifier Class Names

cardBlock: the component

__titleElement: a part of the block

--featuredModifier: a variation

card.htmlHTML

Why BEM?Every class says where it belongs. No accidental clashes like two different .title classes. Specificity stays low and equal.

file:///D:/my-website/card.html

Module 19Debugging

Debugging Layouts Like a Detective

file:///D:/my-website/debug.html

debug.cssCSS

Problem	How to find it
Something is too wide / sideways scroll	`* { outline: 1px solid red }` and look for the box that sticks out
Style not applying	DevTools > Styles: is it crossed out? Check spelling and specificity
Unexpected gap	DevTools box model: margin or padding? Margin collapse?
Flex/Grid confusion	DevTools shows a "flex" / "grid" badge: click it to draw the lines
Image not showing	Console / Network tab: 404 = wrong path or capital letters

Outline vs borderOutline does not change sizes, so it is safe for debugging. Remove the line before publishing!

Module 19Quality checks

Accessibility, SEO and Speed: the Lighthouse Report

Example report for a student project. Aim for 90+ in every category.

1
Open your page in Chrome, press F12
2
Go to the Lighthouse tab
3
Choose Mobile and click Analyze page load
4
Fix the red and orange items one by one

Common issue	Fix
Images too big	Resize, compress, use WebP, `loading="lazy"`
Low contrast text	Darker text / lighter background (4.5 : 1)
Missing alt / labels	Add alt to images, label to inputs
No meta description	Add one in the head
Tap targets too small	Buttons and links at least 44px tall
Render-blocking fonts	Load fewer fonts; use `display=swap`

Module 19SEO + sharing

SEO and Open Graph: Look Good on Google and WhatsApp

head.htmlHTML

Chai Point Cafe, Ranchi
Kulhad chai and snacks near Morabadi.
chaipoint.example

Let's meet here at 5? https://chaipoint.example/

Link preview built from og: tags

One clear <h1> with the main keyword ("Kulhad Chai in Ranchi")
Descriptive title and meta description on every page
og:image about 1200 x 630 px
Register free on Google Business Profile so locals find the shop on Maps

Module 19Version control

Git and GitHub in 5 Minutes

Git vs GitHubGit = a tool on your computer that saves versions. GitHub = a website that stores your Git projects online (and can host them for free).

terminal (VS Code: Ctrl + `)TERMINAL

No terminal?GitHub Desktop (free app) or the Source Control panel in VS Code do the same with buttons.

GitHub Pages

Free hosting for static sites (HTML/CSS/JS). URL: username.github.io/project.

Netlify / Vercel

Drag-and-drop your folder on netlify.com/drop and get a link in seconds.

Own domain

Buy yourname.in (about a few hundred rupees a year) and connect it in settings.

Before you publishRemove the debug outline, check all links and image paths (case!), run Lighthouse, and test on a real phone.

profile.html – edit me!

Live preview

TryAdd profile__button (a contact link). Create a modifier profile--dark with a dark background. Add a meta description and Open Graph title.

IntermediateA junior developer wrote CSS with ids, !important and random names. Click Try it in the Lab to load it, then rewrite it with BEM classes.

Your tasks

Replace ids (#box1, #t) with BEM classes
Block .notice, elements __title, __text, __date
Modifier .notice--urgent instead of a separate style
Remove every !important
Group CSS with comment headings

Where this is used: Every team project; required in many companies' coding guidelines.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/notices.html

notices.htmlHTML

IntermediateThis sign-up page fails the accessibility check. Load it in the Lab and fix all 6 problems.

Your tasks

Add lang="en" and a proper page title
Image needs a meaningful alt
Inputs need real labels (not only placeholders)
The "button" is a div – make it a real <button>
Fix low-contrast grey text and the vague "Click here" link

HintAfter fixing, run Lighthouse Accessibility in DevTools on your own copy. Aim for 95+.

Where this is used: Government sites (required by law in many countries), banks, education portals.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/signup.html

signup.htmlHTML

BeginnerKanke Dhaba's link looks plain when shared on WhatsApp and shows a bad title on Google. Write a complete head.

Your tasks

Title with dish + area: "Kanke Dhaba | Litti Chokha in Kanke, Ranchi"
Meta description (about 150 characters)
og:title, og:description, og:image, og:url
Favicon link
Matching visible h1 and an image with alt

HintTest link previews with the free tool at opengraph.xyz after publishing.

Where this is used: Every business website; very important for local shops in Tier 2/3 cities.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/dhaba-seo.html

dhaba-seo.htmlHTML

IntermediateThis 3-card section causes sideways scrolling on phones and the cards are not equal. Load it in the Lab, find the 4 bugs using the outline trick and fix them.

Your tasks

Add * { outline: 1px solid red } to see the boxes
Bug 1: a fixed width of 900px on the container
Bug 2: missing box-sizing makes padding overflow
Bug 3: disply: flex typo
Bug 4: image without max-width overflows its card

Where this is used: Daily developer work: most of the time is spent finding and fixing bugs.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/debug-me.html

debug-me.htmlHTML

AdvancedYour cafe website is ready. Before uploading to GitHub Pages, create the missing professional pieces.

Your tasks

A custom 404 page (404.html) with a link home
Check: all file names lowercase, no spaces
Relative paths only (no C:\ paths)
README.md describing the project
A pre-launch checklist in comments at the top of index.html

Where this is used: Every professional website launch.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/404.html

404.htmlHTML

✓Folder structure and lowercase-hyphen file names
✓Reset + organised CSS sections
✓BEM: block__element--modifier
✓Debugging with outlines and DevTools
✓Lighthouse: performance, accessibility, SEO
✓Meta description and Open Graph tags
✓Git, GitHub and free hosting on GitHub Pages / Netlify

Coming next

Module 20: Capstone Projects – build 5 complete, real-world websites.

Quick quiz – click an answer

Q1. In BEM, which is an ELEMENT?

Double underscore = element of the block.

Q2. Why use lowercase file names?

Linux servers are case-sensitive.

Q3. Which tags control the WhatsApp link preview?

Open Graph tags like og:title and og:image.

You will learn

Planning a website from a client brief
Wireframe → HTML → CSS → responsive → test → deploy
Combining everything from Modules 1-19
Evaluating your own work with a rubric
Building a portfolio that wins clients and jobs

You will build

A personal portfolio
A cafe landing page and a school website
A handicraft store page and a tourism site

You will find it here

Each project is a complete website page using every part of this diagram
Briefs are based on real kinds of clients in Ranchi and Jharkhand
Build first, compare with the solution, then make it your own: your colours, your photos, your text
Publish at least two projects on GitHub Pages for your portfolio

1. Read the brief➜2. Wireframe on paper➜3. HTML structure➜4. CSS: base + components➜5. Responsive + test➜6. Deploy + share

Step	Tip
Wireframe	Draw boxes for each section on paper first. 10 minutes of planning saves 2 hours.
HTML	Write all content with semantic tags before any CSS.
CSS	Reset → variables → base → layout → components.
Responsive	Check 360px, 768px and 1280px widths in DevTools.
Test	Lighthouse, validator, real phone, a friend using it.

Page plan (wireframe)

Client: You! (for internships, freelancing and college applications)
Goal: Show who you are, your skills and your projects, and make it easy to contact you.

Must have

Sticky header with smooth-scroll links (scroll-behavior: smooth)
Round profile photo, animated skill bars
Project cards that lift on hover
Mobile-friendly at 360px
Contact form with validation

Skills used: Semantic HTMLFlexboxGrid auto-fitVariablesAnimationsMedia queries

CapstoneBuild a one-page portfolio for "Aarav Kumar, Web Designer, Ranchi". Replace the name and text with your own after checking the solution.

Your tasks

Header + hero with photo (me.jpg) and two buttons
About section with 3 animated skill bars
Projects: grid of 3 cards (auto-fit)
Contact form and footer
Variables for colours; one media query for mobile

Where this is used: Your job and freelance applications. Put this link on your resume and LinkedIn.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/portfolio.html

portfolio.htmlHTML

Page plan (wireframe)

Client: Chai Point Cafe, near Morabadi Ground, Ranchi
Goal: Bring more customers: show the menu, location and timings, and make calling/WhatsApp one tap away.

Must have

Hero with dark overlay and "Call Now" button (tel:)
Menu grid with prices in rupees
Opening hours table with zebra rows
Floating WhatsApp button (fixed)
Warm brand colours via variables

Skills used: BackgroundsGridFlexboxTablesposition: fixedTransitions

CapstoneBuild the full landing page from the brief. Use cafe.jpg, coffee.jpg, samosa.jpg, thekua.jpg and litti-chokha.jpg.

Your tasks

Hero with background image + overlay + 2 buttons
Menu: auto-fit grid of 4 cards
Features row with flex
Hours table and an embedded map
Fixed WhatsApp button

Where this is used: Restaurants, cafes, bakeries and sweet shops: one of the most common freelance jobs.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/cafe.html

cafe.htmlHTML

Page plan (wireframe)

Client: Ranchi Public School (from Module 6)
Goal: Parents should find notices, admissions info and contact details in seconds, on any phone.

Must have

Use your Module 6 HTML as the starting point
Mobile menu that collapses (checkbox trick)
Scrolling notices ticker
Facilities grid with icons
Stat boxes and facility tiles with hover effects

Skills used: Semantic HTMLGrid areasCheckbox menuTablesFormsAnimations

CapstoneStyle the school homepage you built in Module 6 into a modern, responsive site.

Your tasks

Top bar + header with collapsible mobile menu
Hero with school.jpg and Admission button
Notice ticker and 3 stat boxes
Facilities grid (6 items)
Footer with 3 columns

Where this is used: School, coaching and college websites: a huge market in every district.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/rps-home.html

rps-home.htmlHTML

Page plan (wireframe)

Client: Jharkhand Handicrafts (online store for local artisans)
Goal: Sell Dokra art, Tussar sarees and bamboo crafts online with a clear, trustworthy product listing.

Must have

Cart icon with item-count badge
Sidebar filters (checkboxes, range) that move below on mobile
Product cards: image zoom on hover, SALE ribbon, price with old price crossed
Category chips that scroll sideways on mobile
Accessible buttons with focus styles

Skills used: Grid areasFlexboxposition: absoluteFormsComponentsTransforms

CapstoneBuild the category page of the online store.

Your tasks

Header with search box and cart badge
Layout grid: sidebar 200px + products 1fr; one column on mobile
Product grid auto-fit with 4 cards
Cards: ribbon, zoom on hover, old/new price
Filters with checkboxes and a range slider

Where this is used: E-commerce: Amazon, Flipkart and every local online shop use this layout.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/store.html

store.htmlHTML

Page plan (wireframe)

Client: A student tourism club (or a local travel agency)
Goal: Inspire visitors to explore Jharkhand's waterfalls, forests and hills, and to book tours.

Must have

Hero with Hundru Falls photo and fade-in text animation
Magazine-style gallery with one big tile (span)
Tour cards that flip to show the price
Dark mode toggle using variables + :has()
Fully responsive, Lighthouse 90+

Skills used: Grid spanAnimationsFlip cardsVariablesDark modeMedia queries

CapstoneBuild the tourism homepage that brings together almost every skill from the course.

Your tasks

Hero with fade-up animation and a CTA
Magazine gallery: 4 columns, first tile spans 2x2
Flip-card tour packages
Dark mode toggle with variables
Responsive: gallery 2 columns on mobile

Where this is used: Tourism boards, travel agencies, hotels and homestays.

Expected result – build this yourself first, then check the solution

file:///D:/my-website/explore-jharkhand.html

explore-jharkhand.htmlHTML

CERTIFICATE OF COMPLETION

Complete HTML + CSS

20 modules · 100 practice examples · 5 capstone projects

Your Name

BrainBit Infotech, Ranchi

What to learn next

1
JavaScript: make pages interactive (menus, sliders, form checks)
2
Git & GitHub daily, and publish every project
3
A CSS framework: Bootstrap or Tailwind CSS
4
React or another front-end framework
5
Start freelancing: build sites for 2-3 local businesses

Keep buildingThe best way to get better is to rebuild websites you like (for practice) and make real sites for people you know.

✓Planning from a client brief and wireframe
✓Personal portfolio
✓Cafe landing page
✓School website homepage
✓Handicraft store page
✓Jharkhand tourism website
✓Evaluating with the rubric and deploying

Coming next

Publish your best two projects and share the links with your trainer!

Quick quiz – click an answer

Q1. What should you do BEFORE writing CSS?

Structure first, then style.

Q2. Which widths should you always test?

Phone, tablet and laptop.

Q3. Where can you host a static site for free?

Both are free for HTML/CSS sites.

Modules completed

Module 18: Pure-CSS UI Components
Module 19: Professional Workflow & Deployment
Module 20: Capstone Projects

Components, Pro Workflow & Capstone Projects

By the end of this part you can build

ROADMAP FOR THIS PART

Every module has

Pure-CSS UI Components

You will learn

You will build

You will find it here

Your tasks

Your tasks

Your tasks

Your tasks

Your tasks

Coming next

Quick quiz – click an answer

Professional Workflow & Deployment

You will learn

You will build

You will find it here

GitHub Pages

Netlify / Vercel

Own domain

Your tasks

Your tasks

Your tasks

Your tasks

Your tasks

Coming next

Quick quiz – click an answer

Capstone Projects

You will learn

You will build

You will find it here

Page plan (wireframe)

Must have

Your tasks

Page plan (wireframe)

Must have

Your tasks

Page plan (wireframe)

Must have

Your tasks

Page plan (wireframe)

Must have

Your tasks

Page plan (wireframe)

Must have

Your tasks

Complete HTML + CSS

What to learn next

Coming next

Quick quiz – click an answer

Well done!

Modules completed