Intro to HTML + CSS Workshop
Goal: Students will create a simple HTML and CSS webpage and understand the foundational concepts behind web development.
This includes:
-
what the internet is
-
what HTML is
-
what CSS is
Examples
Here are some cool personal and creative websites for inspiration:
- https://janeerie.nekoweb.org/aboutme.html
- https://jbc.lol/
- https://semii.neocities.org/
- https://semii.space/
- https://haintcomic.com/comic/h1/
- https://www.browngirlalmighty.com/
- https://kiriska.com/blog/
- https://weirdweboctober.website/
- https://sgtcharlynne.neocities.org/writing/videosharing
- https://theuselessweb.com/
- https://sliceofrai.netlify.app/rais_universe
- https://www.spudart.org/
- https://smogwalkers.neocities.org/towers
What You Need
- code editor: VS Code, VSCodium
- color picker: Color Picker
- HTML Docs: W3 HTML, MDN HTML
- CSS Docs: W3 CSS, MDN CSS
- host your site: Nekoweb, Neocities, https://yay.boo/
- get images: Betty's Graphics, Icons8, Pinterest, Same Energy, unsplash, pixabay, freepik favicon
Boilerplate HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Website</title>
</head>
<body>
<h1>Welcome to My Site</h1>
<p>This is my first web page.</p>
</body>
</html>