### 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 code in 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.. --- ## Step 1. Go to your favorite website Believe it or not this is all we need to actually start coding (who needs Github anyways) --- ## Step 2. HTML 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: ```