Wed., Oct. 17

Planning and starting Responsive Webpage.

Work in class on wireframes + planning to start setting up new site.

Screen Shot 2015-10-13 at 3.47.38 PM Screen Shot 2015-10-13 at 3.47.49 PM

Insert panel resources:

Adobe Insert Panel

adobe (video)

Insert panel updates (video)

Shortcut reminder to setting up a Responsive Web Page

Next week: Editing Media Queries + getting serious about Selectors

Advertisements

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

 

 

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

Glyphicons

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?

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