Day by Day Class Overview

Site Domain and Hosting:

You must purchase your domain name and get hosting by next week.

Choosing and Registering a Domain Name

• http://www.siteinspire.com/
• http://fltdsgn.com/
• http://www.qbn.com/
• http://bestwebgallery.com/
• http://www.minimalsites.com/
• http://www.verynicesites.com/

Class 2 : 9.15.14

We will go over:

What is HTML? Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.

HTML tags. Please download these files, print them, and have them on you for reference:

ct_web1_htmltags1_01

ct_web1_css1_01

wire frames-flowchart_web1

Intro to Dreamweaver.

File Path. Organization of Folders, etc.

File Paths and Directory Structure

On larger websites, it’s a good idea to organize your code by placing the pages for each section of the site into a new folder. Folders on a website are sometimes called directories.

The top level folder is known as the root folder. The root folder contains all of the other files and folders of a website. Each section of the site is placed in a separate folder; this helps organize the files.

The main homepage of a site written in HTML (and the homepages of each section in a child folder) is calledindex.html. Web servers are usually set up to look for the index.html file f no other file name s specified. That means that you need to always name your home page index.html in the root folder. The root folder contains:

• A file called index.html which is the homepage for the entire site
• Individual folders for each section of the site. these are called sub-directories.

Each sub-directory contains:

Homework

Create a placeholder page for your upcoming website. Save it on your Flash drive, which will serve as your ” server” for now.

Class 3 : 9.22.14

I hope our computers are fixed and we have access to Kionic.

We will go over:

• Go over our domains, Lets discuss your ideas.
• HTML: more tags
• CSS: an introduction
• Writing our first CSS
• Adding links
• Sitemaps and wireframes: information architecture

http://www.dontfeartheinternet.com/ http://www.dontfeartheinternet.com/html/html http://www.dontfeartheinternet.com/css/don%E2%80%99t-fear-web-typography

Handy HTML Tags:

• a – “anchor” used for hyperlinks
• blockquote – for large quotes
• body – visible part of your site
• br – line break
• cite – a citation
• div – content divider
• DOCTYPE – document type
• em – text w/ emphasis
• h1 – most important header
• h2 – 2nd most important
• h3-h6 – 3-6th most important
• head – invisible part of your site
• html – “what follows is HTML”
• img – image
• li – list item
• link – to attach CSS stylesheets
• ol – ordered list
• p – paragraph
• span – inline content divider
• strong – strong text emphasis
• style – for inline CSS styling
• title – title of the page
• ul – unordered list

Please download this: wire frames-flowchart_web1

Homework:

• Sitemap of your site: please make this in Illustrator or InDesign. Safe as JPG or GIF, As to your rough site.
• Wire frames of your site: please make this in Illustrator or InDesign. Safe as JPG or GIF, As to your rough site.
• Create a Resume in HTML plus basic CSS, link to your rough site.
• Update all the 4 pages of your working site with proper headers, text.
• Use the internet to help yourself! Go to HTML Dog, start coding on your own!

Class 4: 9.29.14

This is what we go over last class:
http://www.dontfeartheinternet.com/html/don’t-fear-starting-from-scratch

This is what we ll be going over this class:
http://www.dontfeartheinternet.com/css/don’t-fear-starting-from-scratch-2

Typography with CSS:
http://www.dontfeartheinternet.com/css/don’t-fear-web-typography

• Uploading Your webs page to the server
• Color on the web
• Review sitemaps and wire frames

• Optimizing Images: jpegs, gifs, and pngs
  • Resource: Subtle Patterns

Homework

• Continue adding content to your site in terms of text, refine your IA
• Study for next week’s quiz
  • Filepaths
  • Links
  • Adding images
  • Basic CSS

It’s a good idea to read up on the cascade and understand the precedence assigned to various selectors:http://www.w3.org/TR/CSS2/cascade.html

Class 5 : 10.6.14

Quiz 1.

Upload your files to your URL. I would like all your URLs listed here next week.

Get to know more about CSS.
CSS Beginner Tutorial
http://css3generator.com/

WE will get to work with IDs and Classes in CSS:
http://www.dontfeartheinternet.com/css/dont-fear-specificity

• CSS in depth
  • The Box Model
  • Classes and IDs
  • Positioning (Introduction to floats)

Homework

• Pencil sketches of your proposed look and feel
• Continue adding content to your site in terms of text, refine your IA

• 5-page website ( Your Personal info) should have:
• Real content. Real images.
• <Div> on each page. ID for your DIV in Css Document
• 5 Classes, in CSS, applied in your HTML document.
• Working Navigation
• Wireframe, Flowchart
• Resume, Designed with CSS, at least 4 CSS rules written for this
• Sketch your homepage. Scan it, plug it into your site
• Website Statement
• Images of your work, at least 4.
• CSS attached to each HTML page

Fun stuff
http://www.menucool.com/slider/javascript-image-slider-demo1

Class 6 : 10.13.14

Holiday. No class.

Class 7 : 10.20.14

Classwork

Quiz Review. FTP Troubleshooting.
More Classes and IDs, padding, margins, alignment.

• What exactly is possible?
  • CSS Beginner Tutorial  |  CSS3 Generator

• Photoshop files for web design: basics and etiquette
  • File size
  • Layers and folders
  • Color space
  • Resolution
  • Grids

Please either upload your 5-page website to your URL, and let me know what your url is, or, if not possible, ZIP that website and email it to me. 

Formal syntax: left | right | none

float: left
float: right
float: none

float: inherit