whithub/turing-bistro

An exercise in basic HTML and CSS

The Turing Bistro

Fork this repository and style the index.html in this repository using any of the stylesheets in the css folder. You may work in pairs or individually.

You have two constraints:

• You can't change any of the HTML markup
• You can't use JavaScript

Beginning

• Center the container
• Remove the underline from the hyperlinks
• Change the style of the hyperlinks when a mouse hovers over them
• Prefix each of the menu prices with a dollar sign ($)

Intermediate

• Make the items in the navigation align horizontally
• Style the menu items like a traditional menu you'd find at a restaurant
• Float the Turing Logo to either the left or the right

Challenging

• Move the announcements to a side bar
• Gradually transition the color of a hyperlink when a mouse hovers over it
• Make the page responsive to different screen sizes (desktop, tablet, mobile)

Wrap-Up

• Submit a pull request with your page.
• Let's go around for 1 minute each and give a lightning introduction to your page design.
• Revisit your gist from the warm up. What areas are still unclear to you.

Resources

• Learn Layout
• CSS is Awful
• Learn CSS MDN
• Quirks Mode and Strict Mode
• Using the viewport meta tag to control layout on mobile browsers
• Safari Web Content Guide: Configuring the Viewport
• CSS Transitions
• CSS Transformations