I was a web dev teacher and I'm detailing you the program I taught

JoelBonetR 🥇 - Feb 26 '21 - - Dev Community

I'm aware that most of you are self taught people or apprentices and I was working as a teacher in the past and I want to share the program so you can use the same. As things on the IT world evolves fast I'll point out some points I would change nowadays to ensure the addition of matters that could lead you to work on any web dev job as a junior.

First of all I was working 2 years as a teacher, ending the job 3 years ago (maybe.. 4?) it helped me to dig deeper in some technologies and tools, but after that I felt like I could not learn more doing that job so I went back to code on private companies.

Long story short I'll show you the program and the timings I taught and what would I do nowadays according to the current situation on the web development world.

The program was a 680h course, which is 27/28 weeks doing 5h a day from monday to friday.


Old tech stack Subjects:

  • HTML - 2 weeks
  • CSS (including bootstrap) - 4 weeks
  • JS (basic: 2 weeks, incremental concepts 2 weeks more, adding jQuery for 2 weeks more) - total: 6 weeks
  • MySQL (Relational DB concepts, Normalization, CRUD queries) - 4 weeks
  • PHP (login, easy projects, incremental concepts) - 4 weeks
  • Project: including all subjects used through the course to assimilate concepts and pick experience, adding new stuff incrementally - 7/8 weeks

Current web development situation

Nowadays I would not add Bootstrap or jQuery, both are obsolete this days, instead I would add a stronger acknowledgement of CSS Flex and SCSS, being used to the concept of Bundlers (such webpack, rollup and specially Parcel) as well as npm, npx or yarn as package managers.
I also feel the need to learn any SPA framework such React, Svelte, Angular, Preact...
And to make it easier I would change PHP for Node.

The timings are a quite disadvantage on an academy so you (or I, as a teacher) need to polish the times well, and each person have different timings to learn something itself, which makes it more difficult.

What I've tried to do is to learn about the different ways a person can learn something and try to use them to solve each student needs even that made me repeat most content twice or more times while I gave some exercises to do in class.

There's a post about that here which I posted long ago and I'm shocked about how many people want to learn something but how few people want to know how to learn something so please, take a look at it, it may help you much more than what you expect (probably).


But as long as you want to learn things by your own, the timings must not be a constraint so take the time you need for each matter, just make sure you don't loose much time with details at the beginning.
I mean, it's necessary to learn HTML but it's not necessary to learn about A11Y at this point, as long you know it exists is OK (you'll probably never use that on a job TBH).

-- If you want examples or details about when to stop with something and increase the horizontal knowledge instead the vertical one to get a global view and skill as soon as possible, tell me in the comment section. --

So as I said you on any web dev job as a junior I'm adding the things I mean necessary those days:


current tech stack

  • Git - Create an account into GitLab (i think its more easy to use later on the stage 2 and it lets you private projects with a free account).
  • HTML (tags, what are them intended for, attributes, custom attributes).
  • HTML custom elements -> just know what they are.
  • CSS (learn how to order the content in a view using flex and grid, properties and values, - you'll learn interactions with experience -, methodologies such BEM).
  • Sass: variables and nesting.
  • npm, npx, yarn (choose whatever you like more, they all do the same for what it concerns us now) -> needed to use bundlers.
  • Bundler (Parcel.js, rollup...) -> it will make easier to convert scss into css and so on.
  • JS (data types, conditionals, loops, algorithms, data structures)
  • Any SPA (angular, react, svelte, preact...) I would suggest to use Svelte or React. Svelte could be the easiest to learn but React has definitely more jobs available so pick what you want (you can learn both too), pick a public API and consume it to make something easy to be aware of the entire life-cycle of a modern front-end).
  • MySQL- Definition, Normalization (1NF, 2NF, 3NF & BCNF will suffice to make your data look like pro).
  • Node.js (make some API with node "as is")
  • Express (or another Node.js framework -> repeat the same but with the framework of your election).
  • Sequelize (or another ORM you like) -> you'll know about what ORMs are and what are trying to solve, learn a new way to define data structure for the DB and so.

Finally create a project that uses all of the above, for example:

SPA front-end with Svelte, styling with Scss, bundled with Parcel.
Relational Database with MySQL, PostgreSQL or whatever you like.
BackEnd with Node.js Express and Sequelize.

At this point you would be very proud of yourself, you feel the power to create almost anything with what you just learnt this months but what is with creating something that you cannot deliver properly?

Stage 2: tests

  • Jest, Cypress, Puppeteer

Stage 3: Systems, Environment, Servers...

  • Pick up a hosting with a domain
  • Learn how to create a CI/CD (gitlab-ci.yml)
  • Learn about what is a DNS
  • Investigate a bit on your hosting panel to see which options it has and what each thing mean and what you can do with each.

I've already wrote about most of this things, just check my previous posts in my profile


This post can help you too as it describes an entire process of building a static web view and deploying it with current standards.


Side notes and disclaimer or Why I chose this stack:

  • You can also use PHP Laravel instead Node, or any other relational database, you can even use Python but if you want to become a web dev... python is much less used than PHP or Node.js.
  • There's a lot of different things you could learn as well as different stacks, some of them that are the "flavour of the week" are MERN and MEAN, which stands for MongoDB, Express, React/Angular and Node.js. I would not encourage you to learn MongoDB as a beginner because it lacks data integrity (it is NOT a relational DB) and its application is a much little scope than any relational database, by the way you could loose data easily and being unable to find what you need as well as wasting much more space on your hosting due to duplicity (or triplicity or...) of data.
  • There's also tones of languages, some of you may have a dev friend that tells [Java, python... insert whatever language here] is the best programming language and convinced you to go for it. It's ok, I'm just pointing you to Node because you'll need js on the front end without exception so... why not to use js too on the backend instead learning two different languages with its own syntax, default and predefined methods and so? apart from that js is async while others are not so it's a paradigm difference too, even that, PHP or Python could be fine, java or C# requires much more time to learn (all the environment, tools, way to work etc) so I would not suggest it for beginners apart from learning about POO.
  • There's also tones of libraries that you could use but whats the point on import a lib, use it as the lib told you and end up with a job done but with zero knowledge about what happen behind it? You'll be a dev when you are able to write and reuse your own solutions instead on using third party (that you'll need to update, maintain and check if it's supported or not to ensure security on your web app). Better learn the language, try to do things and then use what you feel (with much more criteria) that it could help you.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .