DSD-4708-A
Week 6

Questions from the assignment

  • I tried to make the gap between two columns and it is not working.
  • How to leave "blank spaces" in html?
  • How do you center text in middle of a button?
  • How do you make the text a different color when it's a href link?
  • how to add facebook and twitter symbols in the footer?
  • I set column width as auto, and one side of columns keep getting slightly thiner than the other. How do I set even columns' width without assigning absolute number?

Assignment review

  1. Kyle An :: Coding | Design
  2. Lihua Jin :: Coding | Design
  3. Hyeona Kim :: Coding | Design
  4. Ifah Pantitanonta :: Coding | Design
  5. Eva Zhou :: Coding | Design
  6. Yoli Roman nicasio :: Coding | Design
  7. Yunfei Xie :: Coding | Design
  8. Alyssa Tornese :: Design
  9. Grace Oh :: Coding | Design
  10. Yuran Won :: Coding | Design

CSS Grid review

  • Almost all of the implemntations of CSS grid were incorrect
  • CSS Grid should make use of a flat structure, meaning that you should only define the grid settings once in a "grid-container" class
  • If you're writing display: grid more than once to format the same content, you're doing it wrong
  • Use this structure: 
    
<div class='grid-container'>
	<div class='grid-item'>
		all the html for that item
	</div>
	<div class='grid-item'>
		all the html for that item
	</div>
	<div class='grid-item'>
		all the html for that item
	</div>
	<div class='grid-item'>
		all the html for that item
	</div>
</div>

    Then in your css:

    
.grid-container{
	display: grid;
	grid-template-columns: 50% 50%;  /*this will give you a 2 column grid*/
	grid-column-gap: 50px;
	grid-row-gap: 20px;
	margin: 0 auto;
}

.grid-item{
	width: 100%;
	background-color: red;
}
  • Let's take a look at how to implement it using the first assignment

A note about CSS

  • If you find yourself naming CSS classes like, "event1", "event2", "event3", etc., you're doing it wrong
  • The name of a CSS class should be general. So in the example above, just use "event" and apply that one class to three different blocks of code in your HTML
  • Also, don't forget that the "C" in "CSS" stands for "Cascading," which is meant to help you write less code
  • So for example, if you have: 
    
<div class='grid-item'>
	<h3>Title here</h3>
	<figure>
		<img src="asdf.jpg" />
	</figure>
	<figcaption>Caption here</figcaption>
	<p>Lorum ipsum bla bla bla</p>
</div>
  • You do not have to create any new CSS classes, you can simply do this: 
    
.grid-item h3{
	font-size: 2em;
}
.grid-item figure {
	width: 100%;
	border: 1px solid black;
}
.grid-item p{
	font-size: 1em;
	line-height: 1em;
}
  • Here's an example on Liveweave

Introduction to Sketch

  • In the interaction design community, designers are flocking to Sketch in droves because it provides a lot of functionality that Photoshop and other Adobe products do not
    • Symbols and nested symbols (think active and inactive icons)
    • InDesign-esque type styles (that are even better than InDesign)
    • Document and Global colors
    • Tons of plugins and many others in the open source community
    • Built in simple prototyping
    • Integrates well with more sophisticated prototyping software, such as Principle
    • Built to accommodate porting designs from desktop <--> tablet <--> mobile

Sketch: Let's dive in

Design Assignment

Deliverable: URL to publicly accessible PDF

  • Using Sketch, mockup a working interactive prototype of apple.com, specifically:
    • The navigation for 8 pages: Homepage, Mac, iPad, iPhone, Watch, TV, Music, Support. The navigation should indicate which page is currently active.
    • The content of pages is not imporant—you can just use a screenshot from Apple's site to indicate that the content has changed
    • The subnavigation (which is on every page except the homepage) should be a symbol whose content changes for each page
  • As an example, download this example Sketch file that we started working on in class. Click the Preview button and notice how the prototype changes from the homepage to the Mac page
  • If you have a Sketch subscription you can upload your prototype to the cloud and submit the link. Otherwise submit the Sketch file. Make sure to test your prototype using Sketch's Preview functionality.

Coding Assignment 1

Deliverable: LiveWeave URL (Remember: always have TextEdit open for questions)

  • Redo your HTML from last week using the correct implementation of CSS Grid
  • If you weren't in class, redo the code lessons from last week and, using the sample above, redo your CSS Grid

Coding Assignment 2

Deliverable: LiveWeave URL (Remember: always have TextEdit open for questions)

  • Code the two column eblast you designed last week
  • If there was feedback from your design, don't forget to take that into account
  • For the typography, you're still limited to the standard collection of "web safe" fonts (more on this next week)

Submitting Your Work

Due Monday, 10/22 @ 10AM

Make sure all links are publicly accessible (your grade will be lower if I cannot access your work). To make sure, open up a new private/incognito browser window and test all links before submitting. After the links have been tested, submit them to this Google Form.

Cool links