2.4 KiB

Raw Blame History

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

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

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

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

2.4 KiB Raw Blame History