Workshop 1 Welcome!!

HTML

What is HTML?

HTML stands for Hypertext Markup Language what does that mean?

If we concentrate on each part one by one we can get a good look

Hypertext - refers to hyperlinks basically connecting your screen text to other things
Markup - Related to design
Language - LANGUAGE!!!

Therefore it is a way of displaying text that may be inter connected and can be edited to look different

CSS

CSS? SSC? SCS?

Pretty simply it adds

s

t

y

l

e

If you would like to add a stylistic look to your website CSS is your bestfriend

What are we learning?

Here's a list of tags we will learn about in html

```
<html> </html>
```
This tag is your base. Everything you do should be within these tags
```
<head> </head>
```
This is where you put your CSS details, external stylesheets or imports
```
<title> </title>
```
This is the Title of your website. Make sure its a pun jk :)
```
<body> </body>
```
This body tag is usually where most of your text images and fixings will be
```
<ul> </ul> <ol> </ol>
```
This is how you make lists ordered/unordered
```
<p> </p>
```
This is to signify paragraphs
```
<img> </img>
```
This is how you enter images into your website
```
<h(number)> </h(number)>
```
Headings going from 1 to 6 big to small
```
<div> </div>
```
This is where most of the styling magic happens. Used to create containers to use attributes with
- ps: how do you center a div? [Trick Question : you cant or maybe??]
```
<a> </a>
```
These are what all links are made out of
```
<marquee> </marquee>
```
Just try this one out, trust me

Attributes

Attributes are elements that each tag have which we can specify or leave to default. Some are common for almost all tags and some not. These are often used with div tags to stylize.

You can have some of the following tags:

src

This is an attribute that refers to the source of something most commonly used to refer to the source of an image or a link to a javascript or css stylesheets

href

This is used to create a link (remember the initial thoughts?) quite often use in the a tag

alt

Used only in images (as far as I know) provides an alternate text to show over an image

width/height

To give the height or width of an element

style

Used to put css for the html tags

CSS Time finally

CSS TIME !!!! WOOOHOOO

So the truth of the matter is CSS cannot be taught. Nevertheless in 1 hour. Therefore I will layout a bunch of CSS things you can use to make your website look better.

background-color
color (for the color of the text)
font-family (for the font type like Calibri or Arial)
font-size
margin (add an invisible space outside the area of the element)
margin-left
margin-bottom
margin-right
margin-top
opacity
border (the syntax for this is to give the thickness of the border then the type of border; solid/dashed/etc. and then the color)
list-style (changes the bullets of the list)
display (sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.)
position (sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.)

Webdev 101

So far I have given you the equivalent of lego bricks. But you have no instruction manual. Weeelll the problem is there is no manual for this. But I can give you the kind of thinking you should use while building websites

Containers are your friends and every container is a rectangle box. What I mean by this is that if you have a design for a website to bring it to life start bby layering it. One by one largest layer on the bottom smaller layers on top.

HMTL tag on the bottom with images here and there.Use div tags to make smaller layers and containers and the style them

W3Schools and mdn Web Docs are your friends if you are ever confused about anything search it up. Chances are you are not the first person to be confused about it

I will add a html code below soon that is made purely from the things I taught above that you can use as a demo for starting your own website

Bonus : hosting

If u have a static website [purely HTML CSS and/or JavaScript] you can use free features to host it online. Here's a step-by-step tutorial you can use
Github Pages
Render