This is a somewhat cleaned-up version of the demo I did in class. Feel free to look through and try out the pieces it uses.
Note, you can take a look at media queries in the wild by viewing the source on this WordPress site and searching for media.
You will see also that I’ve added a <meta> tag to the top of the html. It is:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
This tells the page to think about the size of the page in a manner consistent with regular sizing. The problem this solves is that the pixel size and densities of mobile devices are vastly different from their regular desktop cousins. Without this meta tag, the media query will not engage on most phones.
The goal of this assignment is to encounter and handle real world web design considerations. Go to http://urgencycareclinics.com. This is a web page that was written without the benefits of html5 and CSS. Your job is to rewrite it, yet include all the information it currently includes.
Use the tools at your disposal. Maybe flexboxes or float layout will help. Maybe a modal dialogue will help. Add images where appropriate, hover effects…whatever it takes to make this companies web site excellent and modern.
Look elsewhere on the web, too. What are great web sites today doing. How can you apply those techniques to the needs of this business?
Consider the user. Who is the likely target audience for this company? How will they use the web site?
Today we talked about flexboxes. At their most basic, these powerful tools are quite simple:
A container with display: flex (we also used flex-flow: row wrap;)
Items within the container. We used flex: 1 as a base, and flex-basis: 200px; to give some minimum sizes so it would wrap.
Here are a couple resources that will help you take this to the next level:
Here are the demo files for the tooltips. The key components are:
a class called toolitp that has a position of relative with a data-tooltip attribute with whatever you want the tooltip to say.
A style for .tooltip:hover::before that forms the triangle pointing at the item they’re hovering over
A style for .tooltip:hover::after that has content: attr(data-tooltip). It should be positioned absolute and moved to fit in the appropriate place.
That’s it. index styles
Triangles can be useful tools–often to point at something on the screen, like an active menu or a tooltip message. The link below gives a great explanation of how to create triangles using CSS.
Once you have a handle on it, try putting a few in your page. Point them in different directions, create different sizes. Then try using them for a purpose – add one to a menu item, maybe.
Animation of How CSS Triangles Work
Here are the files for my modal dialogue demonstration. Feel free to examine them to help you understand how to make a modal dialogue box function correctly. The image that is the background won’t be there…and that’s sad.
For this warmup, please start from scratch and write a page with the following:
An image with a fixed position.
A link styled up like a button that has a hover effect.
Start from scratch, please, and write a page that uses all the skills we’ve learned so far:
- Float Layout
- Good html structure
- images and links
- multiple pages and use relative paths to tie them together
- external stylesheets for consistency
- Good folder structure for easy site management (e.g. have a dedicated images folder)
The topic is once again your choice. Please make it something meaningful — real or realistic sites will teach you more about design than something goofy where nothing really matters.
Today we played more with float layout. In the attached html file, I have a three-column layout that uses two sidebars: one floated left and the other floated right. Within the articles I also have floated the images to the right. See the attached html for details.
Note, there are a few things I have done here that we haven’t talked about here, but they aren’t critical to the float layout. Feel free to play around with them if you want.