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.


Video  – Media Queries

Custom Media Queries


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


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



What is Bootstrap?

Screen Shot 2015-10-06 at 2.48.40 PMWhat is Bootstrap? 

Its a “responsive framework” that allows a website to be “mobile-first” and viewed easily on multiple devices. Developed by Twitter, it is not only super popular right now, but very easy to use. It combines HTML, CSS and Javascript and it has just been integrated with Dreamweaver -so experiment with Bootstrap templates and Bootstrap Components in your Portfolio site.

Some resources:

Bootstrap official site


Bootstrap code help – W3 Schools

Oct 10: 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?


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