Basic Web Ecosystem
URL: https://ruvebal.github.io/web-atelier-udit/lessons/en/web-basics-diagnosis/
✅ Initial diagnostic checklist
Working repository: student-project-template
Objective: verify in 30 minutes that we all share some common minimums.
👉 Mark each item with one of these options:
| Status | Meaning |
|---|---|
| 🟢 | Yes, I know |
| 🟡 | So-so |
| 🔴 | No, no idea |
🔹 HTML + CSS
| Concept | Canonical reference | Status |
|---|---|---|
Create an index.html document with minimum structure (<!DOCTYPE html>, <html>, <head>, <body>) |
MDN: HTML basics | 🟢 / 🟡 / 🔴 |
Use semantic tags (<header>, <main>, <footer>) |
MDN: Semantics | 🟢 / 🟡 / 🔴 |
Link css/index.css in the <head> |
MDN: HTML <link> |
🟢 / 🟡 / 🔴 |
Basic color properties (color, background-color) |
MDN: CSS color | 🟢 / 🟡 / 🔴 |
| Create and reuse CSS classes | MDN: CSS selectors | 🟢 / 🟡 / 🔴 |
🔹 Typography and responsive design
| Concept | Canonical reference | Status |
|---|---|---|
| Load a web font (Google Fonts, @font-face) | MDN: CSS @font-face · Google Fonts | 🟢 / 🟡 / 🔴 |
Fluid typography with clamp(), em, rem |
MDN: CSS clamp() | 🟢 / 🟡 / 🔴 |
| Layouts with Flexbox or CSS Grid | MDN: Flexbox · MDN: Grid | 🟢 / 🟡 / 🔴 |
🔹 JavaScript
| Concept | Canonical reference | Status |
|---|---|---|
Link js/index.js in index.html with <script> |
MDN: <script> |
🟢 / 🟡 / 🔴 |
console.log() in the console |
MDN: console.log() | 🟢 / 🟡 / 🔴 |
Element selection with document.querySelector() |
MDN: querySelector() | 🟢 / 🟡 / 🔴 |
Modify text (innerText, textContent) |
MDN: textContent | 🟢 / 🟡 / 🔴 |
Event handling (addEventListener) |
MDN: addEventListener() | 🟢 / 🟡 / 🔴 |
🔹 Browser and DevTools
| Concept | Canonical reference | Status |
|---|---|---|
| Use Inspector (DevTools) in Chrome/Firefox | Chrome DevTools overview | 🟢 / 🟡 / 🔴 |
| Edit styles in the Elements panel | Chrome DevTools: CSS | 🟢 / 🟡 / 🔴 |
| Review requests in Network | Chrome DevTools: Network panel | 🟢 / 🟡 / 🔴 |
| Disable cache in Network | Chrome DevTools: Disable cache | 🟢 / 🟡 / 🔴 |
| Simulate mobile with Device Toolbar | Chrome DevTools: Device mode | 🟢 / 🟡 / 🔴 |
🔹 Development environment
| Concept | Canonical reference | Status |
|---|---|---|
| Have Visual Studio Code installed | VS Code docs | 🟢 / 🟡 / 🔴 |
| Prettier working on save | Prettier: Editor integration | 🟢 / 🟡 / 🔴 |
| Linter active (HTMLHint/ESLint) | ESLint · HTMLHint | 🟢 / 🟡 / 🔴 |
| Clone repo in VS Code | GitHub Docs: Clone repo | 🟢 / 🟡 / 🔴 |
| Make a test commit | Git basics – Git SCM | 🟢 / 🟡 / 🔴 |
🔹 Basic concepts of the web ecosystem
(Also see: FreeCodeCamp: How the Web Works)
| Concept | Canonical reference | Status |
|---|---|---|
| History and evolution of the Web (Tim Berners-Lee, origins, open standards) | MDN: The web and web standards | 🟢 / 🟡 / 🔴 |
| Web standards and bodies (W3C, WHATWG, IETF) | W3C Standards · WHATWG HTML Living Standard | 🟢 / 🟡 / 🔴 |
| How the Web works (HTTP, DNS, hosting, browsers) | MDN: How the Internet works | 🟢 / 🟡 / 🔴 |
| Web 1.0 → Web 2.0 → Web 3.0 | MDN: Evolution of HTTP | 🟢 / 🟡 / 🔴 |
| Web accessibility (WCAG, WAI-ARIA) | W3C WAI: Accessibility standards · WebAIM Principles | 🟢 / 🟡 / 🔴 |
| Responsive and adaptive design | MDN: Responsive design | 🟢 / 🟡 / 🔴 |
| Basic SEO (Search Engine Optimization) | Google SEO Starter Guide | 🟢 / 🟡 / 🔴 |
| Visual impact and hierarchy in web design | Interaction Design Foundation: Web Design Basics | 🟢 / 🟡 / 🔴 |
🔹 Git, GitHub and CI/CD
| Concept | Canonical reference | Status |
|---|---|---|
| What is a version control system and why Git | Git SCM – About | 🟢 / 🟡 / 🔴 |
| Difference between local and remote repositories (GitHub) | GitHub Docs: About repositories | 🟢 / 🟡 / 🔴 |
| Create a repository and clone it locally | GitHub Docs: Clone a repository | 🟢 / 🟡 / 🔴 |
Basic workflow: git add, git commit, git push |
Git SCM – Recording Changes | 🟢 / 🟡 / 🔴 |
Create and switch branches (git branch, git checkout, git switch) |
Git SCM – Branches | 🟢 / 🟡 / 🔴 |
| Pull Requests and code reviews on GitHub | GitHub Docs: About pull requests | 🟢 / 🟡 / 🔴 |
| Publish a site on GitHub Pages | GitHub Docs: About GitHub Pages | 🟢 / 🟡 / 🔴 |
| What is CI/CD (Continuous Integration and Delivery) | Atlassian CI/CD guide | 🟢 / 🟡 / 🔴 |
| Basic workflow setup in GitHub Actions | GitHub Docs: About workflows | 🟢 / 🟡 / 🔴 |
🧪 In-class activity
- Complete this checklist in your cloned repo
student-project-template. - Try out the doubtful items in practice (HTML, CSS, JS, DevTools, Git).
- Mark 🟢 / 🟡 / 🔴 on each item.
- Make a commit with the updated file:
git add .
git commit -m "diagnostic: fundamentals checklist completed"