This is a page created purely to show how html, css and javascript work together. It was put together by Prof. Michael L Kelly for the students of his Graphic Design Intensive II section and should be seen as illustrative, not exhaustive. That is to say, students are expected to walk away from this with a better sense of coding, not comprehensive knowledge of same.
Whose project do you want to know about?
This is a map of fictional addresses for the students in the section. Addresses were randomly generated and any proximity to actual residences is purely coincidental. Any humorous connections are incidental and random.
To my knowledge there are two main approaches that one can take to creating grid structure on a page through CSS; Flex and Grid. Each allows for the building of a structure with flexibility. I have used Grid less, but I (and others) believe its naming and syntax is a little clearer, so might be the better place to start. Here's just a sense of that. More complex grid structures can be created by placing blocks within blocks.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec ullamcorper diam, vel ultrices turpis. Vestibulum scelerisque libero quam, eget interdum leo rutrum ac. Vestibulum pretium gravida ex in ultrices. Morbi tincidunt ultrices magna, at venenatis nulla tempus vitae. Aenean et metus libero.
Integer consectetur laoreet tellus, ut elementum neque rutrum quis. Nulla volutpat sem sit amet purus ullamcorper, consectetur pharetra leo sodales. Nam sollicitudin ipsum in leo euismod tristique.
Integer tortor nisi, fringilla vel ornare non, finibus eget neque. Suspendisse potenti. Quisque nec venenatis ligula. Nullam in justo tempor, ornare augue ut, auctor odio. Aliquam ornare consectetur nunc nec viverra.
Aliquam efficitur convallis leo, in euismod est aliquam ut. In enim diam, molestie a tempor vitae, pulvinar ut neque. Ut tincidunt lorem purus, a auctor ante iaculis eget. Nulla lobortis finibus nibh sit amet pulvinar. Cras sed ipsum non metus faucibus ultricies.
Donec venenatis vehicula turpis a venenatis. Sed ac vulputate risus. Ut elementum odio eu tortor sodales luctus id eu odio. Maecenas consequat venenatis nisl. In imperdiet cursus sodales. Nunc ac accumsan ante, sed iaculis nisl.
In hac habitasse platea dictumst. Phasellus diam erat, imperdiet vitae fringilla ac, molestie eu nisi. Aliquam tincidunt diam nisl, ac tristique urna volutpat a. Donec porta semper varius. Suspendisse potenti. Donec pharetra vulputate vestibulum. Ut sodales enim purus, quis consequat nisi maximus quis. Donec ut bibendum augue.
Cras dictum augue hendrerit consequat congue. Aliquam lobortis quam quis eros rutrum consectetur. Nulla leo nunc, dignissim et mauris sit amet, luctus vulputate magna. Mauris nec nunc vel elit pellentesque aliquet. Maecenas tempor augue id augue ullamcorper, quis feugiat arcu porta.
Aliquam tincidunt diam nisl, ac tristique urna volutpat a. Donec porta semper varius. Ut tincidunt lorem purus, a auctor ante iaculis eget. Nulla lobortis finibus nibh sit amet pulvinar. Cras sed ipsum non metus faucibus ultricies.
Integer hendrerit, est ut ultricies molestie, neque dolor eleifend nunc, eget sagittis mi quam nec lectus. Maecenas non odio turpis. Nullam eu tempor massa. Vestibulum rhoncus velit sit amet libero faucibus, eget ullamcorper nisi placerat. Nunc at diam eget mauris dignissim porta id eu sem.
Duis turpis sem, posuere et varius vel, bibendum vitae urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sollicitudin sit amet nibh in rhoncus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla malesuada ipsum nec massa convallis, eget consequat dolor tristique. Pellentesque sit amet sapien consequat, blandit dui a, eleifend mauris. Maecenas gravida odio ac finibus vestibulum.