Search

GS Web-design Blog

Webdesign Developement and Mantainance

Tag

css3

A Typographic Web Assignment

On this assignment from my web-prototyping class I was asked to create a typography-based stylesheet for web and mobile content using one to two embedded typefaces for an article of my choice.

I styled the text using CSS properties such as

font-family

font-size (px, em)

font-style

color

font vs background color

font-weight

text-transform

line-height

letter-spacing

word spacing

text-align

text-decoration

margin spacing

padding

I had to take into consideration that the typefaces chosen would look good together. So I aimed for CONCORD – typefaces that have different but complementary characteristics – for my main content. I’m not sure yet if I was successful, because maybe I just got into a CONFLICT of typefaces between my paragraphs <p> and the subheadings<h2>, since they are a bit too similar.

I also use a CONTRAST with the typeface chosen for the quotes in the button of the article.

Let me know what you think 🙂

Check my assigment*

A Typographic Web Assignment
Legiao Urbana – Wiki
* Responsive still going through adjustments for mobile.
Advertisements

Sweet Suzie Website: concept and development

The first part of my course ended with the development of a 5 pages responsive website.

I decided to create a website for someone special to me: my mom! My client needs a website to show her products and for potential clients to contact her 😉

Here are the five (not so easy) steps I went through in 4 days (!!!) to get the web-site up and going.

Step 01: create a site map to  get an idea of the structure of the website.

website site map
Sweet Suzie Website Site-map

Step 2: Create a wireframe for the home page and sub-pages defining the grid system I was going to use.

Sweet Suzie Website Wireframe
Sweet Suzie Website Wireframe using a 12col. grid system

Step 3: I also sketch the website on paper to get an idea on how to position the content on desktop and mobile in order to make a responsive website 😉

Step 4:  Mockup of the pages defining the spaces, menu, colours, typography and using real content to design the webpages.

Sweet Suzie Mockup
Sweet Suzie Home page Mockup

Step 05:  Program the pages with HTML5 making sure it validates (get no errors when checked by the W3 Validator)  and style the pages using CSS3.

This step is the more time consuming for me. Specially when you are learning how to code properly and trying to put it into practice. But the final result got me very excited because I could see how much I can do already with what I learnt. 😀

You can check the my website online: Sweet Suzie and give me some feedback on what you think.
Thanks!

Calendar Assignment 101

At the end of this class we had to create a Calendar using HTML5 and CSS3.

The entire layout of the calendar should be created using a valid HTML table, as it is one of the few legitimate uses for that markup.

Before jumping into building my web page, I decided to answer a few questions and to draw a wireframe so I don’t start from zero and ended up changing  on the way.

Questions:

  • Which month of which year will you choose?
    September 2015
  • What is notable about that particular month?
    My birthday is on September and it is also the beginning of my favorite season: Fall!
  • What holidays are present in that month?
    Labour day
  • What will be the overall theme of the calendar?
    Fall
  • What colour scheme would be most appropriate for that month?
    Colours on beginning of fall: red, brown, green
  • What kinds of typefaces will help set the tone for your calendar?
    Kaushan Script for the Month and Year
    PT Serif Caption for the rest
  • Are there images that can be used to help establish the theme?
    My Fall photos

This is my wireframe:

wireframe

And this is the end result:

Screen Shot 2015-10-08 at 7.48.20 PM

Gisele’s September Calendar

To  program my Calendar I used HTML5 to create a table: <tr> <td>number goes here…</td></tr>. And the Month and year where put inside paragraph tags <p> Text goes here</p> giving a different class name to them so I could style them up  differently on my CSS3 file

Screen Shot 2015-10-08 at 8.05.16 PM

To add colours, fonts, images, background and also the positioning of everything I used CSS3. The mouse effects were also added on the CSS3 file.

This is the CSS of my Month and Year texts. Note that I was able to rotate the Year 90 degrees using the transformation effect rotate. I also used this effect on photos to make the ’tilt effect’ when the mouse goes over them.

css tranformation effect

Hope you found this interesting!
More explanations… ask me 😉

Blog at WordPress.com.

Up ↑