Preface
Goal: A brief guidance at a glance for beginner.
After years of SSG, I have to answer a lot of basic question, from beginner in web development community. For what I learn so far, beginner need example codes.
Where to Learn
If you are beginner, you should read these 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.
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.
The Needs
How do I explain from basic stuff to modern era?
After sometime, I feel the needs, a series article for beginner who want to step into web development. So that they can learn from the very basic stuff to the modern edge, without having too much time spending time searching on the internet. I finally decide to make my own article, so I can answer my own article. Tell the story that I know so well, because I’m the one who wrote it. Now the issue is, how would this article series be arranged.
The Gap
No complete templating guidance
There are already so many material over there in internet,
but my friend see a gap, the templating engine.
This is where this article series fill the gaps.
With this article series,
beginner can build their own complete pages,
from scratch without any frameworks.
Step By Step.
Beginner need examples!
I arrange this article series as below:
-
Fundamental Stuff:
html+css+js -
Tips: Tools (simple web server), Browser (inspect element)
-
Stack Examples:
pug+stylus+coffescript. -
Task Runner and Bundler: Grunt and Webpack
I use as pure basic stuff as possible, and avoid CSS framework, backend and SSG.
On Radar
No Idea
I’m still not sure about this.
- SSR (Server Side Rendering): vue and svelte.
Time SSR is inevitable, but I still haven’t got time to explore it yet.
Source Examples
You can obtain source examples here:
Example HTML
If you are a beginner and never know what HTML code looks like, you may examine this document below:
<html>
<head>
<title>Example HTML</title>>
</head>
<body>
<h2>Relationship Alerts</h2>
<p>
<strong>Danger!</strong>:
Red light indicates door a secured.
</p>
</body>
</html>Save the code into a file, such as alert.html or something similar,
and open it in your browser.
What’s Next?
Let’s get it on with stylesheet and javascript.
Consider continue reading [ HTML - Stylesheet ].