Build Your First Web Page, Then Improve It
Ibrahim Foday
Your first project should be small enough to finish today. Make a one-page profile for yourself, a community group, or a small local business. The point is not to impress anyone yet. The point is to move through the full loop: decide, build, test, and improve.
1. Decide the job of the page
Write one sentence before opening the editor: “This page helps people learn who I am and how to contact me.” That sentence protects you from adding ten unrelated sections. Choose a title, one short introduction, one image, and one action such as a contact button.
2. Start with structure, not decoration
<main>
<h1>Amara builds useful things</h1>
<p>I am learning web development with TeKi-SL.</p>
<button id="hello">Say hello</button>
</main>Type this into the TeKi-SL compiler instead of pasting it. Change the name and sentence before you run it. HTML gives the page meaning and order; it comes before visual styling because a clear page is easier to improve than a pretty confusing one.
3. Add only three visual choices
- Choose one background colour and one text colour with clear contrast.
- Give the main content breathing room with
padding. - Make the button look clickable and easy to tap.
body { font-family: system-ui, sans-serif; margin: 0; }
main { max-width: 42rem; margin: 4rem auto; padding: 2rem; }
button { padding: 0.75rem 1rem; border: 0; border-radius: 0.5rem; }4. Add one behaviour you can explain
document.querySelector('#hello').addEventListener('click', () => {
alert('Thanks for visiting my page.');
});Finish before you expand
Run the page on a phone-sized browser window. If the text is readable and the button works, you have a complete first project. Save it, then make one improvement at a time.
5. Use a trusted next reference
This sequence follows the practical order used in MDN’s “Your first website” learning material: plan the page, create the content, style it, add interactivity, then publish. Use MDN when you need a deeper explanation, but keep making small finished pages while you study.
Related
