Nettuts+ Quiz #10: Basic CSS3 Techniques

Siddharth on Feb 18th 2012 with 44 comments

This entry is part 10 of 12 in the The Official Nettuts+ Quizzes Session
« Previous Next »

In 2012, we plan to take our quizzes to a whole new level with ones aimed at all languages and catering to all competencies and tastes. This month, we’re covering some basic concepts and techniques in CSS3.

The prime focus today is on the easier, more accessible portions of CSS3. If you’re a hardcore CSS3 fan, don’t worry — transitions, animations, gradients and media queries are on the way!

Siddharth is Siddharth on Codecanyon

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Siddharth

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hola! I'm the associate editor here, editor of Windows.AppStorm, the lead reviewer at CodeCanyon and a reviewer at ThemeForest. When I'm not working for Envato, I'm a web developer/designer with expertise in JavaScript, PHP and Ruby . I am passionate about web technologies and video games and I really think code *is* art. It's a well known fact that following me has brought people great fortune and a lot of cuddles!

Plus Premium

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

Nikolay
Question #4 is tricky. When I read “All of the above” I thought it means that it can’t be applied to all of the above.

http://www.ssiddharth.com Siddharth
Author
No, not tricky — it’s a goof from my part. I’ve now updated the wording to make it less of a train wreck.

Lucas C
Hey Siddharth!
Love these quizzes, keep ‘em coming, but is there anyway to make jQuizzy compatible with iPads and other tablets?
I always browse Nettuts+ and the other Tuts+ sites on my iPad, it’s great for consumption of the web, and it jars my reading to have to go and hop on my computer to complete these quizzes.
Just a minor irritation that would be great to fix. ;)

http://www.ssiddharth.com Siddharth
Author
Thanks, Lucas. Glad you’re enjoying these.
This version of jQuizzy was put together over a weekend. I’m working on the next version which has a ton new features including touch support.
Cheers for the kind words!

http://blue-fx.org zanzzy
undefined You scored 94.12%
“Undefined” ? :)

http://www.ssiddharth.com Siddharth
Author
Since you’re being a nice guy, here is the HTML I put in as the response that’s clearly not being parsed:
Great work! You're epic enough to listen to this!

jv
Am I missing something? I don’t see any quiz in any browser on the mac.
http://ashish.bogawat.com Ashish Bogawat
Hmm… Is it just me or is anybody else not able to see the quiz? I’ve tried different browsers, but the quiz panel is completely missing from the page.

http://www.ssiddharth.com Siddharth
Author
Check again? Our CDN was a bit wonky earlier.

http://ashish.bogawat.com Ashish Bogawat
Yep, it’s working now. And 94.12% isn’t too bad. :-)

http://carwynstephen.com Carwyn Stephen
Considering I don’t use a lot of css3, only rgba and multiple backgrounds/background sizing, I scored pretty well :) I just don’t like the vendor prefixes, makes for some messy code, it’s putting me off fully delving into css3.
http://thomasjbradley.ca Thomas J Bradley
I believe the answer for No. 11 is incorrect. The box-shadow property can take 6 arguments:
box-shadow: [inset] horz-offset vert-offset blur-radius [spread-distance] colour;
http://www.w3.org/TR/css3-background/#the-box-shadow
http://www.css3.info/preview/box-shadow/
http://css-tricks.com/snippets/css/css-box-shadow/

http://www.ssiddharth.com Siddharth
Author
Noted and updated. I actually marked the wrong answer as right in the engine. Fixed now.
Keen eye! :)
Adam
That’s right, it can take 6. So the answer is D.

Adam
Ah, Sid you must’ve fixed it right when I was taking the quiz!
http://www.ssiddharth.com Siddharth
Author
Indeed, kind sir! Thomas let me know earlier and I got it fixed.
Yes, I’m super sneaky that way!

Jonathan [JCM]
100%. So many questions about box-shadow.
Question #11 is my fav.
And nice video http://www.youtube.com/watch?v=PXYjgHC_Ycw&hd=1 LOL

