Tag: web design newbie

I Have No Idea What I’m Doing – An Introduction To CSS Grid

Jenn Clore

In my most recent class assignment, I was introduced to CSS grid. I read articles by Jen Simmons on the topic and watched instructional videos by Rachel Andrew. As I read along and watched the examples in action, it seemed easy and straight-forward. It couldn’t get any easier than actually writing out exactly how you wanted divs to be laid out.

As I watched the tutorial videos assigned and followed along, I thought to myself, “ok, finally something I can do.” But as with all of my projects so far, it’s never as easy as it seems. I often tell myself that I have no idea what I’m doing. This project was no different.

I was tasked with redesigning the index page of my Discography project and do the same thing but using CSS grid. In the original assignment, I used Bootstrap.

It was easier to layout most of my page in CSS grid. It turned out I was already using the Holy Grail layout, and I didn’t even know it. Way to be original. So that helped a lot with positioning and naming my elements.

I struggled with getting my header nav links to align to the left and be responsive. I was able to accomplish that using a bit of flexbox. Part of the assignment was to add a feature query. I tried out the initial-letter rule to add a bit of flare to the band description in the center of the page.

Caniuse says initial-letter is a no-go on Chrome, but with the @support rule, it should be seen in Safari browser and be skipped over in other browsers that don’t support the feature.

I can say that by the end of the project, I had a better grasp on CSS grid and its capabilities. CSS grid and flexbox seem easier to use than Bootstrap, in my opinion.

Check out my design using Bootstrap – http://www.clorecreative.com/PanicDisco/index.html

Check out my design using CSS grid – http://www.clorecreative.com/cssgridpatd/index.html

Overall, can say I spent more time on the site using Bootstrap so it has a more polished look. But the CSS grid site took less time to put together. If I had to choose one or the other going forward, I think I would lean toward CSS grid and flexbox.

 

 

Cultivating The CSS Community With CSS Zen Garden

Jenn Clore

Chugging along in my web design program, I have come up to the CSS Zen Garden project and came to a full stop. This website has been around for a long time, giving advanced and novice web designers a way to showcase their skills and the capabilities of CSS. My task is to go forth and do the same as designers in the past.

This project requires me to change the look of the CSS Zen Garden website by using CSS only WITHOUT TOUCHING THE HTML! Can this be done? Sure, the website has a library of successful attempts. But can I do it? That is the big question.

Throughout the course, we’re taught to learn from what others have done, to check out their code and find out their secrets. This website makes it simple by including every contributor’s html and CSS files.

To pick which designs to help inspire me, I searched through 218 designs.

CSS Zen Garden Library

Out of those, two designs stood out the most to me.

In the “Apothecary” design, it sets itself apart from all the rest with a turn-of the century, old school feel to it that none of the other designs have. The images, colors, and font choices give a cohesive look that is easy to read, unique, and simple. The CSS code looks simple enough, almost like something that I could potentially pull off.

In the “A Robot Named Jimmy” design, animation, bright colors and a simple to read font were used to bring an eye-catching whimsical feel to the design. Aside from the Apothecary design, this design used the full SVG code to add the graphic details. Some CSS transitions were also utilized in the design.

After delving a little more into the code of other authors in the library, I think I may be ready to start laying out my own interpretation of CSS Zen Garden. First I created a moodboard. I started one not really having any idea on what I was going to create. After researching “soothing colors”, it all stemmed from there. You can check out my moodboard by clicking here.

Mobile Wireframe

Then I moved on to my wireframe. I was taught that the mock-up should be in grayscale to not distract the client from the layout. Since the client is me, I went ahead with full colors.  I designed it in Canva. It’s a free tool for people who aren’t graphic designer to build something beautiful. I use it quite often in my job. I originally started out trying to create my mock-up in Illustrator, but I’m just not that comfortable with it yet. As you can see in my wireframe on the left, I’ve got some pretty grand visions on how I want my version of the CSS Zen Garden to look like. I didn’t feel that I needed any images but I wanted to stick with gradients, geometric shapes and the clean color scheme. I will incorporate the circle image below that I pulled from Canva. I hope to use it in the background.

Now I am in the process of creating my version of CSS Zen Garden. It is still a work in progress, but you can see the most recent updates by going to –

http://www.clorecreative.com/ZenGarden/