In this assignment you'll get the opportunity to let your new styling skills take the lead. It's time to be creative! Let's start with a bit of background on where the inspiration for this assignment came from.

The Viking CSS Garden is inspired by the CSS Zen Garden. The CSS Zen Garden is a project that allows front-end developers to submit their own designs and styling for the exact same markup. It's incredible the differences you see in the outcome of this exercise! Have a look at the garden to see for yourself. Our version of this exercise will be similar in it's workflow.

You'll been given a raw HTML file with exactly zero styling. It is your task to make it pretty. Be creative! Have fun with it! Remember all the CSS tricks and tips you've learned along the way. Don't be afraid to let your individual creativity and ideas shine here, this is all about standing out and making something that looks visually awesome from something that starts as visually bland.

Getting Started

1. Fork and clone the Project Repo on Github.
2. Add your name to the README file, commit the change, and push to your fork.
3. Now comes the fun part!

Use Pesticide to Keep Your Garden Bug-Free

The most useful browser add-on you can use while creating layouts is called "Pesticide." When activated, every element on the page will be surrounded by an easily visible border so you can see when things are out of alignment. You can use it to debug your own layouts or to see how other websites have been constructed.

Use this add-on for every CSS debugging task from now on!

Install the "Pesticide" add-on for Chrome or for Firefox.

Styling Your Garden

Now comes the fun part! Open up the index.html file in the repo and have a look around. Open up your browser and have a look at the unstyled markup. Look at the element structure and how tags are nested. Take notice what CSS classes and IDs are used and how you'll go about targeting elements. Try to think of the markup as clay that your CSS will mold into a stunningly styled sculpture. But before you dive into coding, it will help you greatly to plan ahead.

Here are a few details to keep in mind while planning, designing and styling your garden.

Tips and Suggestions

Here are a few CSS features you have up your sleeve that you might want to include in your garden:

1. Floats
2. Absolute Positioning
3. Background Images, Colors and Gradients
4. Fonts and Typography
5. CSS3 Transitions and Animations
6. Use a CSS reset

Planning Your Garden's Growth

Before you get started coding up your styles you'll need a plan. It is best to have a vision here. A quick mockup or sketch will go a long way! There are plenty of online/native tools you can use to draw or sketch. Don't forget the simplest solution is a pencil and piece of paper!

Have an idea first and then plan out how you'll go about positioning and manipulating the giving elements into that vision. Start from a high level and work down into more detail. Here are some questions that might help you arrive at some ideas:

1. What is the overall theme of your garden?
2. What mood or emotions do you want your garden to inspire?
3. What is the main eye catcher? Or are there multiple points of focus?
4. What colors do you want to use? Decide on a clear color scheme!
   1. Need help with color schemes? Check out Paletton
5. What shape(s) do you see in your garden? Round? Square? Triangle?
6. What bells and whistles does your garden have?
   1. Hovering features?
   2. Clicking transitions?
   3. Looping animations?
7. If you had to give your garden a name, what would it be?

Once you have a clear and concise idea of what your garden will look like and what features it will have, get styling!

Deploying Your Garden

Once your garden is all styled and magnificient be sure to deploy it! Since you're pushing it to Github anyway your easiest route would probably be Github Pages as explained in the lesson on deploying static HTML content.

Finishing Up

1. When you're finished with all tasks, push your changes up to your fork (aka $ git push origin master).
2. To submit your assignment, create a pull request from your fork to the main upstream repository.

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!