Digital Design

Final projects

Day Overview

 
  • Design principles 
  • Team HTML/CSS Challenge
    • Awesome prize for winning team
  • Final project 
    • Description
    • Guidelines
    • Begin brainstorming

Bad design

 

Good Design

 

HTML/CSS Review

 
  • Wrappers/containers
    • Right after your body tag, you should have a content wrapper/container
    • Wrappers "wrap" all your content in your website into a giant block
    • For every block/section of your website you should have a wrapper/container around it
  • Divs vs Ids
    • ex. "<div class = "row" id = "welcome">
    • Classes are meant to be used several times; several objects can be of the same class 
    • id's are unique to that section

More on wrappers

 

More on wrappers

 
 
<!DOCTYPE html>
<html>
	<head>
		<link rel = "stylesheet" href="css/styles.css">
		<link rel="icon" href="assets/devleagueemblem_360.png">

		<title>Stock Website</title>
	</head>
	<body>
		<div id = "container">
			<header>
                        </header>
                        <div id = "welcome" class = "row">
                            Stuff here 
                        </div>
                        <div id = "offers" class = "row">
                            Stuff here 
                        </div>
                        <div id = "location" class = "row">
                            Stuff here  
                        </div>
                        <footer id = "footer">
                        </footer>
                </div>
        </body>
</html>

Margins and Padding

 
  • Padding is the space between the content and the border
  •  Whereas, margin is the space outside the border.

Margins

 
 
p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}

/*or you could put all 4 on the same line; the order is the same*/

p {
    margin: 100px 150px 100px 80px;
}

The distance from the edge of the slide to the green border is the margin, whereas the distance from the text to the green border is the padding.

Padding

 
  • Same syntax as margin 
p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

p {
    padding: 50px 30px 50px 80px;
}

Images & Display types

 
  • MUST have src and alt tag

  • <img src="smiley.gif" alt="Smiley face" height="42" width="42">

    ​
  • There are three different ways elements can be displayed on the page in CSS
    • Block 
    • Inline-block
    • Inline

 

 

Display types

 
  • Block
    • Displays the contents as a giant blocks, cannot other elements to the left or right
    • Blocks are displayed on top of one another
  • Inline
    • Displays the contents right next to each other (left and right of each other) on a line 
    • Inline elements take up minimal height and width and are just placed next to one another 
  • Inline-block
    • Like block, but the blocks can be next to each other 

 

 

Display types

 

Display types

 

CSS Syntax:

 

.classname {
    display: inline-block;
}

This is why we use classes. We can select all the divs/sections, and have them displayed as cool, convenient blocks. Combine a display: inline-block with a margin, and you get a very clean layout. 

Display types

 

Team HTML/CSS Exercise

 
  • 4 randomly picked teams of 4
  • First team to finish the code AND have one random member of the team explain the code to us wins
  • You must have:
    • At least two wrappers/containers: one for the entire page, the other for block of content 
    • A nice color scheme
    • Margins and padding 
    • Change the text and size of the h1 tag
  • There will be an awesome prize; trust me, you want to win this one 

Team HTML/CSS Exercise

 

Use filler text in each section to show the margins/padding. 

Quick review of rules...

 
  • Everyone gets respect
  • No playing with the chairs of any kind
  • No horseplay
  • No phones/other devices except for approved activites
  • No eating after 9pm except for during the break
  • Focus on your task; no Googling irrelevant things
  • Breaking the rules will result in a visit to Punahou administration and your parents will be notified

Final project

 
  • For your Final Projects, you will create websites for some sort of business
    • You come up with the business 
    • Be creative!
      • Obviously, remember that your parents will be here so it must be school-appropriate
    • Write down in detail what your product/service will
    • Make a list of the pages on your website you will have
    • Write all of this down 
    • PUT ALL OF THIS IN A TEXT DOCUMENT/FILE FOR REFERENCE
  • AFTER EVERYONE IS DONE, you will present to the class, and get feedback from instructors and peers

 

  • Make a new folder for your final project. Create your css and assets folders, and index.html inside the final project folder
  • Find some good images for your website.
  • Save them to your assets
    • SAVE ORIGINAL URL LINKS TO YOUR IMAGES AS WELL IN A TEXT DOCUMENT
    • Rename the photos that you have downloaded
    • Perhaps using some of the images you've found, come up with a color palette for your website:
      • colourlovers.com 
      • Sign up 
      • Tools > PHOTOCOPA or COPASO
        • For PHOTOCOPA, you will need the urls 
  • On PAPER, sketch out the site layout of the home page. Show the locations of the elements, and have the instructors approve it before starting your project

Getting started

 

 

  • In your DigitalDesign folder, create a new folder for your final project
  • Get started! 
Made with Slides.com