Scribd Logo
Upload

Welcome to Scribd!

  • 125 views

    7 Web Design

    Uploaded by

    Bladdesuri
    This document provides an overview of web design basics including HTML, CSS, and design principles. It discusses the key components of a webpage like HTML, CSS, JavaScript, images and how they work together. It covers HTML structure and tags for text formatting, images, links and lists. It also covers CSS syntax, properties, selectors and the box model. The document emphasizes sketching a design before coding and providing context and navigation to enhance usability.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    7 Web Design

    Uploaded by

    Bladdesuri
    125 views39 pages
    This document provides an overview of web design basics including HTML, CSS, and design principles. It discusses the key components of a webpage like HTML, CSS, JavaScript, images and how they work together. It covers HTML structure and tags for text formatting, images, links and lists. It also covers CSS syntax, properties, selectors and the box model. The document emphasizes sketching a design before coding and providing context and navigation to enhance usability.

    Original Description:

    looolo

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides an overview of web design basics including HTML, CSS, and design principles. It discusses the key components of a webpage like HTML, CSS, JavaScript, images and how they work together. It covers HTML structure and tags for text formatting, images, links and lists. It also covers CSS syntax, properties, selectors and the box model. The document emphasizes sketching a design before coding and providing context and navigation to enhance usability.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    125 views39 pages

    7 Web Design

    Uploaded by

    Bladdesuri
    This document provides an overview of web design basics including HTML, CSS, and design principles. It discusses the key components of a webpage like HTML, CSS, JavaScript, images and how they work together. It covers HTML structure and tags for text formatting, images, links and lists. It also covers CSS syntax, properties, selectors and the box model. The document emphasizes sketching a design before coding and providing context and navigation to enhance usability.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 39

    < web

    design 101 >


    < web design 101 >


    have you installed?!


    a text editor!
    Cyberduck (or another FTP client)!
    a web inspector for your browser!

    details on web.mit.edu/2.744/www!

    whats in a webpage?!

    whats in a webpage?!
    index.html!
    6 images!
    date.js!
    ga.js!
    6778.js!

    style3941.css!

    whats in a webpage?!
    hypertext markup language!
    contains text and links to other pages!

    cascading style sheets!


    defines the look and feel of your site!

    javascript!
    adds interactivity to your site!

    design guidelines!

    enhancing usability and readability!

    sketch then code!

    sketch then code!

    some content may be below the fold!

    sketch then code!

    add navigation arrows!

    design for
    the screen!

    1997!

    today!

    design for
    the screen!
    responsive design!

    80%!

    20%!

    http://www.nngroup.com/articles/scrolling-and-attention/!

    design for
    the screen!

    provide context!
    tell the user where he/she is!

    dont reinvent the wheel!


    modify existing layouts and templates!

    getbootstrap.com!

    foundation.zurb.com!

    verynicesites.com!

    organize content
    systematically!

    12 column grid!

    why 12!?!

    1! =! lcd! 1! 1! 1! 1! 1!
    (!
    )!
    1! 2! 3! 4! 6!
    12!
    can achieve many different layouts!

    HTML basics!

    HTML structure!
    <lunch>
    <hamburger>
    <bun></bun>
    <lettuce></lettuce>
    <tomato></tomato>
    <cheese></cheese>
    <patty></patty>
    <bun></bun>
    </hamburger>
    </lunch>

    HTML structure!
    <!DOCTYPE html>
    <html>
    <head>
    <title>My First Page</title>
    </head>
    <body>
    <p>Hello World!</p>
    </body>
    </html>

    HTML tags!
    tag structure!
    open tag
    close tag

    attribute(s)

    <tag attr=value>
    content
    </tag>

    HTML tags!
    tag structure!

    <patty cooked=med>
    yum.
    </patty>

    HTML tags!
    typography!
    <p>
    - paragraph!
    <h1><h6>
    - headings!
    <a>
    - link / anchor!
    <ul>,<ol>,<li>
    - lists!
    <table>,<tr>,<td>
    - tables!
    <img/>,<video>
    - images, videos!
    view all the tags at: http://www.w3schools.com/tags/!

    HTML tags!
    text formatting!
    <b>,<strong>
    - bold!
    <i>,<em>
    - italics!
    <sup>,<sub>
    - super/subscript!

    view all the tags at: http://www.w3schools.com/tags/!

    HTML tags!
    organization!
    <div>
    - container!
    <section>
    - section!
    <article>
    - article!
    <br/>
    - line break!
    <hr/>
    - horizontal rule!

    view all the tags at: http://www.w3schools.com/tags/!

    adding style!

    CSS basics!
    inline styling!
    <p style=font-size:14px;></p>

    pros!

    cons!

    highly specific!

    highly specific!
    hard to maintain!
    HTML/CSS coupled!

    CSS basics!
    block styling!
    <style>
    p { font-size: 14px; }
    </style>

    pros!

    cons!

    affects all matched elements!

    HTML/CSS coupled!
    !

    CSS basics!
    separate file!
    p {
    font-size: 14px;
    }

    pros!

    cons!

    write once for whole site

    harder to control!

    HTML & CSS decoupled!

    CSS basics!
    rule syntax!
    selector {
    property: value;
    property: value;

    }

    CSS basics!
    properties!
    Typography!
    font-size
    font-weight
    font-family
    line-height
    text-align

    view all!

    Colors!
    color
    background-color

    background-image

    line-height
    text-align

    Positioning!
    position
    width,height
    margin
    padding
    border

    http://htmldog.com/reference/cssproperties/!
    http://www.w3schools.com/cssref/!

    CSS basics!
    selectors!
    HTML element!
    <p>

    <p class=bp>

    <p id=headline>

    CSS rule!
    p {
    font-size: 14px;
    }
    .bp {
    color: gray;
    }
    #headline {
    font-size:20px;
    }

    CSS basics!
    cascading selectors!
    HTML element!
    <div class=intro>
    <h1></h1>
    </div>

    CSS rule!
    .intro h1 {
    font-size:18px;
    }

    style h1 inside every element with class=intro


    CSS basics!
    box model!

    references!

    http://htmldog.com/reference/cssproperties/!
    http://www.w3schools.com/cssref/!

    CSS Zen Garden!


    csszengarden.com!

    CSS Zen Garden!


    csszengarden.com!

    2.744 Zen Garden!

    whats next?
    for
    ! class Thursday, February 27!

    no official class!

    tutorial: building your storyboard site?!

    2.744 Product Design!

    You might also like