Goal: A journey guidance on how to be a web developer for beginner.

So you want to make something matters in your life? You decide to be a web developer. How should I start?


First, define your role.

  • Do you want to make something? or,

  • Do you want somebody to make something for you?

I want to be a maker.

Then you should learn.

I want someone to make it for me.

Then you should hire an employee. Or buy an application from a software house.

The Roadmap

roadmap.sh states clearly these different roles.

  • Frontend

  • Backend

  • Devops

You can combine these three into full stack web development.

Just be aware that company that wants a fullstack web developer, would looks like having small budget.


You should aware that mobile development is, different with web development.

Where to Learn?

If you are beginner, you should read this first.

My first attempt is, always ask beginner to read w3schools.com, and for not so beginner I ask them to examine diagram in roadmap.sh. But there are more if you wish.

If you desire step-by-step guidance, youtube is your friendly neighbourhood. There is a lot of good channel you can watch over there, both english and local.


The stack: html+css+js.

What is A Web Page?

A web page is simply:

  1. Structure + Presentation + Behaviour

  2. Custom User Content: Text and Image (or other media).

What is a page?

The first one, is a stack we know as html+css+js. The second one is any material we want to stuff to this document page.


How do I explain from basic stuff to modern era?


The Hidden Tiers

No complete templating guidance

Templating Engine and Preprocessor

Yes, there is a gap in most web development tutorial.

0: Must Have Basic Knowledge.

Find a group, instead of private conversation.

  1. English knowledge is a must.
  2. Know how to search google and stackoverflow.
  3. Read The Fine Manual.
  4. Know how to make a screenshot in a group.
  5. Know how to communicate nicely in a group.

Tips: Make a note regularly.

read, write, share


It is easier to learn plain HTML, with template engine approach.

HTML5 is a broad topic. It is not just about HTML tag. Consider learn only the basic stuff, then practice by directly applying simple HTML, in your own simple project. A blog or portfolio is a good choice of simple project, since a blog has no burden of complex database, nor login stuff.

Slide - Preface: Learning HTML Step by Step

The steps is simply as below:

  1. Basic HTML

  2. Templating Engine

    • Combine with Task Runner.
  3. Static Site Generator

    • Complete website, without complicated backend.
  4. Backend Web Framework

    • Laravel, Flask, RoR, Koa, Express.
  5. Modern Web Framework

    • Svelte, React, Vue.

Learn how to google, make a screenshot, read documentation, and english.


  • Hit the w3school book first.

  • Enjoy the journey.

template engine is backend stuff.

2. Stylesheet

The hidden tier is the CSS Preprocessors.

You can learn to use CSS Frameworks, then learning CSS Preprocessors, then go back later to customize CSS Frameworks.

Slide - Preface: Learning CSS Step by Step

The steps is simply as below:

  1. Basic CSS

  2. CSS Frameworks

    • Such as Bulma, Materialize CSS, or Semantic UI.
  3. CSS Preprocessors

    • To create additional custom CSS.
  4. CSS Tools

    • Task Runner, or
    • Bundler.
  5. Custom CSS

    • No Frameworks, or
    • Tailwind CSS.

Learn how to google, make a screenshot, read documentation, and english.


  • Hit the w3school book first.

  • Enjoy the journey.

stylesheet is frontend stuff.

3. Javascript

I’l be back.

Javascript is a huge topic. I haven’t got any material yet. I mean, I have plan for this javascript material, but I’m still not sure about the proper journey for beginner. So I’d better skip for a while.

4. Content

For your simple project, such as blogging or portfolio you need to.

  1. Text

    • Learn about writing.
    • Proper english, or local language.
  2. Image

    • Capture photo with your smartphone
    • Raster illustration: Learn GIMP
    • Vector illustration: Learn Inkscape


Understand the concept, instead of just how-to do something.

Have fun with coding.