Notepad/enter/Week 7 Slides.md

2.3 KiB

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

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

!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

<!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>

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.

<!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 !