Practical tutorials
Very often people learn to code by copying bits and pieces from around the web. The risk, though, is getting something to work without really understanding why, treating tools, browsers and code as black boxes.
This section gathers essential guides and practical pointers, meant not as exhaustive manuals but as lightweight starting points. The goal is to give you the key concepts you need to understand what goes on behind the scenes, so you can avoid mindless copy-pasting without blowing your mind on too much theory.
The guides are ordered as a path: start from the editor, move through the fundamentals of HTML, CSS and JavaScript, then on to DevTools, Git and GitHub, NPM, deployment, SEO and accessibility, closing with using AI methodically. You can follow them in sequence or dip into them one at a time, depending on what you need or what you're curious about.
VS Code essentials: what you actually need to get startedInitial setup, integrated terminal, sensible extensions, debugging, Git and the small habits that genuinely improve your workflow.
Open the guideStructure, semantics, essential tags, links, images and forms: a reasoned overview to find your bearings in HTML before touching CSS and JavaScript.
Open the guideRules, selectors, specificity, the Box Model, Flexbox, Grid and positioning: the pillars for giving your pages a solid, predictable style.
Open the guideVariables, scoping, functions, DOM manipulation, events and asynchrony: a practical, panic-free guide to the language's invisible pillars.
Open the guideUnderstand what actually happens in the browser: the DOM, applied CSS, the console, Sources, Network and performance checks.
Open the guideKey concepts and the daily workflow: commits, branches, merges and recovering from mistakes with a simple, practical method.
Open the guideA practical guide genuinely centred on GitHub: repositories, pull requests, issues, Actions, Pages, security and real collaboration.
Open the guidePackage managers, scripts, dependencies, folders and local builds: the minimum you need to understand how a modern project is put together.
Open the guideA concrete guide to publishing your first projects: build, hosting, domain, common mistakes and the minimum workflow worth remembering.
Open the guideTitles, descriptions, URLs, internal links, sitemaps, robots.txt, canonicals, performance and Search Console without the confusion.
Open the guideSemantic HTML, alt text, focus, keyboard use, contrast, forms, ARIA and a practical checklist for more usable interfaces.
Open the guideA method for bringing AI into your development flow: clear specs, effective prompts, an 8-step pipeline and reviewing the generated code.
Open the guide