Web Design Project: Winning Design 1st Month



A little while ago, I challenged myself to create some web designs as part of my self-studies into web development. I’m almost 3 months in and have come up with 3 designs:

As part of the challenge, I needed to implement those designs in Codepen. And the winner of this month’s design challenge is….: Glitch!

Here’s the original design:


And here’s my implementation:

Glitch Implementation

Some of the Code:

First, I added html classes similar to below: <!-- Groups ------------------------->

… The purposes here is to add the boxes after ‘Glitch’ heading. I had 12 groups of these boxes which made it a very repetitive process. Second, I had to position all these elements accordingly so I implemented it this way: /* Global ********************/ .group-1, .group-2, .group-3, ...{ position:relative; width: 20px; display: inline-block; There were 12 groups…

View original post 335 more words

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