### 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**! --- # Group Projects time for 25 minutes Let me know if you'd like help with your website. --- ### 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.. --- ## 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 CSS stands for *Cascading Style Sheets*. CSS files are for creating **rules** for the standard designs of every webpage on your website. Think of a page like youtube or instagram. All the fonts, designs are kept the same on each part of the site. This is what CSS helps do! It gives decorative **rules** for the developer to choose from. --- ### Step 3. Javascript Building Blocks Every website typically ties in both HTML and CSS with a bit of 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: ```