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
The second one is any material we want to stuff to this document page.
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.
No complete templating guidance
There are already so many material over there in internet,
but my friend see a gap, the
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:
Tips: Tools (simple web server), Browser (inspect element)
Task Runner and Bundler: Grunt and Webpack
I use as pure basic stuff as possible, and avoid CSS framework, backend and SSG.
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.
You can obtain source examples here:
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.
Let’s get it on with
Consider continue reading [ HTML - Stylesheet ].