Our newest assignment is to create a progression of small web pages that demonstrate layout, responsiveness and then utilize W3C CSS to enhance the responsiveness of your page, and finally complete a single page utilizing all the W3C CSS tools to make a page with layout that is responsive, meaning it can be viewed on many different screen sizes
Assignment:
Work with the class, or read and work independently and develop 4 single pages, demonstrating layout, responsiveness, responsiveness with layout, and finally a full W3C CSS page:
1: Layout with HTML and CSS: W3Schools - HTML Layout
This page utilizes HTML and CSS to layout elements using the Header, Nav, Aside, Section and Footer classes |
2: Responsiveness with HTML and CSS: W3Schools - Responsive Design
This sample site uses simple block classes to "stack" elements when the screen is resized |
3: Responsive Page Enhanced With W3C.CSS: W3C.CSS
Building off the previous page the block classes are replaced with the w3-container, w3-row-padding and w3-third classes for enhanced responsiveness |
4: Full W3C.CSS Layout and Responsive Page: W3C.CSS Sample
This page utilizes many of the W3C.CSS features such as Header, navbar, drop down, card and container W3C.CSS features. |
- Mr.W