SypherTecGet a Quote

…

HOME/LEARN/WEB FUNDAMENTALS

TRACK / 01 · HTML · CSS · JAVASCRIPT

Web Fundamentals

HTML, CSS and JavaScript from zero — one continuous track that takes you from a blank file to a working, interactive web page.

CURRICULUM

3 parts, in order.

Part 1 · HTML

Build a structured page from scratch.

01HTML Basics: What a Web Page Is Made OfStart from zero. See how a browser reads a file, why plain text is not enough, and write your first HTML elements.↗

02The Document Frame: A Complete Web PageWrap your content in the standard frame every web page carries: doctype, html, head and body. Put your name in the browser tab.↗

03Headings: Giving Your Page an OutlineTurn a page of paragraphs into a page with named sections, and learn why heading levels form a hierarchy of sections, not a list of sizes.↗

04Paragraphs and Emphasis: Making One Phrase Matter MoreTurn a thin one-line bio into real prose, and learn how to nest elements inside your text so one phrase can carry more weight than the rest.↗

05Lists: Turning a Sentence Into Items a Browser Can CountReplace a comma-separated sentence with a real list, and learn when order matters enough to say so in your markup.↗

06Links and Attributes: Giving a Tag Extra InformationTurn a dead sentence into a real, clickable link, and learn what an attribute actually is, closing the loop on lang and charset from the document skeleton.↗

07Images and Void Elements: A Tag With No Closing PartnerAdd a real photo with <img>, learn what alt text is actually for, and meet the first tag that never gets a closing tag.↗

08Semantic Structure: Naming the Regions of Your PageWrap your page in landmark elements that describe what each region is for, and give it real in-page navigation.↗

09Inputs and Labels: A Real Way to Reach YouAdd real text fields to your Contact section, and learn the exact-match rule that binds a label to its input.↗

10Forms: Giving Submit Its Actual MeaningWrap your fields in a real form, add a working submit button, and learn exactly what happens (and what does not) when a form is submitted.↗

✦CHECKPOINTCheckpoint: You Can Build a Structured PageAct I is complete. Run the page you built, see everything it now contains, and know exactly what Act II will change.↗

Part 2 · CSS

Make that page look deliberate on any screen.

12CSS Attaching: Giving Your Page Its First LookMeet CSS, put a style block in your page, and write your first rule so something on screen changes colour on purpose.↗

13Selectors: Aiming a Rule at the Right PieceLearn when to use an element selector, a class, or an id, then put classes on your sections so later styles can hit the right targets.↗

14External Stylesheet: Giving CSS Its Own HomeMove your growing style block into its own styles.css file and connect it with <link>, so HTML and CSS each get a home built for them.↗

15Colour Values: Giving Your Page a PaletteMove beyond one borrowed colour name. Learn named colours, hex codes and rgb values, apply a real palette to your page, and learn to spot text that is hard to read against its own background.↗

16File Paths: How a Browser Finds a FileMove your stylesheet into a folder, break the link that finds it, then repair it, learning exactly how relative and absolute paths resolve.↗

17Typography: Giving Your Words a VoiceSet a font stack with a real fallback, size your name on purpose, space out your paragraphs, and lighten your headings with font-weight.↗

18The Box Model: Giving Your Sections Room to BreatheLearn the box model: padding inside your sections, a border where you choose one, and margin between them, so your page stops feeling cramped.↗

19Block, Inline, and Inline-Block: Placing Elements in the FlowLearn how display controls whether an element takes a full-width line, sits inside a sentence, or does both at once, and turn your GitHub link into a real button.↗

20Flex Containers: Turning a Stacked List Into a RowLearn how display: flex turns a container's direct children into flex items, and give your Skills list the shape of a row of cards.↗

21Flex Alignment: justify-content, align-items, and gapLearn how justify-content and align-items position items along a flex row's two directions, and how gap gives clean spacing without a margin trick, as your nav spreads out and your Skills cards space themselves evenly.↗

22Page Layout: Centering Your Content and Giving It RhythmLearn how max-width caps a column's width, margin: 0 auto centers that column on the page, and repeating one spacing value between sections gives the whole page a sense of rhythm instead of a stack of separately styled pieces.↗

23Responsive Basics: Media Queries and Mobile-First DesignLearn how @media wraps CSS rules so they only apply once the screen is at least a chosen width, and how writing mobile-first, plain rules for a small screen first, with media queries adding a row layout for wider ones, lets your nav and skill cards adapt to a phone instead of staying identical at every size.↗

✦CHECKPOINTCheckpoint: You Can Make a Page Look DeliberateAct II is complete. Run the page you built, see what CSS added on top of Act I's structure, and know exactly what Act III will change.↗

Part 3 · JavaScript

Make that page respond to its visitor.

25JavaScript First Steps: Values, Variables, and the ConsoleMeet JavaScript in a script tag at the end of your page, store values in variables, print them with console.log, and see how a JavaScript error shows up where HTML never would.↗

26Selecting and Changing the Page: querySelector, textContent, and classListFind an element on your page with querySelector, change its text with textContent, mark it with classList, and see what happens when the script runs before the element exists.↗

27Functions: Name a Block of Steps and Reuse ItWrap your tagline logic in a function with a parameter, call it by name, and change the tagline by passing a different string.↗

28Events: Listen for a Click and Run a FunctionAdd a button to your page, wire it with addEventListener, and change the tagline when a visitor clicks.↗

29If and Else: Choose a Path with a ComparisonAdd a theme button, compare a value with ===, and use if/else to flip your page between light and dark.↗

30Arrays: A List of Values with IndexesStore your skills in an array, read length and the first item by index, and log them in the console.↗

31Loops: Walk an Array with for…ofClear the hard-coded skill cards, walk your skills array with for…of, build each card with createElement and append, and wire a click handler inside the loop so each card remembers its own skill.↗

32Objects: Labeled Data with name and roleStore a profile as an object, drive the header from its fields, and upgrade your skills array from strings to objects so each card reads skill.name.↗

33Form Feedback: Read an Input and Answer BackAdd a feedback line, read the name field with .value on submit, call preventDefault, and show Thanks with the name they typed.↗

34Accumulation: Count Matches with a Running TotalStart a count at 0, walk your skills with for…of and if, store count = count + 1 for each match, and show the total on the page.↗

✦CHECKPOINTCheckpoint: You Can Build a Page That RespondsAct III is complete. Run the page you built, see what JavaScript added on top of structure and design, and know what the capstone asks next.↗

Capstone

Prove the pieces travel: a second app, from scratch, without rails.

✦CAPSTONECapstone: Build a Quiz App From ScratchProve the track travels: a mini quiz app with HTML structure, CSS layout, and JavaScript scoring over an array of question objects. No starter rails. A second project, not another section on your profile.↗