It's time to work on some real stuff!! Some actually coding!

Assume you have your design ready, if so, let's get started!


Now we are going to take the first step of making your design more than just a picture.

  1. Head to Online Editor. We are going to build your site with div for now.
  2. There's already some CSS style set for div tag. (Added border and padding)
  3. Don't worry about the look for now, we are mainly working on the structure today. We can always tweak the styling later (Magic of CSS 😉)

4. Below is an example of what it would look like from design to code.

5. Here is the code

<html>
<head>
<style>
div{
	border: 1px solid;
    padding: 0.5em;
}
</style>
</head>
<body>

<div>
  A Note on Cognitive Bias
  <div>
  Have you ever wonder how many decision we make every day are non-bias, purely for the best of our interest?I got the book The Art of Thinking Clearly by Rolf Dobelli while
  </div>
</div>

<div>
  HTML - The why
  <div>
  The world of Web start with HTML.
  It's the bare bones of any webpage you see today, ...
  </div>
</div>
<div>
  What I learned from traveling SOLO
  <div>
  Traveling alone might sound scary to some people, and it certainly is sometimes. But once we overcome that fear, we are able to grasp who we truly are and learn how to spend...
  </div>
</div>
<div>
  What it's like to travel SOLO - Part 1
  <div>
  This is part one of a two parts story of my experience traveling by myself to London, UK... 
  </div>
</div>

</body>
</html>

6. Now let's make your site alive!! 🛸