Ch. 3 Project - Add CSS to NVHS Scholarship page

Hello everyone. Here are the directions:

1. Get a copy of the CSS handout from Mr. West. You'll use the properties listed in the handout to style the scholarship page.
2. Create a new folder in your Project folder called Chapter 3.
3. Copy the contents of your Chapter 2 Project folder into Chapter 3. (Copy all the files created for the NVHS scholarship project and pasted in your new chapter 3 folder).
4. Create a new folder inside Chapter 3 called CSS.
5. Create a new file using Notepad ++. Save the file as, "scholarshipstyle.css" inside the CSS folder.
6. Open the scholarship web page in Notepad ++ for editing.
7. Add the external CSS link tag in the head section of the scholarship web page.
8. Test that the external style sheet is properly "communicating" with the scholarship page by changing the link color, font type,font size, and hover effect. Add the following to the scholarshipstyle.css:

a{font-family: chiller;
font-size: 10pt;
color: red;
}
a:hover{background-color: yellow;}

9.Save your .css file. Open the scholarship page in a browser. Confirm that your links have changed. If the changes don't show, make sure your link rel tag is correct (especially the pathing) and that there are no typos in the .css file.

10. Create various IDs and Classes using font, color, and background properties. Use the following external style coding for generating your own ids and classes.

classes examples:
.westone{
font-family: jokerman;
font-size: 100pt;
color: orange;
font-weight: bolder;
}
.westtwo{
font-family: earwig factory;
font-size: xx-small;
color: gray;
font-weight: bolder;
}

id example
#westone{
font-family: comic sans;
font-size: 35pt;
color: green;
font-weight: bolder;
}

11. 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.

Applying a class attribute to an existing paragraph tag example: p class="westone"

12. Open the web page in a browser to see the applied styles.

13. Apply a background property to the page.

14. Print the code and browser.

Chapter 2 Project - Basic directions

1. Create a new folder called "Chapter 2" in your new "Projects" folder on your desktop.
2. Create a new folder called "images" inside "Chapter 2" folder.
3. Copy and paste the PDF file from the shared V drive. Open the PDF and copy/paste the text to a new notepad file.
4. Save the file as chapter2project.html
5. View the file in any available browser.
6. You must add the basic web page tags, spacing tags, img src tag, and multiple break tags.
7. Include link tags in the appropriate places based on your wireframe sketch.
8. Once you are finished, please let Mr. West know and he'll ask you to verify that all of your links work.

20 Effective Examples of Web and Mobile Wireframe Sketches

A wireframe sketch is the initial hand-drawn design process, using paper and pen/pencil, of what a website design will look like. And to help you get inspiration as well as effective reference points, this article features 20 impressive web and mobile wireframe sketches.

Here's the LINKKKKKKKKKKKKKKKKKKKKKKK

Pencil 1.2

Wireframing Tools for Designers Building a website can be a time-consuming and expensive business. To ensure that you minimize the number of hours spent and the amount of money wasted on each project, it’s absolutely essential that you plan properly, flushing out content and functionality early, reducing rework. Most people simply use a pen and paper to plan the early stages of their website designs, but is this enough? Besides a rough, handwritten sketch, you should be creating wireframes for your own benefit and to aid in preliminary discussions with clients and team members. To create a successful wireframe, you’re going to need to use a good wireframing tool.

Here's the LINK!!!!!!!!!!http://www.blogger.com/img/blank.gif!!!

Web Design "Bible" for reference

Great websites for reference as discussed by the pros

The Best Designs http://www.blogger.com/img/blank.gif

Siteinspire.com

HTML cheat sheet

herehttp://www.blogger.com/img/blank.gif

23 Most Popular jQuery Photo Gallery and Slider Plugins

If anyone's interested in what Bryan and Gunnar (and myself) will be researching for possible addition to our competitive websites, here you go. I've always believed that any quality website should include a photo viewer. There are plenty to choose from in this website.

Here's the LINK

Chapter 1 - Project - Top Five Favorite - Single Web Page

Hi everyone. Here are the directions to complete the project.

1. Create a new folder on your Desktop called Projects

2. Inside your Projects folder, create a new folder called Chapter 1

3. Inside your Chapter 1 folder, created a folder called imgs

4. Open Notepad. Immediately save the file as chapter1project.html inside the Chapter 1 folder. (Please don't save the file to the imgs folder. Only image files will be saved there.)

5. Open Internet Explorer. Find and save five images to the imgs folder. Please save ONLY .jpg and/or .gif files. No .png or .bmp files are allowed for this project.

6. Create a web page similar to the sketch designed in class. You must include the height, width, alt, and align attributes in the tag.

7. Be sure to include paragaph tags, H1 - H6 tags, don't forget to add the align attribute to the paragraph tag.

8. Once you're satisfied with your design, print the code and browser.

download and install notepad ++

Here's the Link