I'm still fairly new to programming and have been learning for a few months. I decided to build a website using HTML, CSS, and JavaScript, but I'm finding the experience very different from making small games with a graphics library. With a game library, I could control most of the details myself once I understood the fundamentals. In the browser, CSS often feels like a high-level system that makes many layout and rendering decisions for me. For example, I want images to zoom and scale in a specific way, but I'm not sure how to reason about the problem or find the right CSS approach. Is there a lower-level way to create websites, such as using canvas, WebGL, or WebAssembly? Or is this difficulty a normal part of learning web development, meaning I should focus on understanding the browser's existing HTML and CSS models first?
4 Answers
CSS is not necessarily hiding a simpler pixel-level system from you; it uses a different way of thinking. There is no single ideal viewport, so a good page has to adapt to different screen sizes, fonts, input methods, and browser conditions. That means you generally guide the browser with layout rules rather than micromanaging every position. Writing resilient CSS is genuinely difficult even for experienced developers, so needing to look up techniques is normal.
For ordinary browser-based websites, HTML, CSS, and JavaScript are already the foundational technologies. You can use canvas, WebGL, or WebAssembly when you need custom drawing or game-like rendering, but those tools don’t replace HTML and CSS for normal interface work. It’s usually better to become comfortable with the browser’s built-in model before reaching for a lower-level approach or a framework.
The transition from a game loop, where you control each step, to CSS’s declarative layout system can be pretty jarring. CSS describes the result you want and lets the browser calculate the details, which is excellent for responsive interfaces but frustrating when you need an unusual visual effect. Canvas and WebGL can provide a more direct, immediate-mode style of control, though they also make you responsible for many things the browser normally handles.
WebAssembly can let you run code compiled from another language in the browser, and server-side or statically generated sites move some work away from the client. None of those approaches removes the need to understand HTML and CSS when you are building a conventional web interface. For a specific image zoom effect, start by isolating it in a small HTML/CSS example and experiment with properties such as transform, transform-origin, overflow, and object-fit. Small experiments are often more useful than trying to design the whole solution at once.
That makes sense. I’ll try to learn the CSS layout model instead of assuming it should work like a graphics library.