Workshop instructions: Learn to code cool websites (HTML & CSS)

Hello, welcome to the workshop. In this session, we will learn to build websites from scratch and by the end of this, you should be able to build a website, make it look nice as well as publish it so people can see it from a URL. Let's get started.

Step 0: Why do we want to learn to code and what can we do with it

The first question before starting to do anything is always WHY. Hopefully, I can answer some of your doubts in this post and show you the power of code.

Step 1: Get your computer ready to write code

In this tutorial, you will prepare your computer for writing code. For HTML & CSS, all you need is to have a code editor to write the code and a web browser to view the web page you write.

Step 2: Build your first web page with HTML

You will get a first glance at what HTML code looks like and write your first line of code.

Step 3: Publish your web pages with GitHub

What's the best thing about writing code? To show it to people! You will publish your first web page online and get a link to share with others, anyone with the link will be able to see your website. And you will do this very often in the future when you work on more projects. Pay attention! But you can always come back here if you forget how to do it.

Step 4: Make your websites look nicer with CSS

Maybe you don't want to share the first website with people yet because it looks plain. But you will after this tutorial where you get to make your page look nicer.

Step 5: More CSS to make your websites look fancy

CSS is so good we can get enough of it. More CSS magic here.

Step 6: Make nice animation on your websites

Maybe you are still in doubt about why you should write code instead of just dragging things around in Canva/Adobe tools like a designer, this tutorial will change your mind. You can make all kinds of animations with code.

Step 7: Make your websites look good on both desktop and mobile screen

If you share a link with someone, they are likely going to open it on their phone. So we should make our websites look nice on mobile screens too.

Optional Step: Organise your code nicely on Github

If you are hooked on coding by now, you should consider better ways to organise your project so it doesn't get lost. GitHub is the way.

Step 8: Build your own projects

It's time to get creative and build something of your own. Ask someone at your table to help if you run into any questions.

That's it for the HTML & CSS session, you have touched on almost every aspect of building a website. Now it's time to use what you have learned and build some cool projects!

And next up we will have sessions about even cooler code - generative art. Stay tuned and follow our Instagram for future workshops.

If you haven't got tired, maybe you would like to read why I started this group and what I want to do with it. And if you enjoyed this workshop, come back next time and also bring a friend. We want to keep the community going.