Embed Fonts in CSS

9Objectives

  • Apply CSS3 standards to embed fonts to a website with the use of @font-face rule
  • Apply steps to embed a viedo

@font-face Rule

In the @font-face rule, you must first define a name for the font (e.g. myFirstFont) and then point to the font file.

Note: Use lowercase letters for the font URL.
Uppercase letters can give unexpected results in IE!

To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

Demo – Accessed from an External URLfont-face-demo1


Demo – Accessed from the Root folder


Adding Youtube Videos to a Web Page


Placing videos on our web pages is not complicated.

  • Videos can make our pages more interesting and engaging.
  • Most video-hosting services, such as YouTube, will provide us with HTML code ready to copy and paste into our web page.

Click here for step-by-step instructions


References
Using @font-face
CSS3 @font-face Rule
Google Fonts

Fan Site – Code

Objectives

  • Create a vertical navigation or horizontal navigation
  • Use the background property
  • Nested and float elements
  • Create layers within CSS

Overview:

Create a fan website containing a home page and four additional pages.

Requirements

  • Directory structure
  • External Style Sheet

Instructions

Begin creating your personal website that complies with the following:

  1. The page is 960 pixels wide and centered on the screen, no matter the screen resolution.
  2. All pages have a header section, nav section, content section, and footer section.
  3. All pages have a navigation menu that includes links to all pages on the site.
    The navigation menu can be horizontal (between the header and main content area) or vertical (left side of the main content area) but must be consistent for all pages.
  4. All pages use the same color scheme/palette and consistent fonts and text colors.
  5. All styling is accomplished via an external CSS style sheet.

HTML and CSS  – DUE Friday, January 18, 2019

  • Homepage (index.html)
  • Second page (e.g. boi.html)
  • Third page (e.g. boi.html, name the files accordingly)

Upload sharable link to Google Classroom > Fan Site – Website

Folder name: Last Name_First Name-FanSite.

If you submit after the deadline it will be an INCOMPLETE

Fan Site – Design

A Fan Website

Objectives:
At the end of this project, you will be able to:

  • Design multiple pages for a fan site
  • Optimize images for the web in a photo editing application (Adobe Photoshop)
  • Crop and or re-size an image

Website Overview

Create a fan website containing a home page and four additional pages.
This site can be about your passion for music, movies, books, games or other types of entertainment. Let it be something you are interested in.

Requirements

  1. Design (Photoshop/Image editor file)  – DUE Thursday, January 10, 2019
  2. File names: projectName-home.PNG or JPG, projectName-gallery, etc.
    (eg boxing_home, boxing-gallery)
  3. Folder name: Last Name_First Name-Design

Setting up the Photoshop Document

Choosing a Color Palette/Scheme

Dates are subject to change.

Project DUE – January 18, 2019
I will not be accepting anything after the deadline.

MP3 Exam – January 17, 2019

Fan Site – Wireframes

Objectives

At the end of this project, you will be able to:

  • Create a multi-page fan website
  • Create  wireframe options for your webpage

Overview

Create a fan website containing a home page and four additional pages.

This site can be about your passion for music, movies, books, games or other types of entertainment.

Requirements

  1. Layout 1Create wireframes for the home page and one secondary page (2 pages).
  2. Layout 2 Create wireframes for the home page and secondary page (2 pages).
  3. Once you have complete and we (teacher and student) have chosen one, you will complete the remaining pages (3 pages) in that specific layout option.
  4. Resources/references needed. (Place URL into the comments)
  5. Format: Google Docs, WIreframe.cc, Photoshop.

Folder name: Last Name_First Name-Wireframes

You will submit 7 (minimum)pages into the folder.

Upload sharable link to the Google Classroom > FanSite – Wireframes

Due Thursday, January 3, 2019

Website Requirements

  1. Begin creating your personal website that complies with the following: STRUCTURE
    1. The page is 960 pixels wide and centered on the screen, no matter the screen resolution.
    2. All pages have a header sectioncontent section, and a footer section at the bottom.
    3. All pages have a navigation/menu section that includes links to all pages on the site.  The navigation menu can be horizontal (between the header and main content area) or vertical (left side of the main content area) but must be consistent for all pages.
    4. All pages use the same color scheme (4 colors minimum) and consistent fonts and text colors.
    5. All styling is accomplished with an External CSS style sheet.
  2. Have fun with the content, layout, and styling of the content, but be sure to include all of the following minimum requirements (more is OK) somewhere on your site: DESIGN
    1. Three different levels of heading elements.
    2. Paragraph elements with CSS styling applied.
    3. Ten or more images (not counting backgrounds).
    4. One ordered list of at least three items.
    5. A styled table that uses table headers, a caption, and one cell that spans at least two rows or columns.
    6. Use HTML and CSS comments.
    7. One embedded YouTube video.
    8. One Lightbox gallery (optional).
    9. Two different fonts with at least two fallbacks/secondary fonts declared for each.
    10. Font-style, font-weight, and text-decoration styles used at least once.
    11. One background image.  At least one use of the background-repeat property.
    12. Four Hex color codes (background or text).
    13. Two floated elements and the floats later cleared.
    14. Two external links with CSS styles defined for all four link states.
    15. Padding, border, and margins declared for at least two elements, using CSS shorthand.
    16. At least one instance of using multiple CSS selectors in the same declaration.