WD-Assign08

Web Site Development

Assignment08 of 14 due in 1 week (note it may take longer - so be patient with yourselves)

Updated: 07/01/2017 by http://JilMac.com
eMail: Jil@JilMac.com or JilMac.MacRand@gMail.com
Phone: 802-254-8628 M-F 6am-8pm, S-S 8am-8pm or for additional hours call to setup

Read: Chapter 13 Working with Web Fonts with the book http://htmlcssvqs.com/8ed/examples/#chapter-13

AND CSS Web Safe Fonts http://www.w3schools.com/cssref/css_websafe_fonts.asp

Research: Do the W3Schools.com CSS Fonts Tutorial http://www.w3schools.com/css/css_font.asp

you can also get there.................................... w3schools > CSS > CSS Font

Notice ... if you scroll down further ... you see ..................... CSS3 > CSS3 font

There are 7 Try It Yourself and 6 exercises (1 under MORE EXAMPLES + 5 more in Test Yourself)

Now you have tried 13 different interactive coding sessions.

Cut and paste just the AFTER code (code that you changed in the Try it) to your Google Page Assignment08

and tell me in your own words what you learned for each of the 13 pieces of code.

To summarize the 13 pieces of code answer the following questions:

- What did you think?
- Did your attitude change?
- Did you get tired?
- or Did you get more confident?

as you scroll through the CSS & CSS3 Syntax page - how do you feel about it? Differently?? Explain

Would you be MORE or LESS inclined to try some of the CSS3 Advanced Font??

I'm trying to show you how to play with code - in a sand-box scenario - when you play/experiment ... you learn !

Here is JilMac version http://jam08260.classweb.ccv.edu/WebDev/Assignment08/chapter-13/font-squirrel-example/example-regular-AFTER.html
1. To View Source: Right Click in the body of the web page > View Source
Here is the CSS http://jam08260.classweb.ccv.edu/WebDev/Assignment08/chapter-13/font-squirrel-example/example-regular-AFTER.css
In addition to W3schools I got some ideas from Google Developers https://developers.google.com/fonts/docs/getting_started#Quick_Start
Here is JilMac's next versionhttp://jam08260.classweb.ccv.edu/WebDev/Assignment08/chapter-13/font-squirrel-example/example-regular-AFTER2.html
and the CSS stylesheet linked http://jam08260.classweb.ccv.edu/WebDev/Assignment08/chapter-13/font-squirrel-example/example-regular-AFTER2.css
did you notice the link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine" the code looks like our AFTER2.css

CSS is broken into TABS of Reference & Tutorials

the Default is Tutorials

If you click on the References you have many options Reference, Selectors, Functions, etc.

Workshops & Videos:

Google Site - Change your Font (they are already using Google Fonts! )

Google Site - Change your Font color

Google Site - Embed a Google Map

Google Site - Add a footer, getting info for the Footer

Create a Professional FaceBook page

Add a LIKE to your Google site for your FaceBook Professional Page

Before+After: do 3 Before & After examples from the Chapters, put links to them on your Google Web Site's Assignment08 web page.

You might even feel comfortable using an example from the W3schools page you Researched.

When you are ready for JilMac to grade you, put a LINK to the Google Assignment08 web page in Moodle.

Note: The last example uses Google Web Fonts file: using-google-web-font.html

W3Schools.com has GREAT TUTORIALS

You can use these as Extra Credit Opportunities or as Before + After code

The first 4 chapters would be equivalent to one assignment:

Then write up what you learned and put it on your Google Web Page for the assignment.

for every 4 W3School Tutorials with what you learned - you receive 2 extra credit points.

If you FTP the code (.html & .css files) up to your STWEB space you can receive another extra credit point.