How to build a website for free – CSS(Part 1)

In this article of “How to build a website for free” I’m going to introduce you to a new language called CSS. CSS stands for Cascade Styling Sheet as the name suggests it styles our website and makes it look beautiful. Remember we have our previous website that we need to style. In case you missed those articles don’t worry you can start check them: (how to build a website for free – html(part 1), html(part 2) & (html part 3).

Website

So without wasting any time open your website with your preferred browser. In case you forgot, open your index.html file with a web browser. You see how beautiful our website is. Nope I don’t think so it looks like the 90’s website but after these couple of CSS articles I promise all this gonna change. And I know that you noticed something, that your website doesn’t look like mine. Ye very smart that you figured that out. So we’re gonna work on that as well.

One last thing we need to do to finish our set up is to create a folder and name it whatever you wanna name so I’m gonna name mine “first website”. The reason we are doing this is to keep our files in one place. In case you wanna know the shortcuts for creating files and folders and moving them you can check this  previous article 10 keyboard shortcut keys. Next thing we need to do is to move the index.html file to our newly created folder: “first website”.  

Style.css

In the same folder of your index.html file you need to create a file and name it style.css don’t forget the extension “.css” it is very important. If you don’t know how to create a file you can go back and check how we created index.html in part 1.

In the very same folder now create a folder and name it “images”. When done creating the images folder I’m gonna leave 3 images below for you to download or you can create your own. When you are done creating/downloading those images. Move them to the images folder. Now your “first website” folder should look like the above image

You can now open your index.html with your web browser of choice. It should look like mine.

Conclusion

This is where I leave in this article very short. By now I assume that you are comfortable with HTML and you’ve learned most of the HTML elements. If you haven’t I suggest you do so. Because programming it’s something that needs practice now then in order to become good at it. After you finish these series I promise you will be good enough to start building websites for people.

In case there’s something that you  don’t understand feel free to contact me on the form or email me on the email below. Otherwise if you wanna learn more about CSS feel free on this website: w3schools

Download images: image1, image2, image3, image4, image5

Leave a Reply