
Ask HN: Best source for learning Web development? - leeshire
I would like to learn web design or web development during this lockdown
what is the best most creditable source on learning it the right way in a fun interactive way .<p>HTML, CSS, JS, PHP 
Those are the languages I&#x27;d like to focus on but googling it is over whelming by all the sites that come up.<p>I figured someone on here could point me to the right direction in learning those languages most effectively I think I&#x27;m mostly interested in PHP and making full websites with it.<p>What are some recommend books or maybe a online course on learning PHP and web development?<p>last question is it still worth learning a language like PHP to do web development with and maybe get a job with it eventually.
======
Jugurtha
Udacity's CS253 "Web Development"[^0] by Reddit co-founder Steve Huffman is
_really_ good. It goes through implementing a lot of things (cookies, etc.).
It does that with Python on Google App Engine, but Google App Engine supports
PHP so if that is what you know, you can go through a lesson, and then try to
do that in PHP.

Any reason you want to learn PHP?

[^0]:
[https://classroom.udacity.com/courses/cs253](https://classroom.udacity.com/courses/cs253)

------
mettamage
Use the HN search bar and type in things like:

\- learn javascript

\- learn web development

and so on

Devour all the comments, and you'll come to a quite nuanced conclusion on what
you should do.

This is my general technique on finding educational resources on HN, so it's
not a "scram! Go use a search engine!" This is a "well my little secret is:
HN" type of response.

------
xueyongg
I personally found the courses from Pluralsight to be really useful. The
instructors are really thorough with their explanations. I managed to learn
design patterns with Javascript as well. I think these are underrated
knowledge of coding that will set you up for success when you are able to
master them. I managed to write a simple post about 3 key types of design
patterns for javascript code. Hope you find it useful to kick start your
learning journey! Cheers for your friendly engineer (:

[https://blog.phuaxueyong.com/post/2020-04-11-second-four-
des...](https://blog.phuaxueyong.com/post/2020-04-11-second-four-design-
patterns)

------
Memosyne
This website is arguably the best resource:
[https://developer.mozilla.org](https://developer.mozilla.org)

~~~
kyawzazaw
it is not well-guided for a beginner

~~~
Memosyne
Huh? This is a quote from the website:

> Welcome to the MDN learning area. This set of articles aims to provide
> complete beginners to web development with all that they need to start
> coding websites.

It has a nice little sidebar that says "Complete beginners start here!" and
goes on to describe HTML, CSS, and JS.

So, can you please explain to me how this website is "not well-guided for a
beginner"?

~~~
duxup
Do you feel that it is a good place to start?

~~~
Memosyne
Yes? It was how I learned web development and as a beginner I found it
tremendously helpful. Every other website took me through a bunch of canvas
painting exercises which frustrated me because they never taught me how to
actually build a website from scratch. The poster asked for the "best most
creditable source" and in my opinion that website fulfills that criteria.
Besides, the poster wants to pursue a career in this field so recommending
them something "easier" would do them a disservice and waste their time.

------
ijustwanttovote
I cannot recommend [https://www.codecademy.com/](https://www.codecademy.com/)
enough. It helped me start my career about 7 years ago. I already had some
background knowledge of html and css, but it was able to tie it together with
JS in a way that was easy to follow.

------
austincheney
Here the path I would outline:

1) Start with HTML. You don't need to memorize every tag. Just remember HTML
tags describe content. If you encounter HTML tags that that primarily change
the appearance of things ignore it and purge it from your memory. Learn that
HTML describes and structures the content in a way that is meaningful to blind
people reading the page content.

2) DOM. The DOM is the Document Object Model. This is both the glue and
backbone of all front-end web technologies. If you don't learn this you are
hopelessly pissing against the wind hoping some framework does your job for
you. Sadly, most front-end developers never learn this, and its perfectly
clear. With a good DOM resource it takes about 2-4 hours of practice to really
master and its a skill that stays with you forever. Here is one I wrote many
years ago:
[https://prettydiff.com/2/guide/unrelated_dom.xhtml](https://prettydiff.com/2/guide/unrelated_dom.xhtml)

I also recommend this book learning the DOM: [https://www.amazon.com/DOM-
Scripting-Design-JavaScript-Docum...](https://www.amazon.com/DOM-Scripting-
Design-JavaScript-
Document/dp/1590595335/ref=sr_1_4?dchild=1&keywords=document+object+model&qid=1589056373&sr=8-4)

In learning the DOM you will encounter several basic DOM methods for accessing
things in a page, or navigating content (walking the DOM). Gain a good
understanding of the basic concepts, but don't spend the time memorizing
anything yet. We will come back to this.

3) Learn CSS. CSS is a presentation only language that does not impose any
meaning or navigation onto the HTML or text content of the page. You can tell
expert front-end developers from pretenders by their fear of CSS. CSS is like
a strategy board game in that it takes only a few minutes to really learn but
an enormous amount of practice to really do amazing things comfortably. For
CSS I recommend this book: [https://www.amazon.com/CSS-Pocket-Reference-
Visual-Presentat...](https://www.amazon.com/CSS-Pocket-Reference-Visual-
Presentation-
ebook/dp/B07BYHMM8R/ref=sr_1_5?dchild=1&keywords=eric+meyer+css&qid=1589056610&sr=8-5)

For practicing CSS I recommend a few CSS Zen Garden attempts. CSS Zen Garden
was an old playground where you take a given sample of HTML content and using
only CSS you radically changing the output into some creative work of art.

* CSS Zen Garden - [http://www.csszengarden.com/](http://www.csszengarden.com/)

* My zen attempt from 2008 - [http://mailmarkup.org/zen/](http://mailmarkup.org/zen/)

Learning the DOM you will understand that HTML structures content into a
meaningful way and that structure is a tree system of nodes. Many CSS rules
cascade down that tree. You don't need any JavaScript to learn CSS.

4) Learn JavaScript. JavaScript is a high-level general purpose programming
language that happens to natively run in web browsers. You need something to
write JavaScript, but a good code editor is helpful. People will try to
convince you to use a bunch of tools, packages, and frameworks to write
JavaScript. As you are learning you don't need any of that. It is just
bullshit that distracts you learning.

One exception to the tool rule is Node.js. Node allows writing JavaScript that
executes in a command terminal. There is also Deno that does the same thing,
but its new and not quite as mature.

It is hard to say how to learn any programming language while remaining
neutral and objective. As a front-end developer you will largely be learning
to write JavaScript that runs in the browser and supports user interaction. I
recommend learning events and how to dynamically modify CSS rules. You will
need to know how to access various parts of the HTML page for your code to do
anything meaningful. This is where those DOM methods matter. Learning the DOM
methods is important because it reveals that the HTML page is just a big data
structure and everything on that page is immediately available to you with
little effort. Most people never learn to access the page like this anymore,
and so they are crippled beggars at the mercy of something else to do it for
them, which is unfortunate because it requires so very little effort to learn.

Since JavaScript is a general purpose language with extensive practice you may
find yourself learning to write programs with it or something else not
directly related to user interactions. It takes time and practice to gain the
level of comfort where you realize you can do nearly anything with these
technologies.

------
jagannathtech
The odin project and the freecodecamp

~~~
mettamage
I second this as this would've been my reply.

------
bigbassroller
when learning CSS i found searching for it on [https://css-
tricks.com/](https://css-tricks.com/) very helpful

------
saramon
codecademy.com it's a great place to start.

~~~
leeshire
thank you.

------
Unknown_Unknown
freecodecamp.com

