Placement Project Using HTML / CSS

This week I’ve been getting used to utilizing <div>, .class and #ID selectors more effectively for styling HTML in addition to learning a variety of positioning properties. Tying all these different elements together to form a cohesive end product has been tricky but it’s all starting to stick.

My latest project is an offshoot from one of the projects offered Coding Academy; this one had you creating a series of <divs> styled with .class selectors in CSS to sort out friends, family, and enemies. Here’s a screenshot taken shortly before I moved over to Liveweave to continue my work.

screen-shot-2016-12-06-at-9-52-16-am

Unlike my previous attempt where I leaned on html table elements like <th> <tr> <td> to order my content, this time it was a strictly CSS affair. Everything from <div> to .class selectors to positioning was called into play in order to generate a clean and visually appealing grid.

Here’s how it looked as it began to take shape in LiveWeave:

screen-shot-2016-12-06-at-10-17-07-pm

Here’s a look at some of the code:

So far so good! It’s obvious not everything is aligned perfectly but I decided to take a break for the evening.

> > >

12.7.2016

After 8 1/2 hours of riding in a UPS truck delivering packages I couldn’t wait to get home and try out some new ideas which were on my mind all day. I thought setting everything to “position: relative” would work to set all the
plant icons perfectly even from one another.

While it worked well for the top row, applying the same property to the bottom rows started throwing everything way off:
screen-shot-2016-12-07-at-10-32-04-pm

Oof, what’s causing that? I decided to let sleeping dogs lie and just manually adjust the height and width of the remaining elements. While “eyeballing” leaves a lot to assumption, it’ll have to do for now. After some tinkering with “left” and “top” properties everything looked pretty okay to me:

screen-shot-2016-12-07-at-10-10-49-pm

Much better right? However, the rich detail of the plant icons makes the green background feel flat in comparison. Feeling ambitious, I researched how to add a nice gradient to the background. Since yellow is synonymous with sunlight and growth (as well as complimentary to greens) it was the logical choice for my gradient blend:

succulent_cacti_chart

And with that, I think this little project is a done deal. I’m sure in a month this will look primitive in hindsight but right now I can’t stop thinking “Wow, did I just code that by myself?”

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s