Briley
January 17, 2025, 11:21am
1
Tomorrow I will teach my students how to create their first web page using notepad. Before I start with the structure, I want to show them some basic HTML sites and different types of web pages.
Are there any cool and basic HTML and CSS websites you know of? Please share ones that are safe for work.
Basil
January 17, 2025, 11:21am
2
This site shows how you can style the same HTML differently with various CSS stylesheets.
You can ask your students to download the files and let them try styling on their own.
Chen
January 17, 2025, 11:21am
3
@Basil
That design library made me feel so inadequate haha
Toby
January 17, 2025, 11:21am
4
@Basil
I wrote my post before reading everything
Phoenix
January 17, 2025, 11:22am
7
Oakley
January 17, 2025, 11:22am
8
Kai said :
Web Design in 4 minutes
This is awesome and very informative
Toryn
January 17, 2025, 11:22am
9
Maybe show them https://motherfuckingwebsite.com but edit out the curse words
Briley
January 17, 2025, 11:23am
10
Toryn said :
Maybe show them https://motherfuckingwebsite.com but edit out the curse words
Great idea, I might just do that
Bliss
January 17, 2025, 11:23am
11
Lots of good options here. CSS Zen Garden is fantastic. If you need more, my portfolio is a simple HTML/CSS site and it’s public on GitHub. It has a single JS file that makes things fade in when scrolling, but you can easily remove it without breaking anything.
site: https://ryanallen.com/
repo: GitHub - ryanallen/portfolio: Ryan Allen - Leader & Product Designer
Bliss
January 17, 2025, 11:23am
13
Sterling said :
@Bliss
Great site man
Thanks, I appreciate it. I often want to redo my portfolio as soon as I finish, and I feel insecure about it
Bliss said :
Sterling said :
@Bliss
Great site man
Thanks, I appreciate it. I often want to redo my portfolio as soon as I finish, and I feel insecure about it
Did you make it just with HTML, CSS, and JS
Bliss
January 17, 2025, 11:24am
15
@Sterling
Yes, I created a design system in Figma, laid out the page based on that system, and then hand-coded HTML and CSS in VSCode. I asked ChatGPT and a human for help when I was stuck. I don’t know how to write JS so I found an online script for the scrolling fade. I wrote an article about it Revamping My Design Portfolio with A.I. Magic: ChatGPT, Midjourney, RunwayML, and Adobe Unite! | by Ryan Allen | A.I. Art, Design & Dev | Medium
@Bliss
Wow dude, really appreciate your hard work and dedication
Teo
January 17, 2025, 11:24am
17
I remember writing my first HTML site using tables for layouts and notepad back in 2015. Time really flies
Jessie
January 17, 2025, 11:24am
18
Websites from the late 90s or early 2000s often have simpler HTML since web development was less complicated then
Check out some old sites using http://wayback.archive.org/
You can also compare old websites to their current versions to show your students the value of CSS for a good user experience
Bay
January 17, 2025, 11:24am
19
Hope this helps. Hello Kids!