Tutorials on Web development

Hi guys, I'm new to web development, and I need help to understand the syntax and other fundamental about it

Comments

[FRicardi]

Hi! I won't attach any link because i don't know which kind of resources works best for you, but I hope the keywords help you on your journey!
My approach to learn web was basically getting a time machine and learning first how the web was built, and for which problems those technologies were trying to solve.

First things first

First, understand the basics, such as HTTP Requests, a Browser and how things are rendered there, and search engine optimization (SEO). This can be just a glance, but it'll help u a lot later on, because some decisions on the project architecture can be taken based on those.

Creating pretty shapes

HTML and CSS are the base of web pages design. To make sure you don't get way too bored here, it is nice to play a little bit, creating some shapes with borders and colors, forms, just to get familiar with how those languages work.

How to make it fit for humans

Although the appearance is important, we have other relevant topic to cover: structure. Using proper HTML tags for each structure that you are creating is very valuable for SEO and accessibility. Remember that people might be accessing your site via screen readers, or the google bot is trying to index your site. If you have proper tags, you give them the possibility to understand what you wanted when you've created the webpage.

CSS: Getting familiar with it

CSS is not easy, but it's not rocket science as well. You might get to the same result with 5 different approaches. The right one is subjective, because you must understand what is your objective with that piece of code. To render a layout, for example, you can use something like grid, flex, table (old school, but just to mention). So it is nice to understand if that'll cover your needs and if there is not any redundant instruction that can break your code. Here you can start learning concepts such as variable creation, media queries for mobile styles, and how to select your desired element.

Javascript: making things talk

Here is where you start to have a lot of branches to go. First, you can create simple event handling vanilla javascript, selecting elements, logging to the console, displaying alerts... Later on, you can learn a bit of one of the most famous frameworks: jquery. It is very common to see it in some projects, it is used to handle html elements events and to trigger HTTP requests.

Frameworks and libraries ocean

If you know a bit about the above concepts, it is way easier to carry on with frameworks. Bear in mind that i'm not only talking about js frameworks here, you have some CSS frameworks like SCSS and Less, also some libraries like bootstrap and tailwind, that can speed up your development. Also, in the HTML world, you can see things like JSP (Java Spring) and Blade (Laravel) templates, that are templating engines that help to build pages with those technologies, basically by letting you add features like if/else, foreach and variables interpolated with the code. Just as mentioned for the earlier steps, it is nice to learn first about why those frameworks were build and which problems they solve, because that will guide your usage of it. Remember that if a framework is not solving your problem, it might not have been built to solve that, so it's nice to ask those questions beforehand.

Hope that helps u a bit, feel free to reach me if I can help u with something!

[Sotonye Pennuel 🇳🇬]

Thanks. I will try hard. But I don't know how to approach it. Or even create a project for web development.

[FRicardi]

Just found this article that might be useful: dev.to/ruppysuppy/front-end-develo...

The author seems quite used to that roadmap so maybe he could help you aswell!

[Sotonye Pennuel 🇳🇬]

Thanks for the help.