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?


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.

Monday, Feb. 25: Intro CSS + Continue building up blocks of your webpage

This slideshow requires JavaScript.

Hey students,

Last week you worked really hard to complete your Photoshop mockup, blocked out your webpage and we did some practice HTML… We are still getting used to the interface.

Today’s task: more work with basic HTML, DIVS + CSS styling

Check out all of these links and videos.

We are going to watch and do this exercise in class: Layout and style web pages with CSS


HTML Training: 

This info on HTML is the easiest to follow: HTML from ADOBE.COM

HERE is a link to lots of different basic HTML codes: W3


(no style sheet)                             (CSS)


This week we are going to talk extensively about CSS (Cascading Style Sheets) vs. HTML.

EXCELLENT: Adobe help with CSS Designer – including access to sample files to practice with!

Understanding CSS style sheets

Adobe CSS help

Easy to understand step by step tutorial of setting up CSS style sheet.

CSS Basics:

Adobe help with CSS Layouts is a great resource for information as well. Here is a link to CSS Intro

HOMEWORK: read Chapter 5 + 6 in PDF textbook on the left column

Watch these for additional help: Don’t Fear the Internet

And look at this:

Nav Bars, Divs, Class IDs

Navigation Bar

Exercise: Adding structural elements and links

BEST ONE: Exercise: Styling links and Navigation Menu


CSS Sidebars

DIVs – What are they?


Class IDs

DIVs vs. Class

  • Use a class when you want to consistently style multiple elements throughout the page/site. Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style. An example may be a div of “comments” or a certain list style to use for related links.Additionally, a given element can have more than one class associated with it, while an element can only have one id. For example, you can give a div two classes whose styles will both take effect.Furthermore, note that classes are often used to define behavioral styles in addition to visual ones.
  • Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique. In your case this may be the correct option, as there presumably will only be one “main” div on the page.Examples of ids are: main-content, header, footer, or left-sidebar.

A good way to remember this is a class is a type of item and the id is the unique name of an item on the page.


Difference between Div and Class