|
|
|
|
@ -1,17 +1,22 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Week 7: Coding with EXTRA! Javascript & CSS in websites
|
|
|
|
|
### Week 7: Coding with EXTRA FLARE! Javascript & CSS in websites
|
|
|
|
|
|
|
|
|
|
Miss Shway
|
|
|
|
|
|
|
|
|
|
(Shwetha Jayaraj)
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
Welcome back to Developer land. So far we have learned:
|
|
|
|
|
# Welcome back to Developer land.
|
|
|
|
|
|
|
|
|
|
So far we have learned:
|
|
|
|
|
- what real programmers use to upload their code for others to collaborate. Using **Github.com**
|
|
|
|
|
- **HTML** basics to make a website
|
|
|
|
|
- the tools we can use to edit HTML code in
|
|
|
|
|
- https://html.onlineviewer.net/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Today we are going to start programming in CSS! This makes your website **PRETTY**!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
@ -41,6 +46,8 @@ Let me know if you'd like help with your website.
|
|
|
|
|
|
|
|
|
|
## Step 1. Let's go to [neocities.org ](https://neocities.org/)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Today we are going to start programming in CSS! This makes your website **PRETTY**!
|
|
|
|
|
![[Pasted image 20231101131959.png]]
|
|
|
|
|
|
|
|
|
|
You'll see a lot of interesting website examples here.
|
|
|
|
|
@ -60,103 +67,19 @@ Think of a page like youtube or instagram. All the fonts, designs are kept the s
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### Step 3. Javascript Building Blocks
|
|
|
|
|
Every website typically ties in both HTML and CSS with a bit of
|
|
|
|
|
Every website typically ties in both HTML and CSS with a bit of javascript for some additional **flare**.
|
|
|
|
|
|
|
|
|
|
Start by typing this line in your program
|
|
|
|
|
```html
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
For example:
|
|
|
|
|
https://codepen.io/sadness97/pen/KKobMWx
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 2. Next is the Header!
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
</html>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 3. Next is the Body!
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<title> This is the tile of my site!
|
|
|
|
|
</title>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
& This is where the text of a website goes
|
|
|
|
|
|
|
|
|
|
<img src= " .jpg">
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Save this file as hello.html file
|
|
|
|
|
|
|
|
|
|
& drag it to your browser window.
|
|
|
|
|
Ta-da!! You have just launched your web design...but there's only text in it
|
|
|
|
|
## We will get around to Javascript in the next class.
|
|
|
|
|
For now, keep working in CSS inside of neocities.org!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Give it Pizzazz
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Change the background color in the `body` tag.
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<body style="background-color:powderblue;">
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Change the size of the text with the `h` tags & `p` tags
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
<h1>This is a heading</h1>
|
|
|
|
|
<p>This is a paragraph.</p>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Add an image from the internet with:
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
<img src= "imagehere.jpg"
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Make sure that it is a .jpg or a .png file !
|
|
|
|
|
|
|
|
|
|
|
Shwetha Jayaraj