My plan on starting web dev, looking for guidance

Get Started
1

I’m a C++ game developer who uses Unreal Engine with 8~ years of experience. My goal is to learn web development, as I have a lot of interest in building tools similar to Notion and Miro. I understand it will be a ways off before I can do that, but I want to begin executing a plan so I can learn everything I need to know.

I’ve built some pretty advanced voxel mesh generation systems, extremely complicated inventory systems/UIs, and many other things in C++. I feel like my skills should translate somewhere, but I’m a bit unsure and slightly lost when it comes to understanding what I actually need to learn, and what projects to set for myself.

As for the plan, it’s a list of projects to help me learn each language/tool one by one. I was wondering if anyone could correct me in any mistakes I’ve made in this list, and possibly make suggestions for modifications and/or projects to add to my list to help me learn all I need to know to build tools like I mentioned above.

I think what I need help with the most is figuring out what tools I need to learn. Web dev from my perspective feels verrrrrry convoluted/saturated with tools. I understand there’s use cases for everything, but it’s difficult to even formulate a plan for what tools to learn to eventually be able to build my own advanced web apps.

I also want to host the projects (somewhere?) so that they’re actually websites, not just local files. I’ll probably just swap out each project wherever I’m hosting it as I progress through the list.

So here’s my current list, please feel welcome to roast it/me and tear it to pieces lol, I’ve surely missed a lot:

  1. Basic html page - very simple with headings, paragraphs, links, and lists.
  • Languages/Tools: html (free hosting recommendations - github?)
  1. Basic html page with CSS styling - Style project 1 with fonts, colors, spacing, and a custom layout
  • Languages/Tools: html, CSS
  1. Basic html page, CSS styling, using Sass - Take project 2 and implement Sass (learn how it compiles into regular CSS?) .
  • Languages/Tools: html, CSS, Sass
  1. Interactive html page with JavaScript - Add JavaScript to make the page interactive, add buttons that change text, (maybe simple form validation?) .
  • Languages/Tools: html, CSS, Sass, JavaScript
  1. Mobile-friendly page - Use a CSS flexbox to make the page mobile-friendly.
  • Languages/Tools: html, CSS, Sass, JavaScript
  1. Form submission & storage with JavaScript - Make a simple contact form, store its data in a database.
  • Languages/Tools: html, CSS, Sass, JavaScript , (database?)
  1. Form submission display - Take the most recent form submission and display it on the page, update it when there’s a new form submission .
  • Languages/Tools: html, CSS, Sass, JavaScript (Unsure what I need if I want to store form submissions in a database?)
  1. Simplified Pokédex website - Make a simple version of a Pokédex, just for a few basic pieces of info about 5-10 Pokémon I decide to add using some kind of Pokédex page template, also with a page to provide info on typings.
  • Languages/Tools: html, CSS, Sass, JavaScript
  1. To-do list React web app - the user can enter items onto a list, and check/uncheck the items, the items are persistent as they are saved to/retrieved from a database .
  • Languages/Tools: html, CSS, Sass, JavaScript, React
  1. Account creation/login - the user can sign up for an account, then use their credentials to log in/out of the website, let the user set a few basic things about themselves like name/bio, then display that on their own profile page that is only accessible to them.
  • Languages/Tools: I’m pretty lost at this point
  1. 2-factor auth - take project 10, and add a layer of account security that can be added/removed by the user.
  • Languages/Tools: ^^^
  1. Payment processing - take project 11, add a stripe payment that grants access to something, maybe just another page that mimics a fake SaaS tool (as in, the functionality of it doesn’t matter that much), I might just add some buttons and custom text fields etc.
  • Languages/Tools: ^^^
  1. Not a project, but maybe find some people who want to try to break project 12 to see where I might’ve gone wrong
  2. Again not a project, but maybe do some more learning about everything else I’ve learnt, I see a lot of people saying use TypeScript over JavaScript so I might learn that, and same thing for other languages/tools.

And for each project, share all of my code publicly to anyone who is able to review it for me - On that note, does anyone have recommendations on where I could do this? Discords, forums, subreddits, etc?

My guess is that from here, I might have a decent enough understanding to begin attempting the most simple tools?

And one final question: For the experienced web devs here, if you were to build a tool like Notion, where would you start, and what does your tech stack look like (and why)?

1 Like
2

I might not be that experienced in web dev, but I chose another non common stack:

  1. Frontend (HTML, Vanilla Javascript, Vanilla CSS) - It is easier to get support with “vanilla”.
  2. Backend (Go and Postgresql)

The odd thing is Go. Distant relative to C++. Almost as fast as C++ (garbage collection and concurrency). Go have a “vanilla framework” built in called Go HTML templates that you can render at the server (SSR).

I have worked with WordPress and Drupal and very little PHP. But I find Go HTML templates way simpler to understand when you reached the limit of CMS. Read more of my journey here….

Another thing with Go is that you can “embed” Javascript, CSS, images, SVG and other sources into a single executable. Simple sample here. Most of the time this is a good approach and sometimes less good.

Postgresql is IMO more advanced than MySQL and pgAdmin4 is way more simpler than PHPAdmin for admin purpose. And Postgresql works well with Go.

FWIW…

2 Likes
3

I would reorganize the list a little bit - Sass is more than you need for 90% of the web. (Hint: Sass precompiles into vanilla CSS. So…)

  • Do 1 & 2 together; (Starting HTML)
  • Then 5, (Rounding out your CSS)
  • Then 4, (Intro to Javascript)
  • Then 6, 7, and 8 together (Intro to Databases)
    • 8 falls out of 1-7 if you do those with the idea of “this is all one big project, in phases”
  • Maybe 3 here, if you really want to put Sass in your toolbox. Again, I don’t personally see a need.
  • Then 10 (You’ll need a backend language at this point. PHP, Python, etc.)
  • 11 & 12 here. Your knowledge from 10 should let you stub out a fake processor, or else use a Sandbox (most payment gateways offer a sandbox environment for development).
  • 9 is going to be a paradigm shift. I would learn the “vanilla” bits first, and convert them to React, rather than the other way around. You can always go forwards with the knowledge to build upon. Going backwards is going to be harder.

And Unreal is saturated with libraries and products :wink: You’ve got the right idea though. Learn the building blocks, and the extra bits/libraries/tools will make sense to you.

Github, store each version of the project as a branch. For an example, take a look at the GitHub Code archive for the book PHP & MySQL: Novice to Ninja, 7th edition (No, they dont give me a commission for recommending you look at a Sitepoint book :stuck_out_tongue: ). Tom has organized the branches so that you can find the relevant iteration of the code for the chapter you’re looking at.

The most simple tool is Notepad. I’m pretty sure you’re familiar with that one :wink:
HTML, CSS, and Javascript are all plaintext files with their own structures. You can go very far with just those three basics.

I would start by defining the problem (project), and what I want to do with it. My tech stack when I start would be HTML, CSS, and Javascript, and i’ll advance from there when the requirements demand it. (Note that the requirements may demand it before i even type my first character of code.)

3 Likes
4

Thank you so much for such a comprehensive answer, I really appreciate it! :smile:

1 Like