This is more like a guidance. Coder with different experience might have different answer.
- Document: HTML + CSS. HTML First, then CSS.
- Server Side: PHP, or Ruby or else.
- HTTP request for serious developer.
Always start with Plain HTML, then HTML+CSS, exactly in this sequence.
You can learn Client Side or Server Side later. Beginner should not use server-side or client-side before they learn HTML.
Unless you are a web-designer, you should learn html by writing your HTML using Text Editor.
My favorite is Geany Text Editor. But you may have ypur own preferences.
There are basic things to learn
DOM: Document Object Model
Don’t forget the HTML5 standard
HTML + CSS
HTML and CSS is tightly related. In my experience, learning CSS is different than learning programming language. While you can guess code in script by the logic, with CSS, you have to try it in browser. You have to walk through it.
There a some part that you have to learn
CSS for formatting document, style and typography
CSS for page layout, and media query for responsive design
CSS3 effect (shadow, animation, pattern)
A popular CSS Framework called Bootstrap
CSS generator, using LESS or SASS/SCSS.
Nowadays people has moved on to a better framework called AngularJS. I haven’t tried Angular yet. So I don’t have any opinion here.
Server Side: PHP
Let’s begin from Native PHP. Then experiment with CMS (Joomla, Wordpress, Drupal). And later try PHP Framework, laravel/symfony2 or the light one e.g. code igniter.
When you stepped in server side, you must prepare to learn about database connection. Native PHP is using mysql/mysqli driver or pdo_mysql. Framework sometimes utilized ORM, e.g Symfony2 tightly related with Doctrine2 ORM.
Doing test with framework require handling of HTTP error code. YOu shuld be familiar with these.
Static Site Generator
Jekyll, Hugo, or else
Build your own site, You dont always need Server Side. Now It can be achieved by using static page generator.
Now there is Jekyll static generator, and Github is officialy using Jekyll.
Instead of using HTML Markup, Jekyll recognize Markdown. Markdown is a very easy to use document formatting. Jekyll will translate your markdown to HTML markup.
To enhance the HTML document, it utilized a template engine called Liquid.
And generate CSS using SASS/SCSS
Ready to Use Sites
Jekyll Blog Example
I built my blog without PHP, and using JQuery only for Navigation Bar.
You can clone with
$ git clone git://github.com/epsi-rns/demo-jekyll.git
Currently, I don’t put any Ruby script in Jekyll while generating my Blog. I keep my Blog with minimal overhead, Simple and Stupid.
Hugo Blog Example
You can clone with
$ git clone git://gitlab.com/epsi-rns/demo-hugo.git
Have Fun with Learning.