Workshop created by our MS Coleads: Alex, Naitik, and Aarnav! Edited by JP
Welcome to MS P2P Hack Club 🥳🥳🥳🥳
What are we doing today?
- Introductions
- What is Hack Club?
- The ways of pumas.dev
- Tags and basic HTML/CSS
What is P2P Hack Club?
We're a club where you build new things. In this club you will be able to build websites, robots, discord bots, video games, or anything else that you want to make!
We run workshops every meeting focusing on different projects that members can create.
You DO NOT need to know how to program! Most people in this club are new to programming :)
HTML and CSS
HTML stands for Hyper Text Markup Language. HTML is the standard markup language for Web pages. HTML elements are the building blocks of HTML pages. HTML elements are represented by <> tags.
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. External stylesheets are stored in CSS files.
We are a chapter of the national Hack Club Organization!
Hack Club is a nonprofit network of coding clubs and makers around the world! We are part of a community of thousands of hackers.
MS P2P Hack Club Rules
Be kind and inclusive
Show respect to all
Keep microphones off when someone else is talking (co-lead)
Don’t be rude in anyway
Have fun!
A full list of rules can be found at https://p2phack.club/conduct
Announcements
If you have any announcements you want to share, or anything cool you are building, let us know! You could speak about it at our next meeting :D
What are we building?
Today we're building a website with HTML and CSS in the pumas.dev web server!
HTML and CSS
HTML stands for Hyper Text Markup Language. HTML is the standard markup language for Web pages. HTML elements are the building blocks of HTML pages. HTML elements are represented by <> tags.
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. External stylesheets are stored in CSS files.
Separation tags
<html></html>: The tag containing all your code
<head></head>: The tag where we hold a majority of the JavaScript and CSS aka the backend or the changes to the main code
<body></body>: The main code, where everything that is shown on the screen is
What are tags?
<tag></tag>
Tags have special abilities to add special content and change how text is laid out. They’re written with a start and end tag, here’s some examples:
<h1></h1>
<body></body>
<script></script>
Content tags
<h1></h1>: Headers for pages, shown with a larger font and darker text
<p></p>: Paragraph text, small with normal font.
What are styles?
Styles are a snippet of code which is demonstrating what a style is and how CSS is used. Basically, all CSS does, is changes how a tag is presented.
To do this, we first specify, a specific tag, such as h1, meaning all h1 tags will be changed in the same way.
Secondly, we must tell the program would we want to change, in this case the color.
Finally, we have to say what color the text is changing to, here, the color changing to blue.
tag {
Style property: property value;
}
h1 {
color: blue;
text-align: center;
}
Some fun other tags
<img src=”IMAGE”></img>: Creates an image
<b></b>: Bolds
<u></u>: Underlines
<a href=”link.com”></a>
<button></button>: A pressable button which can run any type of functions
How to access the Pumas.dev web server
Good Sources that you can use!
Learn best with Video?
Learn best by reading?
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/
freeCodeCamp HTML Tutorial. Structured HTML tutorial for beginners with step-by-step lessons. Takes you from 0-100 for web development!
https://www.w3schools.com/html/default.asp
W3schools HTML Tutorial. This website won't save your progress, but can be used as a really good resource on examples on how to build certain features of your website!
