Coding: Don’t Fear It

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.

Student Projects

Whose project do you want to know about?

[Student] is taking [this piece of art or design] and sharing it with [this audience] by adding [this] to it.
Where the Work is Done

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.

Living the Grid

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.

Fernanda

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.

Sanjana

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.

Chloe

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.

Yukiko

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.

Ashley

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.

Jamie

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.

Mary

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.

Mya

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.

Preston

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.

Emma

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.

Wes

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.