PUT IT IN YOUR CALENDAR.
Here’s some helpful info for learning Foundation.
Please email the following information to me before class on Tues Nov 17:
- A working link to your WordPress site
- A link to your parent theme’s site
- A detailed description of your Child Theme and how it is unique from the Parent
Here’s the CSS for my media query test page…
Also, here’s the link for the responsive logos I mentioned: http://www.responsivelogos.co.uk/
And possible solutions for responsive/scalable images: https://css-tricks.com/which-responsive-images-solution-should-you-use/
Web users are using mobile devices more than ever to access content on the web. Create a site that accommodates that shift. In fact, you assignment is to use @media (media queries / here’s a link to some common device queries and their CSS / test it out at W3Schools) to create a site that offers different content based on the device that’s viewing the site. What kind of content would shift based on the user device?
And because the site needs to be responsive, use a grid-based approach to the layout. This will make your site scalable and responsive, without compromising aesthetics.
There are a number of methods for such. Here is a straight-forward approach on css-tricks.com. Here’s another from sitepoint.com. (Don’t forget Flexbox) And there are lots more… And here’s a good tutorial on Lynda.com.
This is a short project (two weeks), so don’t get caught up in the details. Focus on creating a css-based grid, and then changing content per device, and what that content would be.
- Understand and implement the @media rule
- Create a css-based grid framework
- Create a responsive site that reflects different content based on detected devices
- Think creatively about how we use sites via mobile devices vs. desktop application
Due: Thur Oct 15
Check out this Complete Guide to Flexbox for more info about positioning your content…
Here’s a great list of resources that Jonathan sent after his visit last week:
Accessibility / Utilities
Organization / Resets
Plugins and Build Tools