30+ CSS Cheat Sheets & Quick Reference Guides

I would be hard pressed to find a web designer or web developer who doesn’t like a helpful CSS Quick Reference Card or Cheat Sheet. Cheat Sheets can help you save so much time and can really help you learn about CSS in an easy to understand format. I have gathered a list of CSS cheat sheets that I have found to be the most helpful

CLICK HERE FOR THE ARTICLE

ADD CSS TO SCHOLARSHIP PAGE" PROJECT (60 PTS) DIRECTIONS HERE!!!

Hello everyone. Here are the directions:

1. Download, save to your H drive the following PDF file: Click here

2. Create a new folder called CSS inside your Scholarship folder.
3. Create a new file using Notepad ++. Save the file as, "scholarshipstyle.css" inside the CSS folder.
4. Apply the external CSS link tag after the body section Here's an example
5. Create various IDs and Classes using font, color, and background properties. Use the following external style coding for generating your own ids and classes: Here
6. Apply the IDs and classes to various tags inside the scholarship coding, not sure what tags to apply it to? Use paragraph, H1, and link tags. Applying the same ID (ex: #west1) to multiple tags will help you. Use a wide range of fonts.
7. Open the web page in a browser to see the applied styles.
8. Apply a background property to the page. Here's an example of what I'm looking for.
9. Print the code and browser.

NVHS SCHOLARSHIP PROJECT

1. Create a new folder called "scholarships" in your new "projects" folder in your H drive.
2. Create a new folder called "images" inside "scholarships" folder.
3. acquire the information below to help you build your web page.
Include your own title and H1 title

Here's the PDF containing all required text.

Here's the sample sketchup I drew in class

Here's the image file you need to save to the "images" folder inside of your "scholarship" folder.

chapter 2 - hyperlinks and URLs

This chapter focuses you being able to demonstrate how link three ways:
1. from one page to another inside a website
2. from one website to another via URL (web address)
3. from one location in a webpage to another spot on the page.

#1-2 are simple with using the "a" tag, but there seems always to be some difficulty with students to understand anchors and target tags required for #3 to be demonstrated. To help you with this, I'm assigning the "NVHS Scholarship" Project as the next assignment following this chapter. In it, you'll be required to set anchors and targets throughout a very long web page allowing users to click on scholarship names to be directed to that part of the web page with additional description provided.

Directions for this project will be available on this blog Wednesday morning.

Sa'a ("see you")

Mr. West

website page created in class using notepad - demo

Here's the page. I uploaded it to the mywebzilla.com server. I pay godaddy.com $7 a month to host my website. I uploaded the "west" folder to the server using Dreamweaver CS3. It took me just a few minutes to do this. You will learn how to do this as well soon.

Use Notepad ++ to complete your textbook work

It's a great program that makes life so much easier. Add Notepad ++ to your installer list at ninite.com. It's all the way at the bottom of the page in the Utilities list. It has great features that plain old notepad does not such as line numbering, color coordination, and autocomplete.

Mr. West

2011 FBLA Web Site Design topic

WEB SITE DESIGN

The career specialist at your high school has asked for FBLA’s assistance. She has been getting phone calls from local businesses to hire 16-18 year old high school students. The businesses would like to find a quick, easy way to look for qualified students to interview. She doesn’t have time to post the jobs on the school Web site, and would like for FBLA to develop a Web site specifically for the purpose of posting of positions. This site should list part-time jobs or internships available for 16-18 year old students. This would require, at a minimum, developing criteria for:

• position description
• qualifications
• hours
• days of the week
• pay
• duties

The opportunities posted may be real or fictitious.

Web Project - ninite.com (10 project pts)

ninite.com
Check all web browsers, then click Get Installer.
Click here to download your installer
Save it to your H drive. Run the installer to install Chrome, Firefox, Safari and Opera.
Show Mr. West the installed browsers. Use these browsers instead of IE.

Tribalboy project - intro - teacher thoughts so far

Hi everyone. It seems our advanced boys are stuck on Question #3. It's true there is plenty of coding to sort through, they are doing their best. Basically, #3 is asking them to answer what is the name of the image viewer that appears when the visitor clicks on one of the images on that one web page. I'd like to think that they were distracted slightly. What I'm asking the advanced students to do is recall six months worth of web techniques in roughly one hour.

This question means more to me than their ability to answer it correctly. The actual javascript file associated with the viewer WILL be used in our competitive websites for SkillsUSA and FBLA.

Sure, the javascipt module is somewhat dated, it's still cool as heck. I want to say that mmo-champion.com recently converted their way of user viewed images with this javascript programming.

Good luck advanced guys,

-Mr. West

Web Design - 1st year students - extra credit opportunity

If you'd like to earn extra credit, visit www.tribalboy.com on your own. Visit all the pages that make up the website. Write a minimum one page essay detailing:

Purpose of the website
Information about the company
services offered at the website
how visitors can contact the website
what you liked about the website
what you feel can be improved upon with the website. Hint - contact page can use a definite update/upgrade.

The essay must be single-spaced. Feel free to interview, talk with our advanced student to get ideas and advice about this site. No deadline for this extra credit at this time.

9-7-10 agenda: Advanced Wed Design - first project - DUE 9-9-10

Tribalboy.com Project - Introduction, 40 project pts

Introduction: Over the years I've been very interested in this company's portfolio of web design work. One of the reasons is due to the fact that it's an American Indian owned website. I've seen very few out there in my time as a web design teacher. The other reason is Tribal Boy's web developer has designs created from scratch with elements of joomla, javascript, and CSS.

Your task has multiple steps, here's the breakdown:
visit tribalboy.com
spend a few minutes looking over each page AND the coding. Focus on identifying as much of the important parts of the design as possible (.js files used, css components, div usage).

Open Word, insert a header with your name, date, and assignment name.

Type the following questions and provide the necessary answers:

1. On tribalboy's home page, what .js files are linked to the page? I do not want the entire path but the actual .js file name. (10 pts)

2. Visit the "About" page at tribalboy.com, View the code and skim over. Return to the About page. Notice the rows of images. Click on one of the images. What happens? What is the name of the javascript file that allows such an action to occur? (10 pts)

3. Return to the home page. When you move your mouse pointer over the Service link in the top right corner of the page, a drop down menu appears. What javascript file allows such an action to occur? AND What is the external style sheet that applies to the drop down menu? View the coding for the answer. (10 pts)

4. Visit the Contact page at tribalboy.com There is a form for visitors to fill out if they would like to contact the company. View the source code. Capture (using HyperSnap DX) the actual coding associated with the form, hint, do not forget to include the javscript function. Copy/paste the image to your word document. Visit www.mywebzilla.com/FBLA2 View the Contact Us page. Open the source code. Locate the code that allows the form on the Contact Us page to be viewable. Capture and copy/paste the coding to the Word document. What is common about the two forms? What is different about the two forms? In order to receive points for #4 you MUST EXPLAIN THE SIGNIFICANT DIFFERENCE(S) between the two forms. Trust me, the difference is like night and day. Which of the two forms do you prefer? Why?

Save the Word document as tribalboy project - introduction to your H drive or flash drive. Print and turn in the Word document.