Skip to content

Latest commit

 

History

History
48 lines (30 loc) · 2.92 KB

INCLASS.md

File metadata and controls

48 lines (30 loc) · 2.92 KB
Raw

Lesson 6 In-Class Exercises

(We’re not expecting you to finish all of these activities! Pick the ones which are interesting and challenging to you, and feel free to work with the people around you.)

CSS Debugging Exercises

The file debugging.css is a good start to a CSS file, but it could definitely be improved to look a little nicer. Take a look at debugging.html to see how it displays, and fix some of the CSS to make it better according to design principles. Some things to start with:

  • The text goes all the way to the end of the screen - doesn't look super good
  • Not a lot of whitespace between the italic summary and the main body
  • No formatting on the bullet points make them stick out into the whitespace
  • Might look better if the start of the paragraphs on the italic sumamry and the main body were aligned
  • The text in the main body is pretty squished - increase the space between lines for better visual?

Make a Webpage According to Spec

Make a webpage for a simple blogging website using HTML and CSS/Sass, either locally or on jsfiddle. It should have:

  • A navbar at the top of the page
  • A sidebar
  • Blog posts (placeholders)

The sidebar:

  • Think about what a sidebar should contain. Links to blog entries? About the author? Should it scroll with the posts or stay fixed at the top of the page?

The blog posts:

  • Assume every blog post has a banner picture, title, date, and content

Think about the design principles we talked about. Think about using nice fonts and web safe colors.

Re-create one of these Flexbox layouts

Philip Walton has desribed a varity of common css challenges that are now made significantly simpler thanks to flexbox. Give one or two of the examples a try.

Add error handling to a previous app

We've noticed that a large portion of the cat apps had very little in the way of error handling. If you fall into that category, now would be a great time to go back and use some of the strategies laid out in the README to some of your old code.

Lodash programming exercise

Lodash is a very useful utility library that can dramatically simplify your javascript. Here is a great introductory video that demonstrates how useful lodash can be.

Here is a jsfiddle with inline comments describing the functionality of a program. Fill it it in.

Modularize some previous non-modular code you've written

Now that you have learned so much on the burger app and in the most recent README, it would be a great time to go back to old projects and refactor it to be more modular.

##Feedback When you're done, fill out this feedback form and get started with the homework!