Hands-on with Selected Topics

From presentations and from lingering topics and issues

Favicons

Short for “Favorite Icon”, a favicon is a tiny graphic that you see in the tabs in your browser and in your bookmarks of webpages. Among other things, it helps to give your brand a face. It displays as a square around the size o 24x24px.

For the experience, I want you to use a graphic editor to create a logo using the initials of your name. Start with any square size such as 200x200. Then it's good to resize it because it will be reduced to about 24px on the tab anyway. Examples of famous favicons are shown below:

screenshot

Facts about favicons

<link rel="icon" href="favicon.ico" type="image/x-icon">

 

Description Meta Tag

A meta tag is a self-contained tag that is placed in the head section of a web page. You’ve been using a meta tag to indicate character encoding. There are a number of other uses for meta tags, such as providing a description of a website for use by search engines. The description meta tag content is displayed on the Search Engine Response Page by search engines such as Google. The name attribute indicates the use of the meta tag. The content attribute indicates the values needed for that specific use. The description value should be a carefully written paragraph or sentence to describe the website.

For example, a description meta tag for a website about a web development consulting firm called Acme Design could be configured as follows:

<meta name="description"  content="Acme Design, a premier web
 consulting group that specializes in  e-commerce, web design,
 web development, and website redesign.">

Responsive Images

This is mostly a note to myself to not forget to cover this Chapter 7 topic. I will either cover it singly, or include it in our coverage of grid RWD.

Followup note to self: This was covered in mid-November (pages 333-337).

Box-Sizing

This is a small, but lingering topic that we need to incorporate into the discussion.

By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added. For example, if you have four boxes with width: 25%;, if any has left or right padding or a left or right border, they will not by default fit on one line within the constraints of the parent container. 

See more at: Mozilla Dev

 

Simple Dropdown Menu

This is covered in Chapter 11. Download the PowerPoint that gets us started with the code. We will finish the code during class, and you'll find that the main "tricks" to dropdowns are to:
1) Set up embedded <ul> and
2) Set dropdown menus to only display when the user hovers.

 

Animation, Transition, and Transformation

Let's see how much we can cover in about 25 minutes. It will mostly be done by copying/pasting. I want us to go at the same pace so that I can explain as we go.

Start with a brief overview on a PowerPoint Presentation.

 

Next download these 4 files and take a brief time to familiarize yourself with the webpage's structure:

Before we start with the animations, go ahead and insert the images in the HTML file according to the instructions in the comments.
Reason: This simply gives you more time to look at the structure.

 

Next, we will start applying animations, transformations, and transitions to the file one at a time. Click each file and I will provide further information on where to paste and play!