Honestly, trying to even figure out and decide what that means will take you down so many different rabbit holes. Then starting to build out the thing will take you down more.
Timebox a bunch of key parts so you don't spend forever in analysis paralysis. If you can't decide, randomly pick an option that appeals to you.
Once you have the thing working, start again and revisit every key decision and technology choice you made. Things will be much clearer this time.
For added benefits, blog about it in public, which will act as a great learning tool for yourself, and help others in the same boat as you.
Good luck, and remember it should be fun. If it becomes not fun, its time to revisit the key decisions :-)
Rails is opinionated but its opinions are often correct!
- Beginner: https://frontendmasters.com/courses/web-development-v3/
- Intermediate: https://frontendmasters.com/courses/fullstack-app-next-v3/
- Advanced: https://frontendmasters.com/courses/svelte-v2/ and https://frontendmasters.com/courses/sveltekit/
Honorable mentions:
- https://www.learnui.design/ for getting started designing yourself.
Any time you don't know how to do something, google it (or chat gpt mostly works these days).
1. CS50's Introduction to Computer Science
2. CS50's Web Programming with Python and JavaScript
Even if you know programming, you should still go through the first course. You can choose watch the lectures on 1.5x or 2x but definitely do the assignments. The assignment and project based approach of these courses will definitely make you learn the stuff deeply and will make you a good full-stack developer. All the best!
Links:
1. https://www.edx.org/learn/computer-science/harvard-universit...
2. https://www.edx.org/learn/web-development/harvard-university...
As a general recommendation easy to follow, I would recommend to learn JavaScript and only JavaScript. And you can go just for the most modern version of it without need to worry about things that make javascript complex: compiling, bundling, commonjs vs ES modules, etc.
JavaScript is a joyful language to work with and can get you very, very far in the software development landscape.
O'Reilly's "Learning SQL" is probably the best intro to relational databases I've seen.
While old, Reissig's "Secrets of the Database Ninja" is fantastic for understanding what the heck's going in that weird franken-language.
Re the comments on books vs courses and videos.... buying a good library is IMHO a much better investment. You learn where things are in your shelf and can find further info in seconds. This becomes even more valuable as searching for technical stuff gets worse every year. Also, good books teach you what you don't know you need to know, rather than what everyone knows they are looking for.
1. HTML / CSS (1-2 Months) as already mentioned here, the Responsive Web Design course on the https://www.freecodecamp.org/ is really good. https://netninja.dev/ also has some really good free content on youtube. Don't rush this step. Make some cool static websites and share with your friends. Learn git and become a Github Pro member so you can serve private repo's on the web for free (via github pages).
2. Javascript (3-6 Months) I highly recommend "Javascript & Jquery" by Jon Duckett. In the web development world it is by no means the latest book but I do believe learning how javascript was used 10 years ago relevant to how javascript became what it is today. I'd be happy to give you my copy! Spend the time learning javascript, make something cool and share it with your friends. Get to a stage where you can think about how you could make something in javascript. If you're dreaming in Javascript then you've taken this step too far.
3. Backend (Eternity) At this point it really depends which way you want to go as a developer. Do you prefer Python as a language? Look into Django. Are you a DHH fan boy? Ruby on Rails. Are you too scared to take on another language (like me) then use expressJs. I highly recommend reading Hypermedia Systems https://hypermedia.systems/ to give you a high level background and understanding how a web 1.0 style application is built.
Enjoy!!
Javascript + HTML + CSS avoids this and will provide a solid foundation.
Alternatively, picking a mature framework like Laravel or Rails also avoids the issue.
Make a strategic decision first, then pick a book.
Good luck.
https://www.amazon.com/Agile-Web-Development-Rails-7/dp/1680...
If you prefer UI/user interaction/visuals, look in youtube.com for 'nodejs JavaScript HTML website'
Don't use frameworks just try something simple first
Also as much as I don't like the current state of Ai assisted programming, they are superior to any book out there.
Once in a while I buy bunch of books to see what the new books everybody is talking about and end up getting frustrated after realizing important parts are either skipped or explained without details. In my opinion, book learning (especially programming or other IT related stuff) is dead. I have so many books collecting dust and even the latest ones won't be relevant in 3-4 years.
https://www.freecodecamp.org/ is good, the Responsive Web Design and JavaScript courses are a good place to start, there's a great community of learners and tutors to help.
The MDN developer resources is a useful site to keep open while you learn. https://developer.mozilla.org
Now pick a framework to start learning and building with. React is the most used but I chose Svelte because it is powerful yet has simpler syntax and is easier to learn, also supposed to be more performant.
The Svelte tutorial is an excellent learning resource, nicely detailed and structured. I also found it to be a useful refresher for JavaScript in a more practical real world context. https://svelte.dev/
While doing the Svelte tutorial, and in fact all the time now, I have a tab open for an AI chat bot. I find Perplexity to be particularly useful for explaining syntax and code snippets.
If you want to get more into JavaScript then a good book is Eloquent JavaScript https://eloquentjavascript.net/
Other posters have pointed out the complexity of the back end stuff and devops, etc. You can simplify this aspect by using a service like Supabase or Firebase.