Your first website

{{LearnSidebar}} 

{{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Command_line", "Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like", "Learn_web_development/Getting_started")}} 

This module introduces you to the practicalities of web development. You’ll gather the assets and write the code to construct a simple webpage, then publish it for the world to see.

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.

Prerequisites

This module assumes no prior knowledge of web technologies, but you should already be comfortable with using your operating system, including using the file system and browsing the web. You should have a code editor and multiple web browser installed.

If this is not the case, we’d suggest that you run through the Environment setup module first.

Tutorials

• 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? Here we’ll outline a simple method that you can follow to plan out your site’s content and design.

• Creating the content

  • : HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. This article provides a basic understanding of HTML and its functions, and shows you how to create the basic content for your first website.

• Styling the content

  • : CSS (Cascading Style Sheets) is the code that styles web content. Styling the content walks through what you need to get started. We’ll answer questions like: How do I make text red? How do I make content display at a certain location in the (webpage) layout? How do I decorate my webpage with background images and colors?

• Adding interactivity

  • : JavaScript is a programming language that adds interactivity to websites. This happens in games, in the behavior of responses when buttons are pressed or with data entry on forms, with dynamic styling, with animation, etc. This article helps you get started with JavaScript and furthers your understanding of what is possible.

• Publishing your website

  • : Once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it. This article explains how to get your sample website online with little effort.

{{PreviousMenuNext("Learn_web_development/Getting_started/Environment_setup/Command_line", "Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like", "Learn_web_development/Getting_started")}} 

See also

• The Frontend Developer Career Path ^{MDN learning partner}
  • : Scrimba’s Frontend Developer Career Path teaches all you need to know to be a competent front-end web developer, with fun interactive lessons and challenges, knowledgeable teachers, and a supportive community. Go from zero to landing your first front-end job! Many of the course components are available as standalone free versions.