Today we learned about container elements, border-radius, fonts and icons, using classes and complex selectors, importing external stylsheets with <link> tags inside the <head> tag, and how to use JavaScript inside of HTML with the <script> tag. For today's assignment, we'll be
Resources
MDN CSS Reference
MDN JavaScript Reference
MDN DOM API Reference
Wire it up!
Recreate these layouts using your own colors, lipsum, and icons. Don't look at the source for the project; we'll do that together after it's all done. While the example gets fancy at smaller resolutions, don't spend time on that. You'll need a little JavaScript to make the dynamic parts work, and these layouts should test your full command of CSS and HTML. Ignore the navigation for getting between projects in your implementation.
[ ] Fill in the blanks with our TIY-Orlando mockup so that the .datePosted elements translate the provided date and time into a relative number of hours. Use the new starting point or make your code look like mine.
mema82
commented
9 years ago
Review
Today we learned about container elements,
border-radius, fonts and icons, using classes and complex selectors, importing external stylsheets with<link>tags inside the<head>tag, and how to use JavaScript inside of HTML with the<script>tag. For today's assignment, we'll beResources
Wire it up!
Recreate these layouts using your own colors, lipsum, and icons. Don't look at the source for the project; we'll do that together after it's all done. While the example gets fancy at smaller resolutions, don't spend time on that. You'll need a little JavaScript to make the dynamic parts work, and these layouts should test your full command of CSS and HTML. Ignore the navigation for getting between projects in your implementation.
.datePostedelements translate the provided date and time into a relative number of hours. Use the new starting point or make your code look like mine.