What are some simple HTML and CSS sites to show my students

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.

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.

@Basil
That design library made me feel so inadequate haha

@Basil
I wrote my post before reading everything

@Basil
Thank you so much

Kai said:
Web Design in 4 minutes

This was fun to check out

Kai said:
Web Design in 4 minutes

This is awesome and very informative

Maybe show them https://motherfuckingwebsite.com but edit out the curse words

Toryn said:
Maybe show them https://motherfuckingwebsite.com but edit out the curse words

Great idea, I might just do that

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
Great site man

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

@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

I remember writing my first HTML site using tables for layouts and notepad back in 2015. Time really flies

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

Hope this helps. Hello Kids!

Bay said:
Hope this helps. Hello Kids!

This is so cool