How to Build a Simple Website with Just a Text Editor

Learn to create a basic website using only a text editor with this beginner-friendly family guide.

  1. Choose Your Text Editor. Every computer comes with a basic text editor. On Windows, use Notepad (found in Start Menu > Accessories). On Mac, use TextEdit (found in Applications > Utilities). Make sure TextEdit is set to plain text mode by going to Format > Make Plain Text. These simple programs are perfect for writing the code that creates websites.
  2. Create Your First HTML File. Open your text editor and type this basic structure: Start with <!DOCTYPE html> on the first line, then <html> on the next line. Add <head> and </head> tags, then <title>My First Website</title> between them. Close the head section and add <body> and </body> tags. Between the body tags, write <h1>Welcome to My Website</h1> and <p>This is my first webpage!</p>. End with </html>. Save this file as 'index.html' (make sure to include the .html extension).
  3. Add More Content to Your Page. Between your body tags, you can add different types of content. Use <h1>, <h2>, or <h3> tags for headings of different sizes. Use <p> tags for paragraphs. Create lists with <ul> for bullet points and <li> for each item. Add images with <img src='filename.jpg' alt='description'>. Remember that every opening tag needs a closing tag (except for img tags).
  4. Make Your Website Look Better with CSS. CSS makes your website look more attractive. In the head section of your HTML, add <style> and </style> tags. Between these, you can change colors and fonts. For example, write 'body { background-color: lightblue; font-family: Arial; }' to make the background light blue and change the font. Use 'h1 { color: red; }' to make your main heading red. Experiment with different colors and styles.
  5. View Your Website. To see your website, find the HTML file you saved on your computer and double-click it. It will open in your web browser and look like a real website. When you make changes to your text file, save it and refresh your browser to see the updates. You can keep the text editor and browser open side by side to see changes instantly.
  6. Add Multiple Pages. Create additional HTML files for different pages, like 'about.html' or 'contact.html'. Link them together using <a href='about.html'>About Me</a> tags. This creates clickable links that take visitors to different pages. Make sure all your HTML files are saved in the same folder so the links work properly.