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?
Role
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.
Mobile
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.
Approach
The stack:
html+css+js.
What is A Web Page?
A web page is simply:
-
Structure + Presentation + Behaviour
-
Custom User Content: Text and Image (or other media).
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.
Technically
How do I explain from basic stuff to modern era?
The Hidden Tiers
No complete templating guidance
Yes, there is a gap in most web development tutorial.
0: Must Have Basic Knowledge.
Find a group, instead of private conversation.
- English knowledge is a must.
- Know how to search google and stackoverflow.
- Read The Fine Manual.
- Know how to make a screenshot in a group.
- Know how to communicate nicely in a group.
Tips: Make a note regularly.
read, write, share
1. HTML
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.
The steps is simply as below:
-
Basic HTML
-
Templating Engine
- Combine with Task Runner.
-
Static Site Generator
- Complete website, without complicated backend.
-
Backend Web Framework
- Laravel, Flask, RoR, Koa, Express.
-
Modern Web Framework
- Svelte, React, Vue.
Learn how to google, make a screenshot, read documentation, and english.
Tips:
-
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.
The steps is simply as below:
-
Basic CSS
-
CSS Frameworks
- Such as Bulma, Materialize CSS, or Semantic UI.
-
CSS Preprocessors
- To create additional custom CSS.
-
CSS Tools
- Task Runner, or
- Bundler.
-
Custom CSS
- No Frameworks, or
- Tailwind CSS.
Learn how to google, make a screenshot, read documentation, and english.
Tips:
-
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.
-
Text
- Learn about writing.
- Proper english, or local language.
-
Image
- Capture photo with your smartphone
- Raster illustration: Learn GIMP
- Vector illustration: Learn Inkscape
Finally
Understand the concept, instead of just how-to do something.
Have fun with coding.