edu.phlume.com
splash splash

Web Design

Web Design

Web Development image
Web Development image
Web Development image

Updated: 4/29/17

Guidelines adjusted and updated for 2016-2017. A digital version of these rules and guidelines are available HERE

Web Design Syllabus - Download HERE

May 1st Update...

Class work for this week
After you have finished with your css assignment, and uploaded the completed .css file using this form, I would like you to go through and work through the beginning tutorials on this page: CSS Beginner. Once you have completed these tutorials you can work your way through this interactive tutorial/game and learn about the box model and the flex-box layout property: Flex Froggy Tutorial.

Welcome

...to Web Design. I am really excited about this class as I have a love of code and programming. I enjoy the logic and thinking involved with solving complex issues surrounding web programming and I can safely navigate through HTML, CSS, PHP, JavaScript and ActionScript; Adobe's Flash programming language. I hope to share this love of code with you and teach you how to enjoy working with it.

In this class we will run through the fundamentals of HTML, CSS, and some JavaScript. We will discuss browser differences, debugging, general mark-up as well as some basic do's and don't's when it comes to web design. You will work with the book "Learning Web Design" and be expected to go through it at our pace completing the reading, exercise reviews, and any assignments I hand out. This is a high-functioning and fast paced course with a lot of opportunity to learn some pretty cool tricks for web design. I will walk you through the process and in no time you should be up and running at developing your own web pages and full web sites.

As we discussed breifly in class, you should look to download DroidEdit (free) onto your chromebook. This will allow you to use syntax highlighting and editing on your chrome device. It will not save directly to google drive though so you will have to save it locally, or onto a thumb drive, and then manually upload the file to drive for use off of your chromebook.

Projected Outline

Below is a draft outline of the chapters within the book. If all goes as planned, we should be able to work through each of the chapters at a steady pace to complete the book before the semester ends. However, this is merely a guide and may change as needed. Topics may be touched on in different weeks, or reiterated again in other weeks. I may elect to introduce a topic early so it can be used, but go into further detail as needed in a later week. As web development is very intertwined there is no real "straight path" to learn it all. But this outline is a great start.

  • Chapter 1 - Where to start: Weeks 1 & 2
  • Chapter 2 - How it works: Weeks 1 & 2
  • Chapter 3 - Big concepts: Weeks 1 & 2
  • Chapter 4 - Simple HTML: Week 3 & 4
  • Chapter 5 - Marking up: Week 5, 6 & 7
  • Chapter 6 - Adding links: Week 5, 6 & 7
  • Chapter 7 - Adding images: Week 5, 6 & 7
  • Chapter 8 - Table markup: Week 8 - 9
  • Chapter 9 - Forms: Week 9 - 10 (end of Q3)
  •  
  • Chapter 11 - CSS: Week 11
  • Chapter 12 - Formatting text: Week 12
  • Chapter 13 - Colors / backgrounds: Week 12
  • Chapter 14 - Box model: Week 13
  • Chapter 15 - Float/position: Week 13
  • Chapter 16 - CSS page layout: Week 14
  • Chapter 17 - Transition/ animation: Week 14
  • Chapter 18 - CSS techniques: Week 15
  • Chapter 19 - Intro to js: Week 16
  • Chapter 20 - Using js: Week 17

Styleguide

As we move into using CSS more and more I want to share with you this styleguide for formatting and organizing CSS documents. This is based off of the model that I developed for my previous employer. It outlines a whole list of do's and don't for stylizing a css document for both readability, and multi-user editing.

For this class, you will be required to format your css document as follows:
  • All properties and their attributes should be alphabetized within a declaration
  • Proper spacing should be given with a declaration around the properties
  • Tab formatting and return spacing should add white space around each declaration and their properties
  • Comments should be added to each declaration to identify their use

