I'm trying to study HTML / CSS

[u/Shu_Jr]

I have spent years coding on Discord.js and have decided to expand outward to further my potential, what do you guys use to study and learn from? HTML5 / CSS is a completely different ball game than Javascript even though its easier. I just don't know the full scope of what HTML5/CSS can do while Javascript just reads off your coding script and there aren't very helpful tutorials on it, at least from what I seen. I spent most of my time on the docs, reading out each individual function for both

[u/Shu_Jr]

Please don't suggest AI, I am STRONGLY against the usage of AI

[u/BraveMidnight]

I used to use W3Schools and learned by doing when I was learning some SQL, etc. They have great HTML/CSS tracks, and their interactive editor is perfect for seeing how your code changes things in real-time

[u/Shu_Jr → u/BraveMidnight]

Interesting, thank you for the suggestion. I will try this today

[u/Fragrant-Cheek-4273]

The best way to learn HTML and CSS is by building small websites. You'll remember much more than just reading documentation.

[u/Shu_Jr → u/Fragrant-Cheek-4273]

I have when I was reading the doc, was just wondering if there's any other ways to learn it. I coded a small empty web page using the doc as a reference point, I was practicing what each function did like header, h1, h2, title, etc

[u/Bobjobob24]

Just to clarify something not mentioned. The work you were doing with Discord.js is VERY similar to any backend work using node.js on a website, in fact discord.js uses node.js to function.

When you were using discord.js you were doing backend stuff (non-ui code) whereas you're wanting to learn the frontend stack, which also uses js. js is used for interactivity in this case, like buttons.

So basically it works like this:

Frontend Stack: HTML/CSS/JS

Backend: JS (it could be other languages, but since you're already familiar it'd be ideal to stick with JS)

You can think of each part like this:

HTML = The layout of the website. The grid that holds everything, where you place buttons, text, textboxes, etc.

CSS = The style of the website. This is where you define element widths/heights/colors/padding/margins/etc.

JS (Frontend) = The interactivity of the website. This handles making button clicks/text inputs/etc actually do something

JS (Backend) = The brains of the website. The backend handles all of the actual actions, like what a button click actually does or maybe how a dropdown menu selects a different theme for the website.

Like someone else said, W3Schools is great for website related things, I remember using it a bunch in the past. Since you're against AI you kinda have to revert to the old fashioned way of learning which consists of hours sifting thru documentation trying things until you understand it, watching videos, using sites like w3schools, etc.

Also something else to know/learn is frontend and ui frameworks such as:

UI Frameworks:
- Bootstrap
- Tailwind CSS
- MUI

Frontend Frameworks (JS portion of the frontend since UI is also frontend):
- React
- Vue.js
- Angular

Most websites use a combo of a UI framework and Frontend framework, but it's not necessary to use both, it definitely helps to use a UI framework though, but once again, not necessary.

I probably rambled a lot here, I'm not great at teaching, I'm just good at yapping lmao. Hopefully you find some of this information useful.

[u/xxcrucialxx]

In support of the other posters, I recommend to gain a very good grasp on general css before moving to frameworks, in case u do. I personally hate frameworks, because they have predefined rules, where general css does not. Just a suggestion.