19 topics
Web development help, including why that CSS rule is being ignored
When a CSS rule appears to do nothing, it is almost never a typo — another rule is winning on specificity. An id selector beats any number of classes, a class beats a tag, and inline styles beat all of them. Open the element inspector and look for your property with a line through it: the browser is showing you exactly which rule overrode it, and reaching for !important instead just moves the argument one level up.
Where students get stuck
My CSS rule is in the file but nothing changes
Work through three checks in order. First, is the rule reaching the element at all? Inspect the element and look for your selector in the styles panel; if it is absent, the selector does not match. Second, is it there but struck through? Then a more specific rule wins — count the id, class and tag parts, because 0-1-0 beats 0-0-5 no matter how far down the file yours sits. Third, is the property one that has no effect on that element, like width on an inline span. Only when all three pass is it worth suspecting a caching problem.
z-index is set high and the element is still behind
z-index only compares elements inside the same stacking context, and a lot of ordinary CSS quietly creates one: a transform, an opacity below 1, a filter, or position with a z-index on an ancestor. If your element sits in a context whose parent is behind another context, no value on the child can lift it out — a z-index of 9999 inside a context stacked at 1 still loses. Find the nearest ancestor that creates a context and raise that instead, or move the element out of it in the markup.
Centring a div still defeats me
Pick the mechanism by axis. For one element inside a container, set the container to display: flex with justify-content: center for the horizontal axis and align-items: center for the vertical, and give the container a height, because centring vertically inside a container that has collapsed to the content height does nothing visible. For a block element with a known width, margin-inline: auto still works and needs no flexbox. Text inside a box is a different problem again: that is text-align, which does not move the box itself.
My fetch returns undefined even though the network tab shows data
The request has not finished when your next line runs. fetch returns a promise immediately, so reading the variable on the following line reads it before the response arrives. Await it, and remember there are two awaits: one for the response and one for response.json(), because reading the body is also asynchronous. Also, await only exists inside an async function, and an async function itself returns a promise — so the caller has to await too, or the same undefined appears one level up.
CORS error, and it works fine when I open the file directly
CORS is enforced by the browser, not by your code, and it is the server you are calling that has to allow you. Opening the HTML file straight from disk gives the page a null origin, so behaviour there tells you nothing. Serve the page over http from a local server and read the actual message: a missing Access-Control-Allow-Origin header is the server's to add, while a failed preflight usually means your custom header or content type triggered an OPTIONS request the server does not handle. You cannot fix either from the front end alone.
What's covered
Web Development topics you can work through with a tutor, generate practice on, or turn into flashcards and a study plan.
HTML and accessibility
- Semantic elements: header, nav, main, article, section
- Forms, labels, and input types
- Images, alt text, and responsive srcset
- Headings order, landmarks, and keyboard focus
CSS and layout
- The box model, box-sizing, and margin collapse
- Specificity, the cascade, and inheritance
- Flexbox: main axis, cross axis, and flex-grow
- CSS Grid: template columns, areas, and gaps
- Position: static, relative, absolute, fixed, and sticky
- Media queries and mobile-first responsive design
JavaScript in the browser
- DOM selection and event listeners
- Functions, closures, and the value of this
- Promises, async and await, and the event loop
- fetch, JSON, and handling errors from a request
- Form validation and localStorage
Building and shipping a project
- Git basics: commits, branches, and merge conflicts
- Component thinking and reusable markup
- Browser devtools: elements, console, and network panels
- Deploying a static site and reading a build error
Web Development questions
Can it see the page I am building?
Share your screen and it reads your markup, your styles panel and your console together. That combination is what makes layout bugs solvable, because the answer to a broken layout is usually visible in the computed styles rather than in the stylesheet you wrote.
Will it just build the site and hand it over?
No. On a web project that would be self-defeating, because the marks and the interview questions both come from being able to explain why you laid something out the way you did. It works through the layout decision with you on the whiteboard, then you write the CSS and it reviews what broke.
Which framework does it assume?
None by default. Plain HTML, CSS and JavaScript come first, since a React problem is very often a JavaScript problem wearing a costume. If your course or project uses a particular framework, say so and it stays there, including its own conventions for state and routing.
Can it help me plan a portfolio project rather than fix a bug?
Yes. Scoping is where most student projects fail — the plan is three months of work for a two-week deadline. A voice session is good for cutting that down to a version that ships, deciding what is genuinely required, and setting an order of build so you always have something that runs.
Stuck on web development right now?
Talk it through out loud, share your screen, and watch it worked out step by step on a whiteboard.
Start free — no card