My web design course with Kevin McMillan at Emily Carr University of Art and Design is all about uncovering the layers behind a web site, with a focus on responsive adaptive design. Kevin has been teaching web design since the beginning of web design…so it’s interesting to hear his stories about how things have changed over time. Also he’s a wealth of information and has us using several free sites to learn this ever-evolving, fast-spinning, somewhat intimidating but fascinating area.

LEARNING HTML

For the first week’s homework, we had to write some HTML (hyper-text markup language!) for a 3+page website. I decided to build a site that will house all the info i’m accumulating in my learning about Interaction Design. This is what my HTML file looked like:

ixdsite_html

Kevin wanted us to develop and think about the underlying structure of the site with headings, links, etc, using images and sections to divide up the information.

CSS and RESPONSIVE DESIGN

Next, for week 2, we learned CSS (cascading style sheet) which essentially makes the HTML look pretty, all the while understanding that to make a site responsive, it has to look the same on any device, regardless of size. Here’s a snippet of my CSS file:

ixdsite_css

Putting these two files together (HTML and CSS) reveals what the site would look like…here when the screen is at its widest, so the desktop view:

ixdsite_lgmainoage

Then what it might look like on a tablet…offering a different page, with reference to my summer class with Thomas Girard at Emily Carr:

ixdsite_medcoursespg

And lastly for mobile (when the screen is made the smallest), which is really how most people first look at websites, so it’s important to have all the same links, look and details…mobile-first!

ixdsite_smallmainpage

FLOATS AND BOX MODELS

For weeks 3 and 4, Kevin has us re-create two websites so they matched an image he gave us…it was tough work, tackling basic floats and the box model. Floating is when you move images across a page and have text possibly wrap around it. The Box model is important to learn as that deals with space in the box (padding) and space outside the box (margins). Here are the two sites I recreated:

HELPFUL SITES

In case you’re interested…here are a few sites that I’ve found really helpful in understanding basic HTML/CSS coding: MarkSheet  and ShayHowe and W3Schools. Do you know of any others i could use?

Advertisements