http://www.ssiddharth.com Siddharth
Author
Well, I chose to focus more on it since it’s almost universally used and a has a lot of potential for mishap.

Raj
Hi Siddharth, in your in-place editor tutorial, you have done it for one value. I mean in the table what you created has only one value. What if we have multiple values? I can do it with multiple mojo files. But how to do it in a single mojo file? That ‘buffer’ thing takes only one. How to make it take multiple values?
http://net.tutsplus.com/tutorials/javascript-ajax/create-an-in-place-editing-system-one-step-further/
http://cmsmasters.net/ Evgeniy Shay
100% :)
Techeese
70.59% darn almost had the swagger :)
http://www.aakashweb.com/ Aakash
Nice quiz got 88.24%
Question #17 is trickier… liked it
http://unkardinal.com Shaun
maybe i’m just tripping up on the language, but how is #16 false? is it because it’s technically styling the corners and not the border specifically? seems to me the phrasing is wrong here…
http://www.iuditg.com Udit Goenka
Aahh..Daam I got 2 wrong, 88.24% secured. I love the video lol :D
Question 11 was a bit confusing, I thought it took 5 parameters, x-offset y-offset Blue Spread Color but then I released we can also accept inset which makes it 6. Overall it was fun.
kankaro
to bad… 58.82%… I need some practice to make familiar to me :D ini-way thanks a lot for the quiz :D
http://themeforest.net/user/dexterous Dexterous
I got 94.12%, the trick question (#11) got me. Great quiz Sid.
http://www.amitavroy.com/justread Amitav Roy
Wow nice quiz… learned a lot.
Rajiv
I got the swagger !
http://www.pricesinindia.net/ Bharat
Well done, got some new stuff here by participating in this quiz. Liked it.
suhail
good techniques to learn.
harish
i got 41.18%, excuse: never used CSS3! :D
http://blink-design.net Simon
I got tripped up on Question 11. I knew it was more than 5 but answer D “This is a trick question. The correct answer is not a choice.” makes it sound like there is no choice in arguments to box-shadow and they are all compulsory.
I would simply change it to “This is a trick question, none of the above are correct”
http://twitter.com/sagarranpise Sagar Ranpise
82.35% Some questions are really tricky :)
http://www.impressivewebs.com Louis
Hey, Siddharth. Love these quizzes. This is actually the first one I got 100% on. :)
But technically, one of the questions is wrong: Question #12 discusses the word-wrap property, but it has been removed from the CSS3 spec. See the note at the bottom of this section in the spec:
http://www.w3.org/TR/css3-text/#overflow-wrap0
It’s now replaced by overflow-wrap. I wrote about some changes to certain typographic properties here:
http://www.impressivewebs.com/new-css3-text-wrap/
http://www.cheap-recipes.net/ Jack
Scored pretty poorly (64.71%), definitely need to refresh my knowledge, but at least I didn’t try to cheat with google this time. Please keep these quizzes coming! It makes me feel like I’m in school again.
http://webdesignertutorials.com WebDesigner
Great work! You’ epic enough to listen to this! You scored 94.12%
http://paginas-web-madrid.blogspot.es Juan
Nice work! Congratulations for this site.
I like it!
http://cuturl.in vivek
scored 70.59%….used css3 very less….
Ravi
Almost there! With a little more work, you will have this man’s swagger! You scored 70.59%
NavMax
Hi Quiz doesn’t work in IE7 pls check
govind
I scored 64.71%. not good score… need to improve CSS3 techniques in real time.
http://www.tavanir.org.ir/amar/ Omid
wowwww!!!!!!!!
76.47%
I can’t believe it !
recently use css3 and don’t correctly understanding it but i can get a good result of this quiz !
yummy :)
Sunny
Great work! You’ epic enough to listen to this! You scored 94.12%
http://www.facebook.com/zyadao12 Zyad Sherif
Almost there! With a little more work, you will have this man’s swagger! You scored 88.24%