If you are new to web dev stuff, these are some of the tips / ideas that i have observed during the last 2 year period while learning about all of this stuff by myself.
Most of this is very opinionated. Some of the made points are less opinionated than others.
Everything is a class. id-s are used very rarely.
Everything is a div.
Your html tutorial just got 50 minutes shorter. 95% of the time, the div is the right option. There are some places which say that this may hurt SEO, but then again, a lot of the SEO improvements tips & tricks seem questionable.
- CSS is hard because you are learning 2 things at once.
When learning CSS and creating your first pages, it will seem like you are following all of the CSS rules properly, but the site still looks bad.
This is not because the CSS you wrote isn't valid. This is because you don't know the common rules that are used in design and ux
- Remove the inbuilt html styles.
This will make things more predictable and easier to control.
Fonts are a very important part of design. Just look at any page.
If you think about it, font is the element that you look at the most.
So picking a shitty font will make things look globally shittier.
- Use Figma for prototyping / creating the design before writing any code.
Going one step further, do not even think about starting to write any code before the figma prototype is completely finished.
At the start it will be hard to follow this rule, but as you go on it will save you time.
- Mobile-first is a stupid catchphrase
Both desktop and mobile are important and the design needs to be interactive on both devices.
Don't start your design from the mobile if you are designing web pages.
Wrapping divs into divs just to avoid a css problem is not the right option in the vast majority of the cases.
Utility classes are one of the best time savers. (Personal opinion)
Even bigger time saver is writing your own utility classes.
Don't pay attention to this point if you are only starting to learn CSS.
After some months of learning CSS, utility classes may become an interest if writing pure CSS will become an annoyance.
- Do not learn a templating language. That's the work for the frontend. (Personal opinion)
Backend frameworks usually come with a templating language. Ignore them.
Why? Because one of the main tasks of the backend is displaying data that is stored in the database in JSON format.
If you are learning backend first, then the tutorials that show APIs seem like a big waste of time, but they are not.
I would advise on not learning any of the templating languages because most probably you won't use them when you'll learn a frontend framework.
- What is an API?
In broad terms, one of the main goals of the backend is accessing or manipulating the information that is stored in a database.
How can we create an access to the information that is stored in the database on a website? One way to do this is by creating a REST API:
You write an SQL query or use an ORM to get some specified information from the database.
The database sends back this information and you display it in JSON format.
Now from the frontend you can send a fetch request to the url that returns the Database query and boom, now you understand frontend and backend.
One interactive example of this can be seen here.
The url is the instruction for the server on what it should do when someone visits it.
Django is great, but don't learn it as your first framework. (Very opinionated and speculative)
Django makes it very easy to create models and connect them to views.
If python is your first language and django is your first framework, you will look at tutorials and most probably won't understand how the written code works, which will push you to just memorize all of the syntax.
In term of speed and creating your first functional backends, this is great, but in terms of learning, this will most probably hurt your progress. If I'd be learning backend from the start today, i would learn Express.
- Don't memorize stuff
The things that you will use often will be memorized automatically.
The information that you'll need to lookup will be one DuckDuckGo search away.
If you look up the same thing commonly but still can't remember it, just save it in your notes for quick access
- Don't get attached to frameworks
They will change.
- Understand the vanilla version first, then use abstractions (in regards to CSS and SQL)
TailwindCSS seems great and very shiny. But use it only when you understand how plain css works and have written it for some period of time (1-2 months minimum).
ORMs seem like a great time saver. But understand the basic principles of how databases work before using them.
Watch a boring 4hr long SQL tutorial. write some raw queries. Design some tables and relationships between them. Write some basic CRUD statements.
SQL language will always be the same. ORMs will change. Same will be true for CSS. Thus, understanding how the lowest version works will make it easier for you to learn what the new framework does.
Static website is a misleading term.
You will understand how a thing work only when you write it yourself.
You can watch 15 different videos on how blockchain works, but you still won't understand how it works.
The only real understanding about how something works will come when you try to recreate it. The same applies to web dev stuff.
Then again, you should not ignore already existing tools when building something, but you will have a clearer understanding about how an API works only when you build it yourself.
- Don't think about deployment during the learning projects.
That's a separate topic and should be focused on only when you need to do it.
There will be instances where you run into a problem and try to fix it for multiple hours. The problem could even be solved in one line of code, but you still can't find the right answer. That's fine. And also unavoidable.
Get familiar with DevTools
Add loading="lazy" to img elements in html to speed up initial lead-times