/* Blue Heading. */ 
h2 { color: #000099; }
	
/* Bold, Red Heading. */ 
h4 {
	color: #990000; 
	font-weight: bold;	
	margin: 0 auto;	
	}

Assignments

In this class we will have code writing projects, reading assignments, and review quizzes. There will be a final exam in June as well as a Final project. All of the assignments will be placed here digitally with a due date and a summary. There will also be a link to a digital file whenever possible for any handout I will provide as a guide. If you ever have a question as to what is due; come here.


Projects

Project 4 - Links

Due date:
March 15th, 2017

Project 4 Create a web site with a series of links to the various folders within a directory. Extedned use of the anchor link (a href) will be used, along with directory navigation (../). An example of this from class on Wednesday is located HERE.


Project 5 - Tables

Due date:
March 22nd, 2017

Project 5Use Chapter 8 and complete projects 8-1, 8-2, and 8-3 on a single web page. Make sure to include the minimum required elements, all content from the book, as well as the new "link" tag to an external stylesheet as described in the worksheet. You can also complete 8-4 if you want to try something harder.


Project 6 - Forms

Due date:
April 14th, 2017

Project 6Use Chapter 9 and complete projects 9-1, 9-2, 9-3, and 9-4 on a single web page. The book provides you with a resource to help you get started. All of the coe is in the back of the book in thee appendix should you need a safety net. Please do your best to work through it without just copying and pasting for the provided code in the book, or on the web site.


Project 7 - CSS Exploration

Due date:
April 21st, 2017

Project 7Using the html page located here, and the css file located here, stylize the page to your liking. Make sure every selector in the css file has at least one property. Feel free to explore the web and look for different properties to use. A few sites to look into for css examples can be located here and here.

NOTE: When you are finished with your css file, save it with your first initial and last name (cfillion.css) and upload it using this page. You will be able to see the different examples that everyone has uploaded with this form.


Project 8 - CSS Positioning

Due date:
May 10th, 2017

new icon - Project 8Using the images in this directory and CSS positioning, create a zodiac wheel with either the Western zodiac symbols or the Eastern zodiac symbols.


IN CLASS WORK

Copy and paste this into a new document, and then save it as "myForm.html" in a folder named "forms" within your web-2017 folder on your desktop:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Form 1</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<h1></h1>
		<form >
		<table>
			<tr>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="2" ></td>
			</tr>
		</table>
		</form>
	</body>
</html>

The code above is a shell for a new form with a table structure inside of it. Also, copy this following code to a new document for a stylesheet named "style.css"...


table {
	border: solid 2px #999;
	padding:15px;
	}
	
th {border: solid 1px #336;}

.button {
	background: #99c;
	color: #fff;
	font-family: arial;
	font-weight: bold;
	padding: 5px 15px;
	}

.button:hover { 
	background: #39c;
	color: #000;
	}

.left {text-align: left;}
.right {text-align: right;}

#output {
	border-bottom: solid 2px #900;
	border-radius: 6px;
	box-shadow: -1px 1px 3px #999;
	color: #9aa;
	font-family: impact;
	font-size: 1.6rem;
	padding: 10px 20px;
	position: absolute;
	  left: 200px;
	  top: 40px;
	}


Lastly, you will enter this chunk of code at the bottom of your HTML page, just above the closing "body" tag."


    <script type="text/javascript">
    		function output(){
				var first = document.getElementById('fName').value;
				var last = document.getElementById('lName').value;
				var color = document.getElementById('color').value;
				var food = document.getElementById('food').value;

				first = "You entered <b>'" + first + "'</b> as your FIRST name.<br>";
				last = "You entered <b>'" + last + "'</b> as your LAST name.<br><br>";
				color = "You Selected <b>'" + color + "'</b> as your favorite color.<br>";
				food = "You chose <b>'" + food + "'</b> as your favorite food.<br><br>";
				if (document.getElementById('email').checked){
					email = "You <b>-chose-</b> to be emailed.";
					} else {
					email = "You chose <b>-not- to be emailed.";
					}
				output = first + last + color + food + email;
				document.getElementById('output1').innerHTML = output;
				//document.forms["form1"].reset();
				}
		</script>
        


-->

Color Picker

Use this handy tool to select a hex color for your site. Just click on the box, select a color, and then copy the code into your html or css...

...but if you are looking for something a little more robust, you can always go to Adobe's Color Wheel page and select a couple of colors for a site design.


Helpful links for this class:

The Book's Resources site

"The Expert"

At times, the plight of the developer is similar to the tasks placed upon the feet of "Experts"


For Further Reading...

Links from the book that I thought may be helpful will live here. As the web is a livin beast, some of the links die out, or get moved. This list is current as of 1/13/17.

Pg 35 - 'Zombie apocalypse' by Scott Jensen
edu.phlume.com © 2010-2017 Phlume Artist Management LLC. All rights Reserved.
Web Site designed and maintained by Chad @ Phlume.