These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
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.
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.
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.
Here are a few CSS features you have up your sleeve that you might want to include in your garden:
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:
Once you have a clear and concise idea of what your garden will look like and what features it will have, get styling!
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.
$ git push origin master
).