Html css website overview
This presentation is the property of its rightful owner.
Sponsored Links
1 / 10

HTML/CSS Website Overview PowerPoint PPT Presentation


  • 66 Views
  • Uploaded on
  • Presentation posted in: General

HTML/CSS Website Overview. Dr. Lam. Typical Process. Learn HTML/CSS Complete information architecture Write, gather, edit content Create wireframe and/or design mock-up Build HTML/CSS site. Information Architecture. Description: Creating a “blueprint” for your website

Download Presentation

HTML/CSS Website Overview

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html css website overview

HTML/CSS Website Overview

Dr. Lam


Typical process

Typical Process

  • Learn HTML/CSS

  • Complete information architecture

    • Write, gather, edit content

  • Create wireframe and/or design mock-up

  • Build HTML/CSS site


Information architecture

Information Architecture

  • Description: Creating a “blueprint” for your website

  • Outcome: You’ll know how many pages your site will have. You’ll also know what you’ll include on each page and how a user will navigate from one page to another. Usually web designers will create site maps at this stage.

  • What you should be working on NOW: Once you’ve made these decisions, you should begin writing and gathering your content. Content can be written in HTML, simple text documents, or Word documents.


Site map example

Site Map Example


Create wireframe required

Create Wireframe (Required)

  • Description: A wireframe is a blueprint for a single page of your site (usually home page). It signals where each major element will go.

  • Outcome: You’ll know exactly what elements your page will consist of and where those elements will go.

  • What you should be working on NOW: Look at layouts that you are drawn to or impress you. Start hand drawing your wireframes. In lab, you’ll learn to create a wireframe in Photoshop.


Wireframe example

Wireframe Example


Create mock up optional

Create Mock-up (Optional)

  • Description: A mock-up is what one page on your actual website will look like.

  • Outcome: You’ll know exactly what all of your elements will look like (e.g., colors, fonts, spacing, etc.). This is usually done in photoshop or some other graphic design software.

  • What you should be working on NOW: Nothing/


Mock up example

Mock-up Example


Suggested deadlines

Suggested Deadlines

  • All final deliverables are due when the final project is due. However, to stay on track, I suggest the following deadlines for yourselves.

  • Wednesday, February 19- Two Personas

  • Monday, February 24- Wireframe

  • Wednesday, February 26- Draft of written copy


Other considerations regarding the project

Other Considerations Regarding the Project

  • Approximately 15% of your final project grade will be based on valid HTML5 and CSS

  • Valid HTML/CSS occurs when you follow the syntactic rules of each language (e.g., every tag that opens must close, tags close in opposite direction they open, images have alt tags, etc.)

  • Therefore, regularly test your HTML and CSS using the following sites:

  • http://validator.w3.org

  • http://jigsaw.w3.org/css-validator/


  • Login