- See more at: http://blogtimenow.com/blogging/automatically-redirect-blogger-blog-another-blog-website/#sthash.YsVbCxL0.dpuf Journey to Becoming a Web Developer: Build This Button in CSS Challenge

Tuesday, December 31, 2013

Build This Button in CSS Challenge

Today we were given the the challenge to build this button
using just CSS. We first did one of our own then we were split into two teams where we were challenged to build it as a team. When doing my own I first thought it would be difficult because we were not allowed to modify the html. So I decided to do a search on how to use CSS to create buttons. One website showed how I could use display block within my anchor element selector to create a block, so I used that. Then I used properties like font-size, color, height, width etc. to get my block to look similar to the original block. I got stuck on making multiple blocks, so I did a web search again and found that to do this I needed to create two block shadows like so box-shadow: 0 0 0 3px #888888, 0 0 0 6px #000;. That worked, but it didn't really give me the desired effect.  When we started the team challenge my button was not complete, but there were others on my team who had completed theirs. When looking at my team members code I saw some things that I could have done differently. Since we could not touch the html I could have used text-transform to make all of the letter capital. I could have used 4 different box shadows. In the code the team used each line was to show each of the margins.  I also learned that you can use CSS symbols to get those stars to appear.
This is the type of question that is asked in interviews. Now that I have tried this on my own and now know the solution. I would attempt to do this differently. I would first figure out what type of block I would need then I would look at the code to see how many margins I would need. I think that once I am able to figure those out then the rest will be easier for me.

No comments:

Post a Comment