Tina Liu

Web Designer & Developer

41

2

Building My Online Portfolio

I took this class in conjunction with Meg Lewis's Intro to Web Design which focused on the graphic side.

1. Landing Page Design (PSD)

First I designed the landing page in Photoshop and it looks like this.

2. Coded Landing Page (HTML + CSS + PHP)

I was able to code it by following Jonathan's process, the landing page uses the mailer function to get people's emails.

3. Site Layout Design (PSD)

I plan on using bootstrap for the grid as well as some of the Javascript functions.

4. Draft#1: Coded Site (HTML + CSS + Bootstrap)

Below is Draft#1 of the code, I used the grid from Bootstrap, the pagination still looks off from the original design. The next steps are to add hover effects, fix pagination, fix image borders ... and javascript transitions (if I figure it out XD)

This draft is here: tinaliudesign.com/test1

5. Draft#2: Coded Site (HTML + CSS + Bootstrap + jQuery)

This is the second version. I fixed the img borders, some alignment issues, added the links, and most importantly jQuery transitions (see section 2 and 3).

The Subscribe Box still does not work, if anyone know how it can be done please tell me! I want to somehow store people'e input into a file, but from my research it seems like Javascript doesn't do this for security issues ...

This version of the site can be found here: tinaliudesign.com/test2

For the next steps are to:

  • Add transitions to page scroll;
  • Change cursor when mouse over jQuery links;
  • Fix alignment issue of paragraph to image;
  • Center content;
  • Responsive!

Comments

Please sign in or sign up to comment.