CodeNewbie Community

loading...

How to Build a Web Page

Sarah Bartley
Front-end web developer | Moderator for Elphas Can Code | Creator of Disney Codes Challenge
Updated on ・5 min read

Originally published on July 5, 2017 on The Original BritishPandaChick as How to Build a Web Page with Codeacademy. I made tweaks to the original post so it would work for Code Newbie.

Over the past few months, we have been learning HTML & CSS. You have learned a variety of tags and CSS properties, but you have been mostly playing around with them in code. You haven’t built too many things yet besides a navigation bar.

That changes today!

In Skillcrush 101, the final part of the course is building websites. Skillcrush walks you through one website and goes over some last-minute HTML & CSS tips as you bring a website to life. However, today’s post is taking a break to Skillcrush to jump over to Codecademy. I’m going to show you how to build a simple web page from the Codecademy section on HTML.

If you are still learning HTML & CSS, you can still follow along with this tutorial since it is a great way to practice applying the skills you are already learning. But if you are still not comfortable building your own projects yet, feel free to do some of the Codecademy tutorials in the HTML section before doing this activity.

Before we begin, here’s what you’ll need.

If you have been working your way through the blog posts, chances are you have been using a text editor to write your code. If you are a newbie and never heard of a text editor, a text editor is where you edit text files especially files for HTML & CSS. As a developer, you'll be using your text editor quite often to write and edit code.

There are tons of text editors available for developers and these editors vary depending on what type of computer you have as well as budget. There are even text editors developers can use online to code and keep all their code files. Just google "text editor" and you'll easily find tons of other options.

Every developer has a preference regarding which text editor they like to use so feel free to try different text editors to see what you like. If you looked at the code samples in several of my posts, I used Notepad++ to show all my code. You have also seen me using Code Pen for the navigation bar tutorial.

For today's post, I'll be using Atom and Code Pen (only to provide a link so you can see a sample of what should be in the browser). However, feel free to use whatever text editor you like.

While the text editor is the most part of this lesson, you can also find one image you would like to add to your website and two links to any websites you like. If you want to add more images and links, go ahead. This is your website so feel free to use this is tutorial as a playground to trying out all the HTML & CSS concepts we discussed.

How do you bring this website to life?

Before you start this tutorial, you need to set up your workspace. You can visit the How to Set Up Your Workspace post to learn more. Once you are ready, it is time to begin building our web page. If you would like, you can follow along with the "Build Your Own Webpage" in Codecademy.

===> Click to read How to Set Up Your Workspace post!

This is a basic website so feel free to customize your website as you go with different headlines, images, and much more. If you get stuck, don't forget to check out the resources in the links section or google for answers. Google is a developer's best friend so don't be afraid to use it.

1. Add h1 tag

Go to your HTML file. Inside your HTML file, go to the body tag and add h1 tag. Put your name inside the h1 tag. Don't forget the closing tag!

2. Add 3 p tags

After your h1 tags, add 3 p tags. Inside each p, you should put a little information about yourself. This can be any information from your interests, goals, what you do for a living, and much more.

3. Add an image

Next, we are adding an image. If you want to use an image from the web, right-click the image and click “Copy Image URL”. Put your image after your h1 tags.

4. Add 2 links

Codeacademy wants 2 links so let's puts two links on your website. You can make your new image a link or you can turn some text into links. My example is going to keep things simple and just add links after my last p tag.

<h1>BritishPandaChick</h1>
    <img src="http://home.bt.com/images/baby-panda-makes-world-debut-at-malaysian-zoo--and-promptly-dozes-off-136401733162403901-151119165145.jpg" alt="baby-panda" />
    <p>This is the first paragraph. Feel free to talk about whatever you like</p>
    <p>This is the second paragraph. Feel free to write about pandas. Rather it is bonus points if it is about pandas.</p>
    <p>This is your third paragraph. Talk about whatever you want in this paragraph. Just don't forget the closing tags!</p>
    <a href="http://britishpandachickcodes.blogspot.com">BritishPandaChick Codes</a>
    <a href="http://needleworkkits.blogspot.com">Needlework Kits</a>
Enter fullscreen mode Exit fullscreen mode

Congrats! You are finished with your web page. It is pretty basic, but feel free to add more style to it using your new HTML & CSS skills.

Conclusion

Today you learned how to make a basic web page just using HTML. Wasn’t that easy? During this post, I showed you how to set up your workspace and went over some of the text editors available for developers.

When it came time to building the site, you used all your new HTML skills to create a web page. If you would like to see a sample, click the link below to see one I built specifically for this post. Feel free to look at my code to see if you are on the right track.

==> Click here to see my sample project on CodePen!

If you want to play around with this web page, you have plenty of time to do so since I’m giving you another break to either catch-up or play around with your web page.

Discussion (0)