Why Scratch, Not Squarespace
Website builders are genuinely good for many purposes. If you need a portfolio or personal site and have no interest in web development, Squarespace or Webflow will serve you well. But there’s a case for building from scratch that isn’t about snobbery — it’s about what you learn in the process. Building a website from HTML, CSS, and a small amount of JavaScript teaches you how websites actually work at a level that no template-based builder ever will, and that knowledge compounds across everything you do on the web.
It also gives you complete control. No subscription that can raise prices. No platform that can deprecate features. No template fighting back when your design deviates from what it was built for. A simple personal website built from scratch can be hosted for free or near-free indefinitely on platforms like GitHub Pages or Netlify.
What You Actually Need to Learn First
HTML is the structure — the bones of every web page. It’s a markup language, not a programming language, which means you’re annotating content with tags rather than writing logic. Understanding the basic tags, how nesting works, and what semantic HTML means (using the right tag for the right content type) will take most people a week of casual learning. CSS is the appearance — what everything looks like, where it sits, how it responds to different screen sizes.
CSS is more complex than beginners expect, primarily because the layout systems — Flexbox and CSS Grid — require a different mental model than most intuitions suggest. Investing real time in understanding Flexbox will pay off throughout your front-end work. The CSS box model — how every element has content, padding, border, and margin — is the other concept that, once understood, makes debugging CSS visual problems much faster.
Structure Your Project Well From the Start
A personal website doesn’t need a complex file structure, but starting with a sensible one saves reorganisation later. A basic structure: an index.html at the root for your main page, a css/ folder with your stylesheets, an img/ or assets/ folder for images, and additional HTML files for any other pages. Use a single external stylesheet rather than inline styles. Use CSS custom properties (variables) for colours, font sizes, and spacing values you use repeatedly — changing them in one place rather than hunting through your CSS is immediately useful.
Mobile-First Design
The most reliable approach to responsive design is to design for mobile first and expand for larger screens. Write your base CSS for small screens, then use media queries to add complexity for larger screens. This tends to produce cleaner code than starting with desktop and trying to squeeze it down. Most visitors to a personal site will arrive on mobile; designing for them first ensures the experience is intentional rather than an afterthought.
Where to Host It for Free
GitHub Pages is the simplest option for a static HTML/CSS/JS site. You push your files to a GitHub repository, enable Pages in the settings, and your site is live. Custom domains are supported if you want to use your own URL. Netlify offers a similar service with a slightly nicer deployment experience. Both services give you HTTPS by default, which matters for security and search engine rankings. Neither requires a paid plan for a basic personal site.
The Part Where You Learn the Most
The most educational part of building a personal website from scratch is usually not the initial build — it’s the iteration. Adding a feature, figuring out why the layout breaks on a certain screen size, making the typography work well at different sizes. These are the problems that teach web development as a craft rather than a set of facts. The first version will be imperfect; building it anyway, then improving it, is the actual learning process. Every problem you debug teaches you something that reading documentation alone never could.
Watch: Related Video
Sources
- MDN Web Docs. (2024). Learn Web Development. developer.mozilla.org/en-US/docs/Learn.
- GitHub Pages Documentation. (2024). github.com/pages.
- CSS-Tricks. (2024). A Complete Guide to Flexbox. css-tricks.com/snippets/css/a-guide-to-flexbox.