An overview of Week 03: “Responsive Design Basics”
Making sure everyone, no matter their device, gets a clear into your words.
Welcome to the round up of week 03. As a reminder, you can always refer back to the syllabus along with the ever growing schedule for things that are coming up.
As a reminder, the schedule of the class has been updated until our spring break, live and in color on the Google Doc and Canvas.
Tying up loose ends.
Continuing where we left off last week, we dove right into HTML class attributes and how they work compared to ID attributes. From there we touched on other common CSS stylings, including: letter-spacing, line-height, and background.
Welcome to responsive design, your new digital friend.
Starting off this segment with a comparison of the New York Times and Quartz, we had an in-class discussion of what makes a website responsive, and how it’s more than just visuals. This led into a deeper exploration of block level elements and why they are so important to the structure of a responsive site’s HTML. You should have been there, it was delightful.
We made an ugly website that illustrated what happens when you use percentages instead of pixels to have nice, fluid websites. Since my students are rad (and better than your students), I called on them to figure out what lines of CSS were needed to make a two-column layout, and of course they nailed it.
But there is, “one more thing…”
That, my friends, is our very first long-term assignment. Introducing…
The Personal Website Project™
Magical and revolutionary website design and development.
This project will be due March 18th, 2016 at 9am. Your website must contain the following:
- Built using HTML, CSS, and JavaScript.
— This site must pass the W3 HTML Validator and the W3 CSS Validator. These two tools check your markup for errors, so feel free to use this as a resource during the development of your site.
2. Responsive.
— Remember that responsive doesn’t just mean visually, but also taking into consideration the file sizes of the imagery on the site. Will things load fast for visitors on a slower connection?
3. Utilize one custom web font.
— Let’s break outside of the Arial and Times New Roman bubble. There are plenty of font options for you at Google Fonts and Typekit.
4. 10 examples of things you’ve written that are available to read online, and an accompanied image for each article.
— Roll up your responsive design sleeves and really think about layout here. What options are there that will allow for a clean reading experience for all screen sizes.
5. A way to contact you.
— Pretend this will be a website you will send to a future employer or internship. If they dig what you do, how will they reach out to you? Email? Twitter? Carrier Pigeon-powered P.O. Box?
6. This site must exist on the internet.
— We should be able to visit a URL in our browser and check out your site.
Since this is going to be a technical intensive project, I will be hosting office hours in the classroom/lab for an hour before class starts, every Friday at 8am. Along with that, I’ll be available after class until 12:30pm, same location. Ask me your questions, I’m here to help.
So this leaves us to this week’s homework assignments:
Due by Friday (2/19) at class start, 9am. All submissions timestamped after then will be considered late.
- Start gathering the content for your personal website and show me your progress. There will be an assignment in Canvas for you to access and upload a file. It can be anything from a screenshot of your mood-board on Pinterest, to a camera phone photo of your sketchbook, to a digital wireframe built in Photoshop, to a plain-text file. Anything that can be uploaded to Canvas, send it on over. I want to see your mindset of what you are looking to build for your site. Not only will this help you with chunking your project into manageable, bite-sized portions, but it will give me insight of what priorities I should focus on in upcoming lessons.
- Your weekly personal writing assignment on your Medium page based on the subject or beat that you plan to follow throughout the semester. Hannah will be grading these by 2/26.
- Read Read “Black Teens Are Breaking The Internet And Seeing None Of The Profits” by Doreen St. Félix. and write a response on your Medium page. I will be grading these by 2/26.
Due by Friday (2/26) at class start, 9am.
- Comment on at least one of your collagues’ essays. We encourage constructive dialogue.
Head spinning this week? Here’s some resources to stay grounded.
—
That’s it! If you have any critical feedback, you can reach out to me at jgreen18@artic.edu and Hannah at hlarso2@saic.edu with any questions or concerns.
If you prefer to be anonymous with any feedback, you can send me a message here on ask.fm. Just begin your message with “NAJ:”.
Don’t be afraid to let us know how we can improve the class.
Happy writing and coding, and see you next Friday!