CSS Transitions, Hover, etc.

CSS Animations and Transitions Cheat Sheet.jpg

CSS Transitions:

Adobe CSS Transitions

More transitions help from Adobe

transitions: w3school

more css transitions

Hovering:

https://www.w3schools.com/csSref/sel_hover.asp

Hover Effects: Code Pen

How to: Hover Effects

This page has some great hover effects that you can download : import CSS into Dreamweaver and source the code.

Great resource with good visual examples: CSS transitions and animations

Text overlay on hover

Text overlay on hover

 

 

BEST INTRO LINK: Using CSS Animations + CSS Animations

 

 

Advertisements

Media Queries

Today we are going to start our wire framing process as well as a lot of brainstorming for what you would like your responsive portfolio webpage to be.

HELP: https://helpx.adobe.com/dreamweaver/using/bootstrap.html

Video  – Media Queries

Custom Media Queries

http://blogs.adobe.com/dreamweaver/2015/02/new-dreamweaver-cc-starter-templates-make-responsive-design-a-snap.html

March 18: Rest of semester project: Portfolio Responsive Web Design

Hello students,

Hopefully you feel a little more comfortable now that you have built a starter page in Dreamweaver. . . Remember, we are still learning !

Adobe (free) tutorials:

  1. Adobe tutorials (8 min)
  2. Adobe tutorials 4 (3 min): GET PRACTICE FILES HERE

Excellent link on setting up your Responsive Layout

Here is what we are going to work towards with our Portfolio Responsive Web Page:

1. Extensive planning of mission, design and structure of your portfolio page

2. Wireframes built in Photoshop then imported into Dreamweaver

3. A fully responsive personal portfolio site ( to be viewed on mobile, tablet and desktop screens)

4. Personal logo and site with a unified color scheme and style

5. Experiment with Bootstrap and using Bootstrap Components (located in the Insert Panel)

6. Drop down menus to include at least 4 categories :

Portfolio (with a  submenu of at least 3 mediums), About, Links to social media (could be Facebook, LinkedIn, etc.), Contact form, downloadable PDF resume

7. Rotating Bootstrap Carousel with quality images

8. Other possibilities: incorporating animation, video, etc. (open to your ideas!)

9. Do you want social media widgets, glyphicons, etc?

What are media queries?

RESOURCE LINKS: SIMPLICITY is KEY

Responsive resources:

What is Responsive Design?

Beginners Guide to Responsive Design

Boston Globe (EXCELLENT example of fluid grid layout)

Next week: What are media queries?

DUE DATE: Last class – Monday, April 29.