CodeNewbie Community

Cover image for how to create a webpage in 5 minutes.
Kavindu Santhusa
Kavindu Santhusa

Posted on

how to create a webpage in 5 minutes.

This is a concise article introducing you to the practicalities of web development. You'll set up the tools you need to construct a simple webpage and publish your own simple code.

The story of your first website

It's a lot of work to create a professional website, so if you're new to web development, we encourage you to start small. You won't build another Facebook right away, but it's not hard to make your own simple website online, so we'll start there.

  1. create index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/myimage.png">
  </body>
</html> 
Enter fullscreen mode Exit fullscreen mode
  1. place your image in images/myimage.png > see <img src="images/myimage.png"> line in index.html.

Now your folder looks like

mywebsite/
├── index.html -> see below
├── images/
│   └── myimage.png -> place any image
├── styles
├── scripts
Enter fullscreen mode Exit fullscreen mode
  1. Open index.html file with web browser.

🎉 You created your first web page. It looks like.
A Pen by Kavindu Santhusa (codepen.io)

Learn More

Installing basic software

When it comes to tools for building a website, there's a lot to pick from. If you're just starting, you might be confused by the array of code editors, frameworks, and testing tools out there.

What will your website look like?

Before you start writing the code for your website, you should plan it first. What information are you showcasing? What fonts and colors are you using?

Dealing with files

A website consists of many files: text content, code, stylesheets, media content, and so on. When you're building a website, you need to assemble these files into a sensible structure and make sure they can talk to one another.

HTML basics

Hypertext Markup Language (HTML) is the code that you use to structure your web content and give it meaning and purpose. For example, is my content a set of paragraphs or a list of bullet points? Do I have images inserted on my page? Do I have a data table?

CSS basics

Cascading Stylesheets (CSS) is the code that you use to style your website. For example, do you want the text to be black or red? Where should content be drawn on the screen? What background images and colors should be used to decorate your website?

JavaScript basics

JavaScript is the programming language that you use to add interactive features to your website. Some examples could be games, things that happen when buttons are pressed or data is entered in forms, dynamic styling effects, animation, and much more.

Publishing your website

Once you have finished writing the code and organizing the files that make up your website, you need to put it all online so people can find it.

How the web works

When you access your favorite website, a lot of complicated things happen in the background that you may not know about.

The End

Thank for reading this article.
🏃‍♂️Follow me for more articles.
💖 or 🦄 this article if you can.

Discussion (0)