I feel like my semester started yesterday, yet it is already time for midterms. My previous post actually talked about the midterm due for my MMP 350 class. This one is about the midterm due for my MMP 240 class.
The project is still the same: Primavera de los Realizadores, and the approach still is “mobile first.”
Usually, I use bootstrap, so it kind of does the work for me. I do not have to write too much media queries since this framework already comes with a lot of rules that do the magic.
This time, the exercise is to make that magic happen myself without the help of any framework. The requirements for this assignment were to make a good use of the HTML semantic tags, to use media queries, scalable fonts and CSS resets to come up with a home page and a schedule page for the website of the event.
First of all, a little bit of briefing, also part of the assignment: The project statement, the sitemap, wireframes for mobiles and tablets and final style tiles. Everything is in this pdf.
Now, let’s look at what I presented in class. The home page and schedule page. Open these links and try to resize the window of your browser.
And now let me explain: I purposefully did not use CSS resets because it always seems to cause more work in the end. So why do not take advantage of the browser default styles and then style each element I want to be different? For the fonts, I used the Chris Coyier technique, published in CSS TRICKS. I find this to be a very clever way to combine the use of rem and em. So I wanted to practice. As for CSS, following the mobile first concept, instead of writing custom rules for smaller screens, the core of my CSS is coded for mobile screens and my media queries take care of screens bigger than 768px (from iPad portraits up).
Note that this is a “work in progress”. Next step will be to work on a responsive drop down or slide in menu. Yet, it strikes me that this is going to be our next assignment. I will let you know!