How I'd Learn Full-Stack Web Development (If I Could Start Over) - Bilingual Subtitles
Learning how to code is hard,
and the majority of people who try fail,
and web development specifically is so overwhelming,
with so much information about different technologies, what you sure there shouldn't be learning, it all seems to just be conflicting with each other.
So what I'm going to do is give you a step-by-step approach for how I would go about learning web development again,
and there's not going to be a bunch of theories.
theoretical fluff, there's not going to be a million different possibilities of directions to go.
Just streamlined approach from start to finish that you can actually start today.
The thing you need to learn is the basics of HTML or hypertext markup language.
This is the language we use to define the content and structure of a website.
So imagine you had some text that needs to go on a website,
we need to define what's a heading, what's a paragraph, and on and so forth.
And do this using HTML.
Now you don't need to take a super deep dive here just yet.
The goal is just to be able to take some simple text and convert it into a basic HTML document.
And after HTML, it's time to learn the basics of CSS or cascading style sheets.
This is how we add style and layout to a page.
So essentially,
how do we take our content and make it sort of come to life,
give it some colors and some layout and describe what exactly it should look like.
And now once you get through a little bit of CSS,
it's time to take a bit of a breather and try working on your first project.
I'm a huge proponent of the idea that you need to be actively learning.
So don't just go through a bunch of tutorials, make sure you're doing things.
to continually learn and test your knowledge.
If need an idea,
something you can do is make a portfolio website for yourself,
or sort of like an about me or resume type thing using HTML and CSS.
This is also a great time to learn how to use the developer tools,
which you'll become super familiar with over time,
but for now you can use them to test your CSS and sort of toggle different properties and try different things out.
And now that you have this first project under your belt, first of all, congratulations.
It's time to move on to some JavaScript.
So JavaScript is how we add interactivity to our websites.
It's going to be the main programming language of the web.
So to start out, you need to just learn the fundamentals of the language.
And this is going to be the step that probably takes the longest.
I'd recommend you probably go through some course,
whether it be here on YouTube or some paid course somewhere,
but just go through the fundamentals of JavaScript and learn how to use the language pretty well.
And then after that, you can move on to DOM manipulation, which is how we actually use JavaScript to change the contents of the website.
So how we add that interactivity to it.
And now that you've learned this new skill of adding some interactivity to your website, guess what time it is?
Probably.
You can either take whatever website you're already made and add some interactivity to it or build a new one.
A project to try here would be to make some game in the browser,
something like Tic-Tac-Toe or Sudoku, or if you want to get an adventure, so you could try something a bit more complex.
And as you work on this project, you'll probably find it's the hardest thing you've done so far, but that's actually a good thing.
This is going to give you more opportunity.
opportunities to practice new debugging skills.
So how to use JavaScript with the dev tools, as well as learn how to Google JavaScript problems and search them on Stack Overflow.
And also I'd recommend trying to use chat GPT a little bit whenever you have some issues.
Now, don't just copy code from Stack Overflow
or GPT or whatever it Use them as tools to actually teach you how to do things,
do try to start incorporating them into your workflow.
Okay, so now you have this incredible website
with some interactivity,
but it's time to level up your skills a little bit and revisit some of the items that we sort of brushed over earlier.
So with HTML, I would focus on how to write accessible HTML.
And then with CSS, I would focus on responsive design.
And if you're particularly interested in seeing you can learn things like transitions and animations,
the grid layout system, and how to write more complex selectors such as those using pseudo classes and pseudo elements.
You also use this time to learn some CSS frameworks like bootstrap and tailwind,
which are essentially just pre-grid and CSS for you,
or you can go into some pre-processors like sass or less that add some interesting features.
features to CSS.
And be clear, I don't think you have to do this.
I just want to mention it in case you happen to be super interested in CSS.
And now you should be pretty comfortable on the front end.
And it's time to start working with the backend.
So at this point,
what I would do is first of all, just learn how to make a request to a server from the front end.
So with JavaScript, how to use fetch and how to write asynchronous code.
And for this, you can just use some.
in public which application programming interfaces,
which essentially just allow you to make a request, and their server will send some information back to your browser.
Now, before we can move on to actually implementing our own backend, I'd also recommend you learn
how to use a terminal,
and you just need to learn the basic commands, so how to do things like changing directories, maybe renaming a file, moving some files around.
and deleting files, just things like this.
And one more specific thing to learn with the terminal is how to use git and git hub.
So git is simply a version control system.
This just keeps track of all of your changes, sort of like Google Docs history, but just for coding.
And git hub is simply a website to upload your git repository to, that way you can share it with other people.
And now text.
start writing some back-end code, I'd recommend you learn Node.js with Express.
There is an,
I say,
this is because Node.js allows you to use JavaScript on the back-end,
so you don't need to learn a whole new programming language, just a few new functions for JavaScript.
And with Node,
you also need to learn NPM, or the Node package manager, which just allows you to integrate open source code into your own project.
and you'll be using this a lot more in the future.
So you should be able to create a backend, but usually with a backend, we need to store some information that actually persists over time.
And for that, you need to learn a bit about databases.
So there's two primary types of databases, and I would learn a little bit about both of them.
So we have SQL databases and no SQL databases.
So SQL or SQL, is a relational database.
So allows you to essentially just have a bunch of different tables and have them somehow be related to each other.
And there's a bunch of flavors of SQL.
Most of them are very similar to each other,
but MySQL is probably a good starting place, but feel free to use whichever one you prefer.
And then a NoSQL database is just any other type of database.
So it could be a document store or some kind of,
value pair system,
lots of different things could fall under the NoSQL database umbrella, but I'd start with MongoDB, just because it happens to be the most popular.
And then,
of course, in the future, if you ever need a different type of database for something specific, you can learn it at that time.
And with that, you should have the basics of backend development down, so it's time to build your first full stack project.
There's lots of things you can do here,
so feel free for it to be creative,
but if you need some ideas, maybe take that game you built earlier and add some global leaderboard that persists with a database.
Or you could try building some productivity tool that requires a database in some sense.
And at this point,
you could put these projects on your resume,
so if that's something you want to be doing,
try to add some unique twist to whatever your project is so that it stands out a little bit.
And to not this point, you might be saying, where are the frameworks and libraries?
Where the buzzwords like React and View and Angular?
And now is the time, I think, to actually start learning these.
And a key point to notice here is that we waited a long time to learn these.
So why is this?
It's because frameworks and libraries are simply a simplification process.
They provide some pre-written code to simplify the development process,
but if you just go straight to these frameworks and libraries from the beginning,
you're going to have a hard time actually learning them and grasping everything they do if you don't understand the code that they are replacing.
So once you get to this point where you can actually understand them and build your own applications without the frameworks and libraries,
it's time to actually start learning them because they are important for the industry.
I would start with React just because it's the most popular,
it the largest ecosystem, and because of all of these things, it's also the most marketable skill.
But course, if you prefer to learn something else, you can do that too.
And now that you know React, it's time to do another project.
What I'd do with this one is just take the last project you did and convert the code into React.
And at this point, I'd also learn TypeScript.
So TypeScript is a super set of JavaScript, meaning all of JavaScript is valid TypeScript, but not all of TypeScript is valid JavaScript.
And all it really adds is just strict typing,
so you can define the types of everything you write in JavaScript, which can be very helpful in larger code bases.
Now, you've spent a lot of time writing code, but not a of time thinking about how that
code even actually gets to the browser, how this whole internet thing working, so I'd learn a little bit about computer networking.
This is actually going to be very important in the future,
so just learn the basics of essentially what happens when you type some URL in your browser.
If you can answer that question, you're probably good with computer networking unless you're just interested in it and want to go deeper.
And specifically, this means you need to understand things like IP addresses, HTTP and HTTPS.
and the DNS system.
And been building these websites, but we only know how to run them from our own computer.
So it's time to learn a little bit about cloud computing, because what would happen if the power ran out in my house?
Well, my website would go down and that's not good.
So what we want to do is learn how to use the cloud instead.
Cloud computing simply allows you to run your code from somebody else's computers.
The largest cloud computing providers are going to be Amazon with AWS, Google with GCP, and Microsoft with Azure.
I'd recommend starting with AWS just because it's the most popular, but any of them are fine choices.
And now, like many things, you don't need to go super in depth.
You can learn more whenever you need something in the future, but for now, just learn how to deploy your web application to the cloud.
So if you're using AWS, you'll want to learn how to use EC2.
And to now, as you're learning how to use the cloud, it can also be helpful to go a little bit deeper into infrastructure.
So you can learn how to use things like Docker and containers,
which essentially just allows you to make sure that whenever your code is running,
no matter where it is, that it's going to run in isolation and in the exact same environment every time.
Next, any good web developers,
of a good understanding of security because you need to be able to not only protect your website, but also the data of your users.
So this, you need to understand some of the more common attacks that could be made against your website.
So these are things like SQL injection, cross-site request forgery, or cross-site scripting.
And you need to learn about the different concepts being used to prevent these types of attacks.
So things like cores and input validation on both the front end and the back end, as well as simply encryption.
So making sure that we're using HTTPS and that we are encrypting user data such as passwords.
And to now you're building these incredible websites, but you need to make sure that they're actually performing.
and that they're ranking high in search on Google.
And good way to do this is to use Next.js and more generally to learn about server-side rendering.
So allows you to render some components from the server side and send them back sort of as raw HTML to the frontend.
So this can not only make your pages more performant,
but it also makes it easier for
bots used by companies like Google to actually understand the contents of your page and properly index them in search.
as you're learning all of these different things don't naturally be things that you enjoy a lot and things you don't like at all.
So free to skim some of the less important things that you might not like as much and
go way deeper into the things that you do like even more.
But as you're doing this, you want to make sure that you're still learning in the correct way.
And for that,
you should watch this video next where I go over eight of the most common mistakes I've seen with my students and even myself in learning how to code that
can prevent you from actually
Unlock More Features
Install the Trancy extension to unlock more features, including AI subtitles, AI word definitions, AI grammar analysis, AI speaking, etc.
Compatible with Major Video Platforms
Trancy not only provides bilingual subtitle support for platforms like YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera, but also offers AI word/sentence translation, full-text immersive translation, and other features for regular web pages. It is a true all-in-one language learning assistant.
Supports All Platform Browsers
Trancy supports all platform browsers, including iOS Safari browser extension.
Multiple Viewing Modes
Supports theater, reading, mixed, and other viewing modes for a comprehensive bilingual experience.
Multiple Practice Modes
Supports sentence dictation, oral evaluation, multiple-choice, dictation, and other practice modes.
AI Video Summary
Use OpenAI to summarize videos and quickly grasp key content.
AI Subtitles
Generate accurate and fast YouTube AI subtitles in just 3-5 minutes.
AI Word Definitions
Tap on words in the subtitles to look up definitions, with AI-powered definitions.
AI Grammar Analysis
Analyze sentence grammar to quickly understand sentence meanings and master difficult grammar points.
More Web Features
In addition to bilingual video subtitles, Trancy also provides word translation and full-text translation for web pages.