HN Explorer

Ask HN: Best source for learning Web development?

16 points by leeshire ↗ HN
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 .

HTML, CSS, JS, PHP Those are the languages I'd like to focus on but googling it is over whelming by all the sites that come up.

I figured someone on here could point me to the right direction in learning those languages most effectively I think I'm mostly interested in PHP and making full websites with it.

What are some recommend books or maybe a online course on learning PHP and web development?

last question is it still worth learning a language like PHP to do web development with and maybe get a job with it eventually.

20 comments

[ 4.9 ms ] story [ 61.9 ms ] thread
saramon
codecademy.com it's a great place to start.
Memosyne
This website is arguably the best resource: 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.
mettamage
For me it wasn't. There's not enough handholding, the syntax is not always explained. IMO, it's a better resource for someone who already knows programming.
kyawzazaw
Yes, it has that and some of it is good for a beginner. But for a beginner, it also can be an overload of information that impedes learning momentum. It might also be due to the interface.

Yes, knowing how to read and use documentation is very important. Yes, it is a well-covered documentation.

My opinion is that the very start of learning, the learner should be guided through a series of specific gradual digestable learning, and there is a feedback loop on the process.

There are better resources out there.

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...

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

I also recommend this book learning the DOM: https://www.amazon.com/DOM-Scripting-Design-JavaScript-Docum...

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...

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/

* My zen attempt from 2008 - 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 p...

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

[deleted]
(comment deleted)
jagannathtech
The odin project and the freecodecamp
mettamage
I second this as this would've been my reply.
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.

ijustwanttovote
I cannot recommend 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.