Web Design

HTML

CSS

Javascript

Data

  • Go to mozilla.thimble.org

  • Create a new account

  • Verify your account

  • Start a new project

Setting Up Thimble

  • HTML: The structure. HTML directs which elements on a page go where. Aka, this box about that box, this title to the left of this picture.

  • CSS: The design of a page. CSS controls colors, typography, spacing, and dimensions.

  • JavaScript: The action on a page. Javascript can make things happen when elements are clicked, updated, hovered over, dragged, dropped, etc.

  • Data: Data is the information on a page. This usually comes from a database, either one your own or from what's called an API.

How Web Apps Work

Delete lines 11 and 13 and type "hello world"

This is actually a website

Websites and web apps are just files. ​They sit on a computer. 

 

If we want our website to be accessed from the Internet we put it on a computer connected to the Internet called a Server.

 

A Browser gets a file (usually through that files address, or url) and then reads it.

Options

Let's start with some HTML. This will give us some control over structure, and even a little bit about how things look. 

<tag_name> What goes in the tag </tag_name>

    <body>
        <h1>This is a page heading</h1>
        <h2>This is a sub heading</h2>
        <p>This is normal text for a website</p>
        <p>You can have the same tag type multiple times</p>
    </body>

Challenge

The logical next question, obviously... how do I make it look better!

CSS

CSS is actually a different language, so we are going to write it in a different file.

 

All CSS will be written in the style.css file. You can see the content from that file is linked to our index in line 7 of the index.

   body{
       background-color: yellow;
   }

   h1{
       font-size: 30px;
   }

   p{
       color: red;
   }

Challenge

Change the colors, background colors, and sizes of your Heading, Name, and Description.

Then, go to color.adobe.com

 

The HEX value, with a # in front of it, can replace the color words.

background-color: #FFF6C5;

Challenge

Most any style you want, you can accomplish with enough CSS. Instead of memorizing all the different properties, just google search the property you want, and the word CSS.

With CSS:

 

Make all your text aligned to the center

 

Make your name underlined

Pictures

A picture is actually a different file. You can't just link to a file on your computer, because it won't be accessible on the Internet.

 

  • Go to google
  • Find a picture you want to put in your website
  • Right click and select copy image url

Pictures

The tag is img

 

but before you close the opening tag, you are going to add an attribute, which a way to add information to a tag.

 

src (source) and set it equal to the url you copied. (always put attribute values in quotes)

<img src='http://scienceservinghumanity.us/wp-content/gallery/sidebar01/asimo-walk.jpg'/>

Fonts

Many developers now get their fonts from google fonts

Go to fonts.google.com

 

Add the fonts you want

 

Paste the link in the head section of your index

 

font-family go into the CSS

 

<link href="https://fonts.googleapis.
com/css?family=Coiny|Roboto" rel="stylesheet">

A Sort-Of Quick Overview

  • Start out with a title at the top of your site.
  • Then add the logo for your school underneath the title.
  • Then add the grade level as a subtitle under the picture.
  • Add a paragraph with at least 2 - 3 sentences explaining what the website is for.
  • Pick a great font.
  • Make sure your body and text have a nice color scheme.

Shout Out Board

Where are the shout-outs?

What will it look like to have different shout outs? What are some existing sites we could model after? What constraints / limitations should we be thinking about?

Challenges

Make 4 different shout outs that could have been submitted by someone. You only need to use paragraph tags here.

Classes

A class is an attribute that puts elements in groups.

Add the class shout_out to the shoutouts and teacher_name for the teachers name

  <p class='shout_out'>
    Shout out to Tamia for her Grit during guided practice, that 1G for pushing 
    through frustration. 
  </p>
  <p class='teacher_name'>
    Ms. Moynihan
  </p>

Classes

Now in CSS we can reference a group.


    .shout_out{
        color: pink;
    }

    .teacher_name{
        background-color: yellow;
    }

Iframe

The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.

 

Other documents you could embed:

  • Websites
  • Videos
  • Audio

 

Embed code can typically be accessed on the site you are getting the video or audio clip from.

 

Add a youtube video to your thimble project.

Margin and Padding

Margin and Padding

margin: 2px 5px 8px 4px;

Challenges

  • Add a margin to the title of your website
  • Add padding to all teacher responses
  • Add a border to one section of your site

Refine

Make your shout outs look better.

 

Inspiration: 

http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

 

http://www.w3schools.com/css/css_border.asp

intro to HTML/CSS Deck

By Michael Burgevin

Made with Slides.com

intro to HTML/CSS Deck

  • 1,040

More from Michael Burgevin