Study order, not a course list
A path is a sequence where each step makes the next one easier. Here is the order that works: HTML5 and CSS3, then responsive layout, then JavaScript, then a tool, then interface design, then UX — with the portfolio built alongside from the beginning.
Course lists are not learning paths.
The order matters more than the provider you pick. A course is one move on this board; skipping a move is what makes learning feel like it stopped working. Nothing here is locked to one college — these are the subjects most Canadian front-end and design programs teach first, and the sequence they assume you already have.
01
Structure and presentation only make sense in each other's company, so learn them as a pair. HTML5 gives you the structure; CSS3 controls layout, typography, spacing, and visual presentation. Most beginner courses teach the two together, and BCIT's COMP 1850 Web Design and Development with HTML is a good example of the applied, standards-first approach: hand-coded pages built to W3C standards. Expect four to eight weeks to reach basic comfort.
Reach for this when: you can build a two-column page from a blank file without a template.
02
Once a page renders on a desktop, make it work on a phone. This is where layout thinking begins, and it is usually taught with CSS3 as an extension of it rather than as a separate subject. Practise by taking a page you built and rebuilding the layout so it reflows at three or four widths. It is unglamorous work, and it is the single most useful habit in the whole sequence.
Reach for this when: one page holds at 375, 768, 1024, and 1440 pixels without horizontal scroll.
03
JavaScript is where pages start responding to people. You do not need to become an engineer to benefit. Variables, functions, events, and basic DOM manipulation cover what most entry-level roles expect and what most front-end programs teach first. George Brown's program and NAIT's pathway both build around HTML, CSS, and JavaScript, which tells you the market treats this as core rather than optional.
Reach for this when: you can make a button change the page and you can explain why it happened.
04
WordPress remains the platform most Canadian small businesses actually run. Learning it after HTML and CSS means you can modify themes rather than merely install them, which is the difference between charging for setup and charging for work. George Brown lists WordPress among its recommended courses. If you plan to freelance, this step is close to mandatory.
Reach for this when: you can change a theme's template files with confidence, not just its settings screens.
05
Figma is a widely used interface design and prototyping tool and sits at the center of modern UI and web design workflows, with collaborative browser-based use being a major draw. It is also common in portfolio projects and client presentations. At this stage you are learning to make design decisions deliberately: type scale, spacing, hierarchy, and how a user moves through a screen.
Reach for this when: you can hand a component to someone else and they can build it without asking questions.
06
UX Design Fundamentals appears in recommended course lists because front-end and design work both run into it. The subject covers how people navigate, where they get lost, and how to test an assumption without a budget. One course is enough to change how you look at a page. It will not make you a UX researcher, and it is not meant to.
Reach for this when: you can name what a real user hesitated over and suggest one change.
Start collecting finished work at step two, not step six. Every rebuilt layout, every fixed breakpoint, every small piece of interaction you can describe is a candidate portfolio piece. Most of these exercises will not make the final cut, and that is the normal outcome of editing rather than a sign you picked the wrong course. What you are really practising is the habit of finishing.
A finished rebuild at four widths teaches more than a half-built "proper" version you never open again. Set a stop point before you start and keep it.
Why this column order, why this type size. Employers and freelance clients read the reasoning as much as they look at the result, so get used to attaching it.
Copying a layout you admire removes the blank-page problem and keeps your practice focused on the skill of that step rather than on deciding what to make.
Two focused evenings every week beats a single weekend burst every month. The variable that matters most is not total hours but consistency, so here is roughly where consistency lands you.
About two months
One shippable project
You can hand-code a real page, hold it together across screen widths, and explain every choice in it out loud without notes. That is the point where the work becomes showable.
Four to six months
A working direction
Steps three to five are behind you in some form, and you can tell whether you lean toward building or toward designing. This is the moment a certificate or microprogram starts to be worth the time and money, because you finally know which one fits.
About a year
A three-piece portfolio
Three to five pieces, including one responsive site, one interface design piece, and one where you explain your decisions in writing. At five to eight hours a week this is reachable in roughly a year; faster is possible at fifteen hours a week, slower if life intervenes.
Timelines are habits, not promises — they move with how often you sit down, not with which provider you choose.
The target for a first job search is three to five projects. Pick them for range rather than volume: one responsive site that behaves well on a phone, one interface design piece where the visual decisions are visible, and one where you explain your decisions in writing. A portfolio page that shows a before-and-after of your own reasoning is doing more work than a gallery of finished screens, because it shows a reader how you think when a problem changes.
Certificates and microprograms are worth considering once you know which direction you are going, and not before. Choose one after step three, when you can tell whether you lean toward building or toward designing. Two examples show how differently they can be shaped.
NAIT's Web Design Certificate comes after five courses in a code-focused pathway, which suits learners who already know they want to build rather than art-direct. It sits naturally after steps one to four on this list.
NAIT Web Design Core CertificateConcordia's nine-credit microprogram is three courses over thirteen weeks with a design orientation. It rewards learners who have already done step five and want structure around interface and UX decisions.
Concordia Web Design and User Interface MicroprogramJudge them by the same test as the earlier steps: does the program produce finished work you can show, and does it sit after the skills you already have rather than in front of them? A credential added at the wrong moment costs a term and leaves you collecting certificates instead of projects.
This sequence is written for adults starting from zero in Canada, with no design background and no code background, who can give it a few evenings a week. It assumes a laptop and an internet connection. It does not assume a math or art background, and it does not assume you have already chosen a college.
If you already write CSS confidently, start at step two and move faster. If you have done some design work, still do step one properly — a surprising amount of design trouble is really a structure problem that HTML would have surfaced.
How we compare programsA working laptop, a few undisturbed hours a week, and the willingness to finish small things repeatedly. No portfolio, no prior coursework, no specific college affiliation is required to start at step one.
It is not a guarantee of employment, and it is not a substitute for a hiring process that looks at your work. What it does is give you a defensible way to explain what you know, in the order you learned it.
If a program you have already enrolled in teaches WordPress first, do not fight it — do the HTML and CSS step alongside it. The sequence is a logic, not a bureaucracy, and the point is always the next piece of work you can show.
The work simply takes longer than the marketing implies, and the pace usually shows up as a portfolio nobody can assess.
You will learn the interface without the reasoning underneath it, which makes the first unexpected layout almost impossible to fix.
If the syllabus ends in an exam instead of a piece you would show someone, you will still need the portfolio afterward — and you will be behind on it.
Two strong portfolio pieces outweigh four credentials in most entry-level hiring conversations. Certificates help most when they sit behind work that already exists.
Ask one question about the first assignment: what will I have made by the end of this course, and can I look at something similar before I pay? If nobody can show you a finished student piece from that course, treat it as a warning sign rather than a timing problem.
Then check the pace against your week. A course that requires more hours than you actually have is not a bad course — it is simply a bad fit for this term, and the sequence above still works if you start it later.
Compare programs side by sideShort answers to the two questions that come up most often once someone has seen the order above.
With consistent part-time study, roughly nine to twelve months from zero, assuming you finish three to five portfolio pieces. Timelines vary most with consistency, not with which courses you pick.
After. Learning structure first makes design decisions concrete rather than abstract, and most interface work assumes you understand how a layout will actually be built.
Pick one page you like, rebuild it in HTML and CSS, and check it on a phone. That one evening does more for your path than a week of comparing syllabi. When you are ready to choose a course, we can walk through the options with you.
128 West Hastings Street, Vancouver, BC V6B 1G8, Canada
+1 514-502-5319
info@zelanovir.com
Monday to Friday, 9:00 AM – 6:00 PM
