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 from 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. If you are not comfortable building your 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 CodePen for the navigation bar tutorial.
For today's post, I'll be using Atom and CodePen. However, feel free to use whatever text editor you like. While the text editor is the most 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 tutorial as a playground to try 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. 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 other articles on CodeNewbie, DEV, 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 the 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
Codecademy wants 2 links so let's put 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 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>
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 build 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.
This post was originally published on July 5, 2017 on the blog The Original BritishPandaChick as How to Build a Web Page with Codeacademy. I made minor changes to the original post to work here on CodeNewbie.
Top comments (0)