x

We use the latest technologies to provide the best experience!

Please download a newer version of your browser. Click to close

Looking to get better at JavaScript?
Join us in the Academy and boost your learning curve!

Creating your first website with HTML and CSS

Follow this step by step guide and you will set up your own website from scratch
Karla E. Costa Silva
JavaScript Teacher
31 August 2020
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:gif of the first website with html and cssYou can check the deployed version here and also the code on GitHubCreating your first website with HTML and CSSBefore 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 HTMLHTML 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. overview of the html tags needed to create your websiteLets start building Step 1: Creating a folderThe 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).overview of a repository for a websiteStep 2: Filling the folderSo, 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.overview of the index file of a websiteStep 3: Start the initial makeup of your websiteThat’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 tagsWe 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 itfirst version of the websiteStep 4: Adding some emoji'sThat’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.second version of the websiteStep 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.how to style your website
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.
third version of the websiteWe 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. fourth version of the websiteStep 6: Finalize your pageIf 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 o make it a circle.final version of your first website including the terminal overviewAwesome! 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.
Ready to continue learning Code?

Interested in more?

Read more of our articles.