Web Development for Beginners – A Curriculum
github.com
github.com
...and this is where it goes off the rails; teaching JS before HTML is how we will continue to have the ridiculous proliferation of app-sites that shouldn't require a single line of JS instead needing the latest version of $browser (you have a choice of browser - pick one ...) to even show any content at all. Forms don't need any JS to work, yet the impression this gives to beginners is that they do.
https://news.ycombinator.com/item?id=25915313
But then again, this is Microsoft, which is now firmly in bed with Google in contributing to the Big Browser monopoly, so I suppose I shouldn't have expected anything else. The agenda is obvious to anyone who cares to look.
Alternatively: it's just teaching whatever is popular in the industry, for better or worse (similarly to how DevOps people would be taught Kubernetes, even if it can be horrible in certain cases and for smaller projects).
Many sites out there don't need JS. Server side rendering would suffice. And many other sites out there would be well served with minimal JS for enriching a few forms.
Yet, that's not the reality that we live in. The reality is that the majority of the developers out there will simply have to deal with lots of JavaScript, TypeScript and frameworks like Vue, React, Angular (i'm using the term "framework" here because they change the entire direction of the development of your front end, not that it matters at all).
So, that's what curriculums will focus on, since clearly people want to have good employment prospects. It doesn't seem like the linked one gets too caught up with the frameworks, though.
But understanding the infrastructure is key here. Understanding the "M" in HTML, understanding the "C" in CSS, understanding http etc.
Team Treehouse is a great resource for learning frontend and backend stuff.
Like every other aspect of programming, there are multiple answers to this.
So I think it's a valid concern
What gets you your first job is you knowing how to use the tools that the companies already use to ship software solutions on the web. If they use react, webpack, graphql, then your best bet at getting your first job is learning enough about those to be productive in a couple of days at the company, and not what happens after you hit enter in the URL bar.
95% of my work as a regular web/mobile dev was about being able to fetch some data, massage it, display it, then handle user interactions to send something back to the server. Some software dev jobs are more complicated than that, but to be honest, most of what we do it not rocket science.
Once you get your first job, you can work "backwards", and learn the basics. This approach also helps you learn what is important as you see it firsthand that it's important. Your team is there to help you learn, you earn money in the process, you make your customers' life easier, and you build your portfolio and gain experience to get your next job (that will hopefully be more challenging than a CRUD app).
I'm not saying that it's great that you learn the tools before the basics, I'm just saying it makes sense if you want to get a job and pay your bills (and set yourself up for long term success as you learn on someone else's dime.
The fundamentals are clearer and more accessible to teach than frameworks. This inspires confidence and I'm pretty sure you won't save any time if you jump ahead and teach React and especially Graphql. You have a _way_ better foundation to learn and use React if you know HTML, CSS, JS, HTTP that I mentioned but also browser dev tools and I would even put git before that. Also people who are already professionals in some field close to web dev will ask fundamental questions, they want to understand things.
Learning framework X is a piece of cake if you at least roughly understand how it works and aren't on completely shaky grounds, and when framework Y comes along you can ask the right questions right away.
The _vast_ majority of web development doesn't use React or Graphql anyway. I don't even know a single dev who knows React and Graphql but cannot make a website without them or doesn't know what DNS is, what common HTTP headers mean or don't know how to center a div.
Some are even amazed that a basic HTML page can be created with a plain text editor.
Such people are "ReactJS" specialists, not even Javascript/Typescript specialists. One cannot easily engage in a conversation on types with them - not that they are negative or close-minded, but such concepts are in the "unknown unknowns" for them.
Nope. Knowing the fundamentals does not take all that very long and can in fact go a long way in enabling someone to pick up newer technology.
Now, this is the opposite of the point that you're making, but i have to admit that it's pretty cool on some morbid level! The fact that we have abstractions that are strong enough for them not to leak and make people dig into the details (e.g. the JS event loop being all that they need to think about).
That's also why tens of millions of people out there can work with spreadsheets of text processing software without knowing what a compiler or interpreter is, or even caring much about the benefits of dynamic linking vs static linking.
Similarly, i can write SQL against a DB without knowing anything about the RUM conjecture or really much about anything apart from the very basics of ACID (at least before Oracle fails to plan queries correctly and needs either statistics to be regenerated or hints added for the optimizer, because it's an evil piece of software).
It just works. I'd argue that it's the way things should be - working on the JVM should absolve one from thinking about compile targets and worrying about things like whether the CPU is from Intel or AMD, or what the ASM format is or whatever. Working in the browser might as well absolve one from worrying about most platform minutea as well, otherwise nothing would get done.
Is is still nice to have a bit of curiosity and explore those things, there being some merit to that, which might as well not be immediately apparent? Sure! Is it required for those people to truly be specialists in their own niche and to be safe from people making fun of their other shortcomings online? Absolutely not!
But many push towards single page apps even if a web site is better suited for the job. If you only have a hammer in your toolbox...
Also, you can have SPAs without Javascript, you can use any language / framework that targets Web Assembly. I enjoy Blazor for SPA.
Use the platform where it makes sense. Extend it with JavaScript where needed. Make it work for everybody and make it better for capable browsers. That is called progressive enhancement. OP did not say that you may never use JavaScript. Just be mindful about it when you do.
Let's start with getting data from the form to your back-end, and once we've got those must-have basics down, then we can start introducing the nice-to-have bits.
How would you create this form without Javascript? Would you require a user to create the assets before the loan?
Saying that HTML provides everything a developer needs to provide an application to client is so ridiculous, I have no idea why this sentiment is so popular. the vitriol expressed for front end devs from the community seems out of place.
Forms work without JS for the most basic baby forms. the moment you go enterprise, more is needed. which is where JS steps in, What am I missing here?
That said - complex forms is a typical example of when you might want to move from a web "page" to an "app".
Do you belive the backend should know about human incorrect input and track state?
What if a cat steps on a keyboard? every addition to a form is a page reload and a query to the server. then the server sends a response. Which is exactly the bloat everyone seems to go on about.
Im sorry but living in a world of enterprise apps, the sentiment that JS is a poor language and a bad choice is both out of place and highly de-coupled from real-world usage.
But sure, application state might not go in the same db/schema as completed transactions.
But there are different levels of state: completed transactions (application finished and submitted), partial business logic transactions (three out of five steps completed) and "app state" (field 6 of form 4 partially filled in etc).
They can all be kept diffently in sync (in sync, because the browser will keep partial state via native widgets if nothing else). Even w3m keeps track of inputs in forms before submission.
As I mentioned, I think complex business flows like these can be a great reason to go from "web page" to "web app" - precisely because it enables rich, ephemeral client state with (some) business rules close to the client.
But that doesn't mean you can't do powerful things with just html/http and some form of continuations etc on the back-end.
If you're employed, working at scale and need to do the complicated stuff, you're not a beginner web developer anymore. At that point, you should already understand the fundamentals and start extending on top of that.
https://blog.isquaredsoftware.com/series/how-web-apps-work/
The series provides an overview of HTTP and servers, client dev, browsers / HTML / CSS, JS / DOM, and AJAX.
A number of folks have told me they found the series particularly helpful.
- statelessness of the server (REST)
- the lifecycle of a single request
- the lifecycle of a single (server-)app (microframweworks)
OOP devs unfamiliar with server development tend to pollute the app lifecycle with hidden state in some singletons that are swirling around globally. The requirement that servers should be able to parallelize request-processing is mostly an afterthought and hidden app state makes it impossible to parallelize anything.
A sequence diagram of a single request would help there a lot IMHO and a short explanation of how to keep the response times short, by doing long-running tasks in the background with message queues.
[1]: https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-...
I understand all the core well (html, CSS, JavaScript, etc.), but struggle with choosing the right high level abstraction/framework/technology for ideas I want to implement.
E.g. should I make it a single page app or not? Should I be using ES6 imports? Which build tool? Would I want React or Vue or something simpler here? Should I use SSR? NPM vs. Yarn? Do I need a CSS compiler? Maybe I should be using TypeScript? Wepback?
Basically I'm overwhelmed with choices, but struggle to find useful docs on why a lot of these tools came about, what problems they solve, tradeoffs for using them, etc.
Asking the web devs I know in person doesn't help much (“just use React for everything, it's fine").
I struggle too. I'll tried a lot of different things (ex : puppeteer vs cypress, react vs angular2), and I end up having my own preference.
I'll try to answer some of your questions :
- Should I use SPA ? Slower initial page loading time, but faster to load more pages. Good if typical user stay long on website and navigate multiple pages.
- Es6 import ? Use them when you can, better IDE support than require.
- Build tool ? Start with webpack, oldest tool, with more chance to find answer to your questions on stackoverflow. Although I have little experience on the others (Rollup, etc), so maybe there is one that is simpler to start with.
- React or Vue ? Idk, haven't used view, both are popular and similar, take one you prefer the syntax ?
- Something simpler ? Well, there is too much choice... Vanilla js, another cool library, low code or no code like wordpress...
- SSR ? Less API to build. Faster initial page loading. Roughly. There is quite a lot of library out there with SSR, and it is elvolving quite fast. The future is probably a mix of server and client side rendering.
- npm vs yarn ? I recently played with npm workspaces, and yarn had a feature I needed, otherwise I think sticking to npm is fine. Historically yarn became popular because it introduced .lock file before npm. Npm has since catch up.
- Css compiler ? Minifying, or compiling sass ? You can start without it. Also starter like "create react app" already do these optimizations for you.
- Typescript ? Use it ! Only exception would be your code is too simple to take advantage of typing.
Sometimes a lot of the tradeoffs or design choices behind a tech aren't obvious from the outset.
React/web components etc. is when you need advanced/bespoke UI widgets. If you can afford KISS then they only introduce complexity and cost.
It just occurred on me when I got onboarded on this team (one of the big tech), majority of them are Python developers, that they can't for the life of me, figure out a simple npm errors. These are really smart senior developers.
In the past, I've always thought "its just frontend, anyone can do it".
Then it dawned on me that my JS/TS frontend experience are actually really valuable. Now I no longer take it for granted.
You want a frontend server that handles auth and credentials. cleans up queries to and from the main backend server.
Then you want as low-level interaction as possible in the HTML space. HTML doesnt provide everything you need. but it gets close. JS should augment HTML, the closer you stay to HTML the better.
Sveltekit goes a long way in providing this, nextjs and all the others just threw way to much tech at the front end space.
You basically want a way to turn URL's and POST requests into GET and POST responses. SPA is mostly not great and was a sidestep in a useable web.
The newness is the only thing that's put me off, mostly due to lack of finding good examples compared to Vue/React for various things.
But I figure that if I start with either of Vue/React, I should be able to then translate anything useful I find there to Svelte eventually.
Job security for me until the ML engineers work out I can probably be mostly replaced by a smarter templating engine!
- No basic HTML "hello, world" in the beginning to hook the reader and show that they can easily make web pages. It seems that they should wade through quite a few lessons, including JS ones, before composing the most basic page (assuming no prior knowledge of that).
- The first lesson is somewhat thorough, touching an assembly language (which is nice), yet mixes together shells and terminal emulators (which seems okay for a gentle introduction, but potentially confusing).
- No historical context (at least in the first two lessons), which is common to omit, but I think it helps to learn the motivation and basic ideas behind the subject you are studying, to better understand it all.
- Accessibility is explained before HTML itself, with an HTML-based quiz. I agree it's important, and the lesson looks good, but I imagine it'd be confusing/boring/seemingly unnecessary to read before even the basics of HTML (I'd probably keep thinking of learning how to make actual pages myself). Better understanding of accessibility issues may also come with demonstrations, showing why it's important (otherwise it's probably also easy to dismiss as silly or unnecessary). The lesson also mentions the "Lighthouse" tool, I don't think it's present in Firefox by default (looks like there is an extension).
- Then there's a bunch of JS lessons, before learning to make even basic static pages.
- Then there's finally HTML introduction, but only introducing 'html' and 'body' tags, and with a lot of--likely confusing to an absolute beginner--attributes in the examples, including classes.
- CSS follows those, at which point classes are likely to make more sense.
- Then there are JS-based games and web browser extensions, while we've barely learned to make basic HTML pages (though I don't think we really did).
- Only towards the end there are HTML forms, after all the interactive JS bits.
The MDN guides give you a much better template. They focus more on the fundamentals, starting with HTML.
The first thing I do after a short intro and overview is writing a Hello World HTML page with them while saying something about each line.
When they open the page in their browser you can see something in their eyes, which is magical. They just made their first web page!
Also I focus much more on HTML and CSS than on JS. There’s so much to learn just with that, while JS should be used when needed, little snippets for interactivity.
This tutorial is way beyond anything he could approach. For example "Pedagogy" - I don't know what that means, and neither does he. Another example, from the beginning "In this section of the curriculum, you will be introduced to non project-based concepts important to becoming a professional developer."
I suspect most of this is translation issues, but given the audience (kids, newbies), this language is super intimidating.
It's a bit like how I might prepare a document for colleagues and a non-technical product owner, and I need to overall contents to be clear enough (and non-technical enough) for the PO to understand, but I also want to put technical details in for my colleagues who understand jargon like "load testing" or whatever else. I don't need to simplify the section on load testing and remove that sort of jargon, because in principle it's not necessary for the PO to precisely understand those details.
So I don't think it's a translation issue, but rather it's not designed to be directly a tutorial for getting started with programming, but rather a tool for teachers to teach lessons on getting started with programming.
The annoying thing about this sentence is that "pedagogy" could be replaced with "approach" or "method" and no meaning would be lost.
It means “teaching methods”.
Method names alone will drop you way out of the simple english, top 1k words simplification paradigm.
I prefer when I'm learning something new if it treats me like an intelligent person who is ignorant of that topic. So, yes, if you want to teach me something be gentle in the language from that subject. But please assume I do know some things.
My first real tech job was in a country and office where the working language was one I didn't speak while growing up. If I came across words at work I needed and didn't know, I looked them up or asked for clarification and learned them.
For better accuracy, maybe one needs to take out special terms first.
I'm about to graduate him from "do it in just the browser" to using GitHub pages. That way he can have an HTML site that's "his" and start putting the pieces together.
That way, when ever he is filled with self-doubt and needs reaffirmation, he would be able to put things together from the ground up and regain confidence.
Edit: seriously. Non native speaker here, I have never heard the term. Googling shows: https://www.digitalocean.com/products/droplets
So a VM from this vendor is meant? Why?
Are there beginner courses for other technologies as well?
https://aka.ms/ml-beginners https://aka.ms/datascience-beginners https://aka.ms/iot-beginners
and - this is a sneak peek, https://aka.ms/ai-beginners, we're just finishing it up :)
I guess it's fine to just have a frontend curriculum but just confused at why this is noteworthy maybe.
Im sure this is a big deal for some reason and Im just too dumb to realize why. I honestly wish I had time to go through all of this just to get inside their heads in terms of education strategy etc.
Also I kinda hate React but shouldn't they be introducing React or Vue or something? Who's the target audience here? Job seekers? Bored tweens? Time traveling developers from 2005? Me?
I guess they wanted to have something fun and thought making games is a nice idea, for which they needed a canvas, so they put it in there.
The whole course structure does not necessarily seem to be aiming at the most solid teaching principles.
Frameworks are optional since web does not mean only single page apps. And even you want a single page app, you can do it without a framework.
So learning a framework comes after learning the basics.
Also really nice to see that this is not just a "how to use React" tutorial - kudos to MS for avoiding that. Looks like a great course.
As such I would start learning frontend web development with HTML. You can have web development without JS, but you can't have web development without HTML.
This way people learn right away that HTML/CSS are just helper technologies in the whole process of creating Web apps.
Anyways, here's a slightly dated but really great source of information on web development. I saw the playlist posted in a comment on HN in a similar thread
https://www.youtube.com/playlist?list=PLAwxTw4SYaPlLXUhUNt1w...
One question: Did you consider splitting up these pictures into smaller pictures? As an example, look at this page[1]. The picture seems to have a lot of things in there. Did you consider using multiple smaller pictures?
[1] https://microsoft.github.io/Web-Dev-For-Beginners/#/2-js-bas...
The course starts off with seven lessons on tooling and JavaScript fundamentals before you actually do something in lesson 8. That's a lot of theory to process.
One thing, I did a lot of the smaller non-sketchnote art on https://aka.ms/ml-beginners, embedded as infographics. So that was a different art strategy.
Anyway, it's free and you are not forced to follow the course. You can extract bits you think might be useful.
Also I'm not sure if these info graphic styles help or hinder understanding at a glance. I find it more effort to read the flow when it's a comic, but could be just me: https://raw.githubusercontent.com/microsoft/Web-Dev-For-Begi...
Panel 4, "Deep dive into IOT" has an illustration of stick figure diving under water. I'm not sure the concept of "deep dive" requires the explanation.
https://raw.githubusercontent.com/microsoft/IoT-For-Beginner...
I thought the learning potential was more for the person who makes the sketchnote, rather than people reading docs.