Scribd Logo
Upload

Welcome to Scribd!

  • 116 views

    HTML CSS Project

    Uploaded by

    Kranthi Varma
    You have been given $50,000 to start a new business creating websites. You will create the homepage for your new business' website using HTML and CSS. You are instructed to build the webpage using Dabblet, including headings, paragraphs, images, links, lists, tables, and embedding code. Styles like background colors, positioning, and fonts are to be set using CSS classes and IDs. Attribution must be given for any non-original images used on the site.

    Copyright:

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

    HTML CSS Project

    Uploaded by

    Kranthi Varma
    116 views3 pages
    You have been given $50,000 to start a new business creating websites. You will create the homepage for your new business' website using HTML and CSS. You are instructed to build the webpage using Dabblet, including headings, paragraphs, images, links, lists, tables, and embedding code. Styles like background colors, positioning, and fonts are to be set using CSS classes and IDs. Attribution must be given for any non-original images used on the site.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    You have been given $50,000 to start a new business creating websites. You will create the homepage for your new business' website using HTML and CSS. You are instructed to build the webpage using Dabblet, including headings, paragraphs, images, links, lists, tables, and embedding code. Styles like background colors, positioning, and fonts are to be set using CSS classes and IDs. Attribution must be given for any non-original images used on the site.

    Copyright:

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

    HTML CSS Project

    Uploaded by

    Kranthi Varma
    You have been given $50,000 to start a new business creating websites. You will create the homepage for your new business' website using HTML and CSS. You are instructed to build the webpage using Dabblet, including headings, paragraphs, images, links, lists, tables, and embedding code. Styles like background colors, positioning, and fonts are to be set using CSS classes and IDs. Attribution must be given for any non-original images used on the site.

    Copyright:

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

    HTML/CSS Project

    Task: You have been given $50,000 to start a new business. Since you know how to create
    webpages coding in HTML and stylizing those webpages with CSS, you will create your new
    business’ website homepage.

    Create: HTML & CSS sheet in Dabblet (create an account) - http://dabblet.com/

    Directions:

    1. CSS -----Format & Design CSS Required Elements Properties


    your Page with CSS Styles background-color, height, width, position,
    #header
    on your CSS file: Write margin,
    your CSS sheet in the background-color, height, width, position,
    #footer
    CSS & Result tab (click margin,
    on the All tab to see all .left font-family, color, margins
    .right font-family, color, margins
    tabs).
    p font-family, color
    H1, H2 font-family, color
    img font-family, color
    a:hover font-weight, color
    div border-radius,
    li list-style-type
    border, cell padding, height, width, padding,
    table
    text-align
    2. CSS -----Additional CSS Styles Required somewhere in your CSS sheet:
    a. Place an image behind a line of text (header would be great for this!) using
    z-index property (for help, go here!)
    b. Use float propery to align text in header or footer (for help, go here!)
    c. Use clear property (for help, go here!)
    d. Use position property (for help, go here!)
    e. Use at least two hexadecimal color codes (for codes, go here)
    3. HTML ---- Enter headings, paragraphs, content, links (need both contextual and image), list,
    table, widget (embedding code) and pictures (three regular images and one hot spot picture)
    to your webpage: Write your HTML code in the HTML& Result tab. (click on the All tab
    to see all tabs).
    a. Remember to include:
    i. DOCTYPE
    ii. <html>
    iii. <head>
    iv. <title>
    v. <body>
    vi. <p>
    vii. <H1>
    viii. <H2>
    ix. <img
    x. <a href
    xi. <ol> or <ul>
    xii. <li>
    xiii. <div>
    xiv. <table> - minimum 3x3 size
    xv. <span>
    xvi. style to assign at least one style

    4. Stylize: Assign your CSS class and CSS Id (on the CSS file) to HTML elements (on the .html file).

    A. Assign your CSS classes (.left and .right) to HTML element


    B. Assign your CSS IDs (#header and #footer) to HTML element

    5. Attribution: Give credit where credit is due for all pictures that are not your pictures
    on your webpage. Make sure they have the Creative Commons license to use it on
    your webpage.

    Attribution for all pictures at bottom of webpage –

    Example: coffee mug image BY DeaPeaJay found at


    http://www.flickr.com/photos/deapeajay/2569795007/sizes/q/
    Great HTML & CSS Resources:

     Codeacademy
     W3schools
     PageResource HTML Tutorials

    Content Helpers for Hobby/Pasttime:

    What is it? | How do you do it? | Where do you do it? | What do you need? | Why is it your favorite hobby?|
    When did you begin? | What is the monetary investment | Who does it with you?| What is your experience? |
    Have you won awards for your hobby? | What are some good websites about your hobby? | What are some good
    images about your hobby? |

    For public domain pictures and clipart:

     Flickr advanced search – remember to scroll down and check Only search within Creative Commons-
    licensed content; remember to add attribution for picture(s) at the bottom of your webpage!

    Example: coffee mug image BY DeaPeaJay found at


    http://www.flickr.com/photos/deapeajay/2569795007/sizes/q/

     OpenClipArt – clipart here is public domain; remember to add attribution for picture(s) at the
    bottom of your webpage!

    Applause for HTML/CSS/JS online playgrounds!

    http://www.awwwards.com/10-html-css-online-code-editors-for-web-
    developers.html

    http://designshack.net/articles/css/5-online-playgrounds-for-html-css-and-
    javascript-compared/

    You might also like