From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment

What are the essentials of web development for beginners?

From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment

Start my 1-month free trial Buy for my team

What are the essentials of web development for beginners?

“

I hope you have some delicious coffee or tea. And more importantly, that you're ready to dive in. So let's get into it together. What exactly is Next.js? All right, so we see some developer code. We have a compiler. Then we have the compiled version of the code. And this is what code? Well, this is a home page, essentially. That's just returning HTML. At the highest level, without knowing anything about web development, JavaScript, let's table that. Next.js is essentially a dynamic React framework. So it's built as a framework for this library tool called React, which we're going to dive into as well. What it does is it provides the foundational elements for making fast web applications. So if you want a refresher on the essentials, what a web application is, a well-built web application is versus a non-professional one, then I encourage you to continue. If you already have a ton of experience with that, please move on. Okay, still with me? So what are the essentials of a web application? Well, hopefully you know what a web application is. I would imagine you are since you're taking this course, but recall that technically speaking, a web application is a software application that we use over the intranet. So we're using then what? Web browsers in order to access it. So that means that these applications have to run on the engines of these browsers, okay? we'll keep it basic so far. What are the essentials for contemporary web application that you should know going into the industry or already know from working in the industry? Well, user interface. So the user interface determines how users engage with your application. Go to any website, go to google.com, and what you see is that interface, your graphic user interface. Then you have the routing okay so the routing is when you click on links right when you go from one place to another place you go from your dashboard your sign into your login that's routing what about data fetching well if you want to retrieve information if you want to grab information from an api if you have a website showing the weather and you're getting it from a database you show that weather you got to fetch that data all right and then there's a rendering which plays such an important role Rendering is where and how and when do you want to actually present either static, so non-changing components, or changing, data that could be updating or changing, if you update your username, for example. But rendering is very important too because rendering has to do with the speed. The way you render something can show how efficient the website's working. This is one of the reasons why I love Next.js because it can handle this for us in a very powerful way. Now we have integrations like CMS, content management systems. So that's, you know, you can have things that you could add services essentially, if you want to add off though, so that you can have all the login stuff streamlined yourself, so you don't have to build it. CMS is a way for you to have, let's say a backend where people that don't need to program can access and change things. Okay, you can have payment systems integrated. You don't have to build everything from scratch. All right, that's what we mean by integration. To get things that are already developed and you add them in with third-party services. Infrastructure, the environment where your application's code's deployed. So you could do it serverless. If we're gonna be using CDNs, we'll look at that because Next.js actually pre-builds for us in a way React doesn't. If you're not sure what a CDN is, don't worry, we'll cover that, okay? Performance, strategies to enhance the user experience, importance, optimization. Scalability, so when you have a million people all of a sudden going on that website, you wanna make sure that it's working, right? you wanna make sure that it's still gonna be able to grow and then grow in a way that doesn't break down on you. And then the developer experience. So that's the ease at which your team can actually build. So writing code that's readable and storing it in projects that are also easy to navigate so other people can work on it and understand what it is, right? The easier, the better laid out a project is and its components, then the easier it'll be for your team to develop that project. If it's a big mess and it makes no sense, then you can have an awesome project, but how are you going to continue to develop it if it just keeps getting messier and harder and harder to understand? Okay, and that's it. Those are all the keys in a professional, and I kid you not, I kid you not, if you walk into a job interview and they sit you down and say, hey, what do you know about web applications? And you go through what I just said, If you were to go through that with somebody interviewing you and say, user interface, routing, data fetching, rendering, integrations, infrastructure, performance, scalability, developer experience. If you say those, and you can talk about each one, you don't have to know everything. And that's what I'm telling you again, right? For beginners, especially for beginners, you don't have to know every little thing about everything on the planet. We already have ChatGPT, we already have Google. But what matters as an interviewer, if you come in and you say, hey, I don't know everything about everything, but I can tell you the essentials of a web application. You better have a good UI. You better be paying attention to the rendering and the integrations. This is gonna make me think, hey, this is somebody that understands what it takes to build, understands how to build professionally by caring about rendering, by caring about data fetching and error handling in case systems go down. This is somebody that knows how to save money with integrations by understanding, hey, let's not waste months of valuable time building an authentication system and when we can bring in a third party like Authodes, bring in authentication. These are the things that really matter when you sit down for a job interview. You could showcase you know that. And if you can talk about that, you don't have to know the ins and outs of every single wide query that exists. As long as you show that you are aware and you my friend are on a good path. And that being said, let's continue forward on this good path together. So now that we've discussed briefly the essentials of web applications, let's back up out in Next.js as something that's built around something else. And that thing that it's built around is called React, which is a library. And that's coming up in the next lesson. So hang on to your hats. I'll see you there.

Contents