Beginner’s Guide to Web Development

View All Chapters
Badge writing your first web page

Writing Your First Web Page

4 minute read

Once you’ve got an idea for the kind of web page you want to build, you’ll need to start writing some HTML and CSS.

HTML is a markup language that was created solely for making web pages. The idea is that, at their core, web pages are just a bunch of text and images arranged on the screen in different ways, and markup is just a way to attach instructions for how to make those text and images appear.

For example, take this simple list of Paths on codeschool.com:

2-by-2 grid of Code School Paths

It looks like there’s a lot going on, but if we take away all the visual formatting, it will look like this:

Unstyled, stacked list of Code School Paths

Now there’s a lot less going on. The only difference between the two is that to generate the screenshot in the second image, we deleted all the CSS code and left just the HTML code in place — HTML code that looks a lot like this:

<body> <nav> <li>Paths</li> <li>Courses</li> <li>Screencasts</li> </nav> <main> <section> <img src="html-css-badge.png" /> <h2>HTML/CSS 12 courses</h2> <p>Learn the fundamentals of design, front-end development...</p> </section> <section> <img src="javascript-badge.png" /> <h2>JavaScript 17 courses</h2> <p>Spend some time with this powerful scripting language and learn...</p> </section> </main> </body>

The words “Paths,” “Courses,” and “Screencasts” are just text, but by putting them inside of those <nav> and <li> tags, the web browser knows to display them as a bulleted list. The <img> tag is used to load an image — in this case, the circular badge icon that represents that learning Path. <h2> stands for “heading 2” — you can think of heading tags as outlining the main sections of a page. Finally, <p> is short for “paragraph,” and any time you need to show some simple text on a web page, it will likely be in a <p> tag.

The <main> and <section> tags are just a way to group that content at an even higher level. For example, each <img>, <h2>, and <p> tag is wrapped in a <section> tag to show that those three are all related information. Each of those sections is a part of the main area of the page, so that gets wrapped in a <main> tag. There are over 100 specific HTML tags that all have a different purpose, and at least knowing how to find the right tag that fits your specific need is an important part of being a web developer.

Which Browser Should I Use?

The web browser knows how to take all those tags and the content inside them and display them as a web page. But if all browsers have the ability to display web pages, then why isn’t there just one instead of multiple? Well, each browser implements the rendering of HTML and CSS a little differently.

This is actually a source of much stress for web developers — they have no way to control which web browser a user will experience their site with, so they spend a lot of time tweaking CSS to ensure it displays equally as close as possible across all different browsers.

Styling the Page

While HTML is a markup language used for arranging content on a page, CSS is a separate language for changing the style of how those tags are displayed. We started this article by removing all the CSS, so let’s look at how we can add CSS back in.

It’s a best practice to store your CSS code in a separate file from your HTML code and then link to it from your HTML. For example, if you’ve got a CSS file named main.css in the same folder as an HTML file named index.html, you’d link to it from the <head> of the index file, like this:

<head> <link rel="stylesheet" href="main.css"></link> </head>

Then, in main.css, you can write CSS rules that change the way HTML tags appear in a browser. Remember how our sections originally looked like boxes with an image and text in them, but when we took away the CSS file, those boxes disappeared? We could add them back in like this:

section {
  display: inline-block;
  border-radius: 4px;
  max-width: 400px;
  border: 1px solid lightgray;
}

This CSS is selecting all of the section tags and applying four properties to those tags.

What about the navigation menu? We want those Paths/Courses/Screencasts links to appear from left to right instead of stacked top to bottom, and we could accomplish that like this:

nav {
  list-style-type: none;
}
nav li {
  display: inline;
}

This CSS removes the bullet points from each of the three items in the list, and then the display: inline rule tells those list items to display left to right.

Like HTML tags, there are hundreds of CSS properties and a few dozen different ways to select which HTML tags to apply those rules to, and while a web developer doesn’t necessarily need to memorize all those properties, they do need to be familiar with how to research the ones they need and put them into practice.