Coding Your First Website

Becoming a website developer can be overwhelming. There are many high-level coding languages to master and many frameworks to utilize. This article will cover all the information you need about website development and includes source code that you can use to start your first website project.

Background:

Websites are composed of several different coding languages that each have their specific purpose. A website can be multiple pages or a single page tied to a domain name. Websites that are visible to others are published online using hosting services.

The most common languages used in website development are HTML, CSS, and Javascript. Web developers use coding editors such as Brackets to write the source code used to create websites.

Step 1: Choosing a Code Editor

There is no need to pay for editors.

Choosing a code editor is the easiest part of website development. Several free options are available that provide great features for professional developers. Newberry Software uses multiple editors across all software projects. Our favorite editors are Brackets, Visual Studio Code, and Notepad++.

Step 2: Coding In HTML

What Is HTML?

Hypertext markup language (HTML) is the standard language for website development. This language provides the layout for web pages. HTML contains predefined elements that communicate with web browsers to display information in a specific order.

How To Code With HTML

To begin coding, you must first open your coding editor and create a new file called "index". Make sure you save this file as a .html file. You are now ready to begin coding. Your first HTML program should contain a head and body.

The Head

The head of your HTML program contains the title, links to other software files (such as CSS files), and metadata. The title of your web page can be whatever you want. It will appear at the top of your web browser when you load your website. We will get to the links later. Metadata contains information about your website.

The Body

The body of your HTML program contains all the content of your website. HTML has many pre-defined tags that are useful when building your website. Some of these tags include but are not limited to:

• DOCTYPE- Defines the document type
• a- Defines a hyperlink
• body- Defines the web page's body
• footer- Defines a footer element
• h1 through h6- Defines headings
• head- Contains information for the document
• header- Defines a header element
• html- Defines the root of an HTML document
• link- Defines the linkage between an HTML file and an external resource
• meta- Defines metadata about an HTML file
• nav- Defines navigation links
• p- Defines a paragraph
• script- Defines scripting
• title- Defines a title for the web page

The Source Code

Create a new folder named “Website Project”. Copy and paste the following code in your editor, save the file in your new folder, and open your HTML file through your file explorer to see the result.

<!DOCTYPE html>

<html>

<head>

<title>My first website</title>

</head>

<body>

<h1>Hello World!</h1>

<p>Welcome to my website</p>

<p>This may look boring now, but after using CSS, this will look better!</p>

</body>

</html>

The file should automatically open a web page in your browser. You should see a title at the top of your browser and text on your web page. Feel free to edit the code and see what you can do!

Step 3: Coding In CSS

What Is CSS?

Cascading style sheets (CSS) is a fundamental part of website development. CSS alters the design of your website. While HTML tells the browser which elements to display, CSS tells the browser how to display the elements.

How To Code With CSS?

In the same folder as your HTML file, create a new file named “style”. Make sure to save this file as a .css file. You are now ready to code with CSS.

Element Names

Remember the elements we created in HTML? We need to use the same names in our CSS file so our CSS can communicate with our HTML (this will make more sense when you see the source code).

Styling

To style your HTML, use pre-defined words in CSS such as “color". You will notice that there are many different ways to use CSS. For example, to modify the color of an element, you can use the name of colors such as black. You can also use the hexadecimal notation instead (black is equivalent to #000000). CSS has countless keywords used to style elements. Learn as many keywords as possible to fully customize your website.

The Source Code

Copy and paste the following code in your CSS file and save it. We have just one more step until you can view your changes.

body {

background-color: darksalmon;

}

h1 {

font-family: monospace;

color: black;

font-size: 30px;

text-align: center;

}

p {

font-family: cursive;

color: #222222;

font-size: 20px;

}

Before you can view your changes, we have to modify your HTML. Let us add the modification in the HTML source code below:

<!DOCTYPE html>

<html>

<head>

<title>My First Website</title>

</head>

<body>

<h1>Hello World!</h1>

<p>Welcome to my website</p>

</body>

</html>

Once your file is saved, reload your webpage and see how the CSS styles the HTML.

Step 3: Coding In Javascript

What Is Javascript?

