I added several responsive items to the site. This included a youtube video, Google calendar, web cam and a table. Creating the responsive table was particularly challenging.
A few things I did when creating the table:
I designed all aspects of the site. The wire frames, visual designs and logo were created in Illustrator. The HTML and CSS were hand coded.
A few things I learned while working on this project:
In the main navigation, I wanted to have a rollover effect where a star would appear before each link. When I designed this, I had no idea how I would make it happen.
To make content appear before the navigation item I used nav a:hover::before. For the star, I used content: with the unicode hex value for "Black Star" and then changed the color to the appropriate shade of red.
This worked, but caused the nav item to slide to the right when the star appeared. I solved this problem by using margin-left with a negative value.
This was a JavaScript programming project where the goal was to exchange one set of an image and links, with another set.
The Solution: