Simple Website Layout From Scratch Using HTML/CSS :D
6A new website tutorial? (unheard of!) Today we use display: grid; to make a website layout, all hand coded with love ˂3 awwww... Sorry again this is super long, and as usual please remember idk what I'm doing so be kind to me in the comments and I'll be happy to make any corrections necessary :) Also I've been working on this video for so long, I feel like I've forgotten some stuff so if I have let me know but otherwise enjoy!
Basic HTML/CSS Tutorial (Website Building for Beginners!): • Basic HTML/CSS Tutorial (Website Building ...
My site on Neocities: https://scftst4rs.neocities.org/
Timestamps:
00:00 Context
04:27 Programs being used
05:00 Setup HTML
06:30 External CSS
07:40 Create a CSS file
08:40 Linking the files
10:30 Save your work!
10:50 Container div
11:48 Semantic HTML
12:45 Borders + condensed CSS
15:20 Shrinking/centring div
17:10 Margin shenanigans
19:40 Centring container div
20:34 Intermission
21:13 Display grid
28:28 Grid-gap
29:34 Grid-template
30:58 Max-content
32:55 Go wild!
33:40 Making a nav bar
38:57 Fixing my mistake
41:29 Go wild! pt 2
41:50 Making a nav continued
43:00 Outro
Resources:
w3schools is the site most people will direct you to when learning HTML + CSS. It also has tutorials for other coding languages:
https://www.w3schools.com/html/
LAYOUTS!! I found this one site that's already compiled a ton of links I wanted to share here anyway, so that's saved me some searching -w-; Remember to give credit when asked, or if in doubt: give credit anyway. Also have a look around these sites while you're there. Who knows what other cool stuff you might find!
Disclaimer btw: I haven't looked at all of these sites individually and in their entirety, so I am unable to provide full information about their contents. Please browse with caution:
https://webmastering.neocities.org/layouts
Layout builder by sadgrl.online aka goblin-heart (this is also on the list but I'm giving it a special highlight 'cause I know it's pretty popular):
https://goblin-heart.net/sadgrl/projects/layout-builder/