How to Create a Website for Beginners
Build a real website with HTML, CSS, and JavaScript. No React, no drag-and-drop builder. A beginner-friendly Eleventy walkthrough from first clone to a live site.
Every website should be built from HTML, CSS, and basic JavaScript for interactivity. You do not need a framework like React, a drag-and-drop builder, or a template you cannot leave.
Plain web development is enough to create a good site, and it is useful knowledge to have. You need some of it, but it is easier to pick up now than it used to be, because the best resources are free.
Learn the basics first
One resource I always recommend is MDN: free, clear, and easy to learn from. There are plenty of others, and the right one depends on how you like to learn. I will not list them all here. Start with HTML, CSS, and a little JavaScript, then come back to this guide when you are ready to put a real site together.
Besides the code, you also need a simpler static site generator. I use Eleventy. It gives you full control over what your project outputs.
Why Eleventy?
Fast builds, and even faster websites, are enough for almost any project. Eleventy does not hide the HTML. It does not invent a new way to write CSS. It just makes a static site easier to manage.
I use my own Eleventy starter. It is minimal, organized, and gives you a working site in seconds. If you would rather build your own from scratch, start at 11ty.dev.
Step-by-step: from clone to live site
1. Clone and install
git clone https://github.com/cristianvmac/Eleventy-Starter.git
cd Eleventy-Starter
npm install
2. Start the dev server
Run npm start. You get a live preview at http://localhost:8080 and a local CMS at /admin.
3. Set global data
Fill in src/_data/client.js with your site name, email, socials, and domain.
4. Edit the design
Change CSS variables in src/assets/css/root.css to update colors, fonts, and spacing. The whole site follows those values.
5. Create pages
Run npm run create-page -- "Page Name" to scaffold a new page, or add an .html or .md file in src/content/pages/.
6. Add content
Write blog posts in src/content/blog/, or use the CMS at /admin if you would rather not touch code for every article.
7. Add images
Use the {% image %} shortcode in templates. It generates responsive WebP and JPEG versions for you.
8. Add interactivity
Write plain JavaScript in src/assets/js/main.js. No framework, no build step beyond what you already have.
9. Build for production
Run npm run build. Eleventy writes a public/ folder of static files ready to host.
10. Deploy
Push the repo to GitHub, import it in Netlify (it detects the settings), and the site is live.
You still own the code
This starter is a complete, professional workflow, and it never hides what is underneath. Every template is editable. Every CSS rule is yours. Every JavaScript function is plain and readable. Customize it however you like, and it will not look like an AI-generated page or a predictable builder template.
If you want to remove the CMS, run npm run remove-decap. If you want only the basics, run npm run remove-demo. You are not locked into a platform or a no-code tool. You are writing real HTML, CSS, and JS. Eleventy just makes it faster and easier to manage.
Best of all, it is free from the first line of code to a live deployment on Netlify's standard free tier.
If you already know you want a custom-coded site, but would rather not set the stack up yourself, start here.
FAQs
No. HTML, CSS, and a little JavaScript are enough. Frameworks and drag-and-drop builders add complexity and lock you into someone else's templates. A static site you control will look better, load faster, and stay yours.
Start with MDN (developer.mozilla.org). It is free, well written, and covers the basics without pushing a framework. After that, pick whatever extra resources match how you like to learn.
Eleventy is a static site generator that gives you full control over the output. Builds are fast, the live site is faster, and every template, CSS rule, and JavaScript function stays readable. You are not renting a platform.
Yes. The starter kit is open source, Eleventy is free, and you can deploy on Netlify's standard free tier. From the first line of code to a live site, there is no required paid plan.
Run npm run remove-decap to drop the CMS, or npm run remove-demo to keep only the basics. You are not locked into either. You can also skip the starter entirely and follow the docs at 11ty.dev.
