web dev step by step

Question

Carving my own way towards web development (focus on front-end), with a sub-intention to help the others exploring the same path. This post mainly serves to exert pressure on myself so that I will keep learning (lol).

You can help me by providing any suggestion (what to learn next, which resource is good/short/efficient, etc.).

This might take a long time, but I would want to try it out.

Answer 1

as for learning material i would suggest a book on html and css ( and eventually javascript) if you dont have any prior knowledge. "the missing manual" and "head first" series are alright.

the reason for starting with a book is to help you understand the structure of html+ css. you need to know what elements are used to give structure and the "box model" for the elements in html. once you understand these basic concepts, all you need is a reference for all the tags and their attributes (w3schools.com). no need to start from scratch each time.

but html+css+javascript are only the start. if you're going to deal with data, you'll need php and sql (mysql) for database management. adding grapgic design+typography to your set of skills will help you creating better looking and user friendly sites.

Answer 2

learnt: none

in progress: HTML
-tool: https://www.quackit.com/html/html_editors/scratchpad/
-book: "the missing manual" and "head first" series (suggested by storm)
-tutorial: http://www.html.am/html-tutorial/
-video: https://www.youtube.com/watch?v=dD2EISBDjWM&list=PLr6-GrHUlVf_ZNmuQSXdS197Oyr1L9sPB
-test: http://www.careerride.com/test.aspx?type=HTML
-task: Write a resume (Ex: https://www.thebalance.com/functional-resume-example-2063203 )

next: CSS

Answer 3

result:
test: 11/19 (57%)
task: https://code.sololearn.com/W2Y76N9ko3wg/#html
note:
https://www.w3schools.com/tags/tag_meta.asp
Complete html course in sololearn as basic knowledge.

Answer 4

learnt: HTML

in progress: CSS
-tool: same as HTML
-book: same as HTML
-tutorial: https://www.quackit.com/css/tutorial/ , https://atomiks.github.io/30-seconds-of-css/
-video: https://www.youtube.com/watch?v=qKoajPPWpmo&list=PLr6-GrHUlVf8JIgLcu3sHigvQjTw_aC9C
-test: http://www.careerride.com/online-practice-test/CSS
-task: create a calender

next: JavaScript (JS)