Giter Club home page Giter Club logo

just-your-type's Introduction

summary time deliverables
A creative design project that demonstrates the skills learned so far using the Gridifier, Typographer & Modulifier.
6 hours
1 HTML file, 4 CSS files

Just your type

Overview

  • Fork this repository.
  • Select a quote, passage of poetry, chunk of lyrics, excerpt from a book, famous tweet, etc.
    No adult themes, graphic language, illegal text, or hate speech.
    Must be a minimum of 1 sentence (10 words) and a maximum of 5 sentences.
  • Design a creative webpage using HTML & CSS only. No images.
  • Make it responsive and interesting with thoughtful use of colour, type & grids.
  • Consider it a type project—not just a website.
  • Thoughtfully choose a type scale—not just the default, unless you can justify your reason.
  • Be creative. Use modular CSS to push your concept.
  • Some inspiration: 100 Days of Type, Typewolf, Type Scale
  • Run it through Markbot and make sure it passes all the checks.

Details

  • Typefaces: 2 Google fonts
  • Gridifier settings: your choice
  • Typografier settings: your choice
  • Modulifier settings: your choice; “Responsive” required
  • No images

Deliverables

The grades for this assignment are split over 3 different deliverables: text & sketches, code, design & rationale.

  • Text & sketches — decide on the piece of text & plan every aspect of the website on paper: boxes, semantics, grids, type, modules, responsiveness—all screen sizes.
  • Code — satisfy all of Markbot’s requirements—and submit using Markbot.
  • Design & rational — apply sensible design choices, to compliment the text you’ve chosen—and explain all your decisions.

Rationale

Part of the submission is to write a rationale for your design choices. Submit your rationale as an Issue on GitHub, attached to the “Just your type” repository.

  1. Explain your chosen concept.
  2. Why did you choose these typefaces?
  3. Why did you choose this type scale?
  4. Why did you choose these colours?
  5. How did you effectively use grids & modular CSS?
  6. What challenges did you overcome?

Marking rubric

Below is the rubric of expectations for this project. You will be assigned a letter grade based on your standing within the rubric.

0 points 1 points 2 points 3 points
Concept & creativity What concept? Obvious Clever Mind blown
Colour Why!? Okay Good Harmonious as all get out
Type No effort, do not pass go Okay pairing and gets the job done Good pairing and use of scale Dynamic pairing and use of scale
Design & responsiveness No effort, not responsive Very poor spacing and alignment, very awkward Spacing and alignment too tight or inconsistent Excellent alignment and spacing on all screen sizes
Gridifier No Gridifier Limited use Good use of Gridifier Excellent use of Gridifier
Typografier No Typografier Limited use Good use of Typografier Excellent use of Typografier
Modulifier No Modulifier Limited use Good use of Modifier Excellent use of Modulifier
Spelling & grammar Wrds be gud!? Lots of spelling & grammar mistakes Decent, with a few mistakes Great! No spelling or grammar errors
Semantics Very little HTML Basic HTML tags chosen Good variety and appropriate HTML tags chosen Excellent demonstration of HTML tags and correct use

Hand in

  1. Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.
    When you submit to Progressinator, you’ll get a grade for the “Code” deliverable—this shows the project was handed in. You’ll still have to write a Rationale and the teacher will still be grading it personally under the “Design” deliverable.
  2. Submit your rationale as an Issue on GitHub, attached to the “Just your type” repository, and “Pin” the issue: there’s a button near the bottom of the Issue’s screen’s righthand column.

just-your-type's People

Contributors

jdawsonadams avatar thomasjbradley avatar

Watchers

James Cloos avatar

just-your-type's Issues

Design & Rationale

P.S- I made a few changes to my code after Markbot already submitted it but when I tried to re-submit it, Markbot wouldn't let me because I "already earned a grade".

The concept that I chose was a quote by Alice Walker about power. The quote is "The most common way people give up their power is by thinking they don't have any". I chose this quote because right when I read it I was able to visualize how I would style it as a webpage. I wanted the word "power" to be important which is why I chose to use contrast in colours and fonts that alternate depending on the media query size.

I chose to use "Open Sans Condensed" as the type for most of the quote because it is a readable sans-serif font that contrasts well with the font that I used for the word "power". I wanted the word "power" to really stand out which is why I used "Notable" which is a very block-like, uppercase, decorative, sans serif typeface.

Again, in order to make the word "power" to really stand out, I chose to make that type significantly larger than the type for the rest of the quote.

I chose to keep most of the quote in black, and then I chose to use red and orange. These are colours closely associated with the word "power" which is why I thought it would be fitting to use them. At the largest media query size of 90em, I swapped the orange background and the word "power", which is red, to make it so that that background changed to red and the word "power" changed to orange when the screen size is at its largest.

I used grids & modular CSS to show & hide certain elements depending on what screen size you're viewing it at. For example, at the smallest screen size, the only type that is visable is the word "power", but as the screen size gets bigger, the rest of the quote appears and then when the screen size gets even bigger, "-Alice Walker" appears.

Challenges that I had to overcome were placement issues of the type. Because I had seperate p tags for each line of type, I had to adjust the padding for each media query so that the type aligned properly and had a suitable line height at every screen size.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.