shway
/
Notepad
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated: Wednesday, November 01,2023-11-01 13:34:29

main
Shwetha Jayaraj 2023-11-01 13:34:30 -04:00
parent 35296ce81a
commit d74c7c85b4
2 changed files with 15 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
enter/.obsidian/plugins/obsidian-emoji-toolbar/data.json 100644
View File

@ -0,0 +1,3 @@
{
"twitterEmojiActive": true
}

104
enter/Week 7 Slides.md
View File

@ -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** - what real programmers use to upload their code for others to collaborate. Using **Github.com**
- **HTML** basics to make a website - **HTML** basics to make a website
- the tools we can use to edit HTML code in - the tools we can use to edit HTML code in
- https://html.onlineviewer.net/ - 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/) ## 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]] ![[Pasted image 20231101131959.png]]
You'll see a lot of interesting website examples here. You'll see a lot of interesting website examples here.
@ -65,101 +72,14 @@ Every website typically ties in both HTML and CSS with a bit of javascript for
For example: For example:
https://codepen.io/sadness97/pen/KKobMWx https://codepen.io/sadness97/pen/KKobMWx
Start by typing this line in your program
```html
<!DOCTYPE html>
<html>
</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>
```
--- ---
## We will get around to Javascript in the next class.
## Save this file as hello.html file For now, keep working in CSS inside of neocities.org!
& drag it to your browser window.
Ta-da!! You have just launched your web design...but there's only text in it
--- ---
## 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 !