Javascript (JS) is a language used by web developers to make websites interactive. JavaScript can update and change HTML and CSS by calculating, manipulating, and validating data.

How To Code With Javascript?

In the same folder as your HTML file, create a new file named “script”. Make sure to save this file as a .js file. You are now ready to code with Javascript.

The Source Code

We will add a button on your website that displays an alert at the top of the web page. Copy and paste the following code into your JS file and save it. We have just one more step until you can view your changes.

function myFunction() {

alert(document.getElementById("innerHTML_demo").innerHTML);

}

Before you can view your changes, we have to modify your HTML. Let us add the modification in the HTML source code below:

<!DOCTYPE html>

<html>

<head>

<title>My First Website</title>

</head>

<body>

<h1>Hello World!</h1>

<p>Welcome to my website</p>

<p>Try out your button below that utilizes Javascript!</p>

<p id="innerHTML_demo" style="display: none">We hope you enjoyed and learned from our tutorial!</p>

<button onclick="myFunction()">Click Here</button>

</body>

</html>

Once your file is saved, reload your webpage and see how Javascript affects your website.

Overview and Complete Source Code

Now that you have tested your HTML, CSS, and Javascript, let's add a few more changes to update your new website! Copy and paste the following code into the specified files. Feel free to edit the code to see what else you can do!

HTML Source Code

<!DOCTYPE html>

<html>

<head>

<title>My First Website</title>

</head>

<body>

<h1>Welcome!</h1>

<h2>This is a free to use template for beginner web-developers.</h2>

<h3>Feel free to modify and test your changes!</h3>

<p>The button below sends an alert to the top of the page</p>

<p id="innerHTML_demo" style="display: none">We hope you enjoyed and learned from our tutorial!</p>

<button onclick="myFunction()">Click Here</button>

</body>

</html>

CSS Source Code

body {

background-color: #fefae0;

}

h1 {

font-family: monospace;

color: black;

font-size: 36px;

text-align: center;

}

h2 {

font-family: sans-serif;

color: black;

font-size: 24px;

text-align: center;

}

h3 {

font-family: sans-serif;

color: black;

font-size: 20px;

text-align: center;

}

p {

margin-top: 10%;

font-family: cursive;

color: #222222;

font-size: 20px;

}

button {

margin-left: 10%;

padding: 10px;

border-radius: 10px;

transition: .5s;

}

button:hover {

background: salmon;

}

JS Source Code

function myFunction() {

alert(document.getElementById("innerHTML_demo").innerHTML);

}

Frameworks

Frameworks save time and time is money

Like any framework, software frameworks provide support and direction. Frameworks give developers pre-built components that speed up the development process. Newberry Software utilizes many frameworks when building large-scale applications. Frameworks we recommend for developers include but are not limited to: Django, React, Angular, Vue.js, Express.js, and Bootstrap.

Responsiveness

Mobile friendliness is a necessity

Great website developers understand the importance of responsive design. According to Statista, over 90 percent of the global internet population uses a mobile device to go online. Responsive development is not something we have included in this article. However, if you are a website developer who wants to learn responsiveness, contact Newberry Software today. We will be happy to teach you how to make your websites mobile-friendly.

Website Development Resources

The Internet is full of great resources for beginner website developers. Places to learn website development are Code Academy, Udemy, and even YouTube. If you are looking for extra resources or help with website development, contact Newberry Software today. We will help you become a developer.

Est. Read Time: 10 mins

Coding Your First Website

Christopher Newberry

Coding Your First Website

Background:

Step 1: Choosing a Code Editor

Step 2: Coding In HTML

The Head

The Body

The Source Code

Step 3: Coding In CSS

Element Names

Styling

The Source Code

Step 3: Coding In Javascript

The Source Code

Overview and Complete Source Code

HTML Source Code

CSS Source Code

JS Source Code

Frameworks

Responsiveness

Website Development Resources

Newberry Software Blog

Read More Articles

Why Hire A Professional Web-Designer?

How E-Commerce BOOSTS Your Business

Introduction To Website Conversion Rates

Introduction To Search Engine Optimization

Coding Your First Website With HTML, CSS, and JS

Contact Us

Get Your Business Online Today