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?

NOW ... let's go back to CSS Syntax http://www.w3schools.com/css/css_syntax.asp

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??

ex. Animating Fonts http://www.w3schools.com/cssref/tryit.asp?filename=trycss_anim_font

ex. Text Shadow (css) http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

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

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

2. Here is the CSS http://jam08260.classweb.ccv.edu/WebDev/Assignment08/chapter-13/font-squirrel-example/example-regular-AFTER.css

3. In addition to W3schools I got some ideas from Google Developers https://developers.google.com/fonts/docs/getting_started#Quick_Start

4. Here is JilMac's next versionhttp://jam08260.classweb.ccv.edu/WebDev/Assignment08/chapter-13/font-squirrel-example/example-regular-AFTER2.html

5. and the CSS stylesheet linked http://jam08260.classweb.ccv.edu/WebDev/Assignment08/chapter-13/font-squirrel-example/example-regular-AFTER2.css

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

• Everything is written out - step by step to see if this works for you.

• You can start here at the CSS HOME: http://www.w3schools.com/css

The first 4 chapters would be equivalent to one assignment:

• CSS HOME

• CSS Introduction: http://www.w3schools.com/css/css_intro.asp

• CSS Syntax: http://www.w3schools.com/css/css_syntax.asp

• CSS HowTo: http://www.w3schools.com/css/css_howto.asp

• CSS Colors: http://www.w3schools.com/css/css_colors.asp

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

• Copy and paste the examples from the Try-IT (Big Green Button)

• here is the link to the CSS Home's TryIT

• http://www.w3schools.com/css/tryit.asp?filename=trycss_default

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.

Previous TextBook Recording: http://experts.adobeconnect.com/p1v18eds2h7