Today we are gonna create our first website, it'll be a very simple one using basic HTML and CSS, that's how it's gonna look like at the end:
Creating your first website with HTML and CSS
Before we can start building this awesome website, we need to make sure that you have a text editor, I'll be using Visual Studio Code, you can download it here, but also feel free to use any other text editor of your preference. Now that you are all set up, we can start coding.
To build this website, we will use HTML and CSS, HTML stands for Hypertext Markup Language and it's the standard language for documents designed to be displayed in a web browser and CSS stands for Cascading Style Sheets and it's used to add style to web pages.
Some extra information about HTML
HTML is written and organized using tags, with them we can structure our website and decide how we want it to be displayed, here you can check some tags and what they do. The tags we are gonna use today are also listed under this paragraph.
Lets start building
Step 1: Creating a folder
The first thing you have to do is create a new folder, you can use the terminal, if you don’t know how to use a terminal, check our post about it, or do it manually. Inside the folder, you have to create two files: index.html (that's where we will write our HTML) and app.css (that's the file we are gonna use for styling).
Step 2: Filling the folder
So, in the example above you can see I have a folder called blogPosts and a few files inside it, for now you should only have the index.html and app.css, later on you can add the images as well, don’t about post.md and .gitignore, they are not part of this exercise. Open the folder in the text editor and let's start working with the index.html file, we will just do the standard set up.
Step 3: Start the initial makeup of your website
That’s what you should have on your index.html page, the first line of the code is telling the browser that we are writing HTML. Note that all our code will go inside <html> tags, also note that we have a <head> and a <body>. Inside the <head> we will have all the meta tags (you can’t see it, it’s mostly for the browser) and the <title> tag, the title will be displayed on the tab. !All the code we want to display will go inside the body tags!
We can't see anything on our browser yet, just a blank page, also, to check your website you can drag the file to the browser or just open it. Now, let's add a title (h1 tag) and an image (img tag), so we can see something on our page. Find an image or gif that you like and let’s add it.
Step 4: Adding some emoji's
That’s how your website should be looking now. Those weird symbols you see inside the h1 tags are the emojis in HTML, here you can find a list with a lot of them, you’ll have to change U+ to &#x to make it work.
You can choose what you'll make your website about ,I'm gonna make it about Burgers, because I really love burgers, but feel free to make it about yourself, your dog or anything you like. Now it’s time to move forward, let’s add a few more lines of code.
Step 5: Let's do some styling!
We almost got all the information from the final version of the website, but they do not look much alike, so maybe it's time to start with some styling, for that we are gonna work on our app.css file, but before doing that, we have to add one line of code on our index.html file, we basically need to connect these two files, so it knows the styling is coming from app.css.
So, just copy the information from line 8 and paste it between your head tags, now we can move on to the css file. On CSS, we have to specify which tags we want to modify, for that we can use the tags themselves, classes or id’s, today we will only be working with the tags. Let’s work with the body tag first, maybe add a background image, change colour and font. Feel free to copy my style.
We are not there yet, but we are very close to the final version of our app. Next step is to work on the main tags, so we can read better and have a nicer design, again you can choose the background color, text-align and any other kind of CSS you want to add.
Step 6: Finalize your page
If you are coding along with me, your website should look a lot like the image above, which is very good, but not yet the final version, we still have a few things to do: style the image and add a new section inside the main tags, so I suggest we do all this at once since it’s very similar to what we’ve been doing until here.
As I mentioned before, the new section will be placed inside the main tags, we will make a <h2> for the new title, and to display the new information we will use the <ul> and <li> tags, they mean unordered list and list item. I’m also gonna use a few emojis, so feel free to choose any from the list. For the image, I’m gonna use height and width, that’s for the dimensions and border-radius to make it a circle.
Awesome! If you coded along this tutorial, you just created your first website and now it should be looking pretty much the same as the original version. In case you want to see it closer, you can check the code on GitHub and also check the deployed website here to see if it looks the same.