### Week 7: Coding with EXTRA! Javascript & CSS in websites --- 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**! --- ### Building Blocks of a Website ![[imgFiles/Pasted image 20231010141612.png]] - HTML - the content and "bones" of a website - CSS - the decorations, here we can add fancy decorations - Javascript - animations can be added here, game-making, scripting, etc.. --- # Group Projects time for 25 minutes Let me know if you'd like help with your website. --- ## Step 1. Let's go to [neocities.org ](https://neocities.org/) ![[Pasted image 20231101131959.png]] You'll see a lot of interesting website examples here. --- ## Step 2. CSS Building blocks Making the structure There are 3 parts that tie into basic HTML structure. Think of these as the “building blocks” of a web page: 1. HTML version declaration 2. Heading(s) 3. Body Let's start with #1. --- ### 1. HTML version declaration Every website starts with this line of code for HTML Start by typing this line in your program ```html ``` --- ### 2. Next is the Header! ``` ``` --- ### 3. Next is the Body! ``` This is the tile of my site! & This is where the text of a website goes

``` --- ## 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 --- ## Give it Pizzazz Change the background color in the `body` tag. ``` ``` Change the size of the text with the `h` tags & `p` tags ```

This is a heading

This is a paragraph.

``` Add an image from the internet with: ```