Skip to content

Instantly share code, notes, and snippets.

@jmk2142

jmk2142/mstu5003.html-css.mini-problem.md

Created May 22, 2017 01:02
Show Gist options
  • Save jmk2142/b883d00fbb4865517a2d5c3e2b17bbcf to your computer and use it in GitHub Desktop.
Save jmk2142/b883d00fbb4865517a2d5c3e2b17bbcf to your computer and use it in GitHub Desktop.
Download ZIP
A Mini-Problem for HTML/CSS
Raw
mstu5003.html-css.mini-problem.md

Mini-Problem: Homepage

You might have noticed that I changed the theme of the first Project (next week) to a learning related context.

As such, the gist is: for this week's mini-problem, what I want you to do is build a at minimum, single-page personal homepage based on the kinds of things you learned via the FCC Exercises and your Collaborative Discussions.

It might be very helpful to think about the DESIGN of your homepage first, so you can have some sort of a rough idea of how you might IMPLEMENT your design and DEVELOP it via HTML and CSS. So to start planning think of the following different levels of abstraction:

  1. OBJECTIVES
  2. CONTENT REQUIREMENTS
  3. INFORMATION ARCHITECTURE
  4. INFORMATION DESIGN (Navigation)
  5. VISUAL DESIGN

See Jesse James Garrett for a brief overview of what these things mean. If you are really interested in being able to think about UX and how to break the process down into different levels of abstraction, you can checkout his nice little book Elements of UX.

You don't have to formalize this for the current task. Just think about it. But based on the 5 planes, here are the general questions to think about:

  1. What do you want to accomplish through this homepage? (You can choose your audience.)
  2. What content is required (e.g. text, images, videos, etc.) to accomplish your objective?
  3. How do you need to organize the information in order to accomplish your objective?
  4. How will users (will users?) need to do any navigating between information? How will that work?
  5. What are some of the pattern/consistent visual themes you want in your page?

What you want to think about is not only these questions, but also:

  • How do each of these questions relate to the knowledge and understanding gained thus far around HTML and CSS?
    • This might be a good collaborative discussion point.

Specifications

You have a pretty wide range and freedom to build what you want in terms of a theme. It is your page so as long as it hits the objective that you define, you're sitting pretty.

That said, there are some specifications I'm throwing in so that you address some of the core concepts of interest to us as budding developers.

CODE

  • Use a range of different elements and hierarchy to organize the information properly.
    • Try using an element or series of elements that has not been covered in the FCC tutorials.
  • Demonstrate that you can use repeated patterns of elements, hierarchy, organization across similar types of content. (e.g. See Meow Mix tinker problem and how I repeat organizing patterns across similar KINDS of content items.)
  • Use a variety of classes to CLASSIFY parts of your page.
  • Use ids to identify UNIQUE parts of your page.
  • Utilize a variety of different and new CSS selectors and properties.
  • Use a 3rd party site (e.g. Vimeo) that offers a content share / EMBED feature. This should be HTML code that you can embed into your page. Implement it.
    • Usually, the EMBEDDED code will have different attributes written in. Play with these to understand what they do and change it up to fit your needs.

SUBMISSION

For this homepage mini-problem, I think we can just publish it simply via either the Plunker or JSFiddle tool. Haven't decided what's easiest yet but I'll let you know soon enough. And, once published, you will be submitting the URL via Canvas.

We can transfer it to more permanent hosting solution later in the semester.

NOTES

You're not going to be graded based on how pretty your page looks. We are not a beauty pageant so please don't be "embarassed" based on meaningless comparisons with each other on this dimension. The reason we create and share, is to share what we learned and to learn from each other. To be able to see what other people learned and to be inspired to challenge ourselves to learn more.

This is something you must get into your heads now. ;-)

Also, you're not being graded on this task based on whether your code is flawless or not. It's your 1st webpage. I'm expecting it to have bugs. But if you share your mistakes with each other, that is how we can also help each other to fix these mistakes.

And... I'm more interested in fixing the mistakes in our heads rather than the mistakes in our code. We need to be comfortable sharing our weaknesses and to address our problems honestly, openly if we intend on fixing these.

One last thing along these lines:

FAILURE is our friend - get comfortable with it.

I do use the term failure often but I treat it fondly and as a friend.

  • Failure at a task is NOT failure of you as a student, a person, a community member.
    • It simply means some task you wanted to happen one way didn't happen that way.
  • Failure at a task does not mean you're dumb.
    • It just means you didn't know something at that particular time, something that you could know with the right effort later.
  • Embracing failure is courageous. Being courageous, gives us the power to put forth effort.
    • I REALLY value and respect people who share what they messed up. Let me really emphasize this... Please, feel free to share your major code f_ck ups.
    • If you show me you are working diligently to overcome those weaknesses, this will reflect greatly on you in my eyes, and in the eyes of your peers.

So, yep. That's our first milestone. As a preview, the PROJECT which we'll work on next week will be similar to this but in the context of a learning lesson and with an additional specification around building interactive (but still non-functional) interfaces.

Good Luck,

Jin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment