Nettuts+ Quiz #1: Beginner CSS

Siddharth on May 6th 2011 with 440 comments

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

In the first of many Nettuts+ quizzes, you’ll be able to test your knowledge by solving some nefarious questions. But don’t worry, we’re starting today by asking you some extremely beginner level CSS questions. Get crackin’ after the jump!

Please select an option

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

Anthony Cook
damn only 73.33% This is fun hehe :)
http://www.youtube.com/user/LocalHostGaming Logan
I’m feeling pretty good, I haven’t used CSS in a month of Sundays yet I still got a 93.33%. If it hadn’t been for that meddling question 11, I would have gotten 100%!
Jeff
I take issue with the wording of some of these questions.

http://www.ssiddharth.com Siddharth
Author
I’m all ears. Let me know which part is troublesome and I’ll have it restructured.

ClaCS
Could you put the number of the question in each slide?? 10x! :)

http://abrightconcept.com Gabriel
I had a little difficulty with question 5, I believe, the one with the width, padding, and margins. The question asks for the “effective” width of the div, but this depends upon the definition of “effective.” For example, we could be talking about the space inside the div, which is what I think the question was looking for, but it could also refer to the clearance it creates, since sometimes divs are also used to displace the elements around them.
If the answer is inside the div, I believe it’s 120px, but the div would have a total displacement of 160px, I believe, which is also important.

http://danaemc.com Danae
Ah, 80%. The first one threw me off. I was like, trick question argh! And the {p div.selected} got me confused between ancestor and descendant sheesh. Good quiz though! Hope to see more.
http://mike-mcmullan.clom Mike
Dang, 93.33%. I have to admit question #14 was a little confusing, I had no idea.

Duncan
Exactly the same here;), only 14 wrong..
I look forward to more of these quizes!

Ricardo
Great quiz! But I have to study now D; (80%)
http://circuitbomb.com Circuitbomb
Cool quiz, I actually think it would be a great idea if you could click the ones you get wrong and go back to read the question you missed, doesn’t help much just giving the number and answer at the end.

http://www.ssiddharth.com Siddharth
Author
Oh, absolutely. I whipped this script up in a hurry so couldn’t quite get this feature ready. Hopefully, I’ll be able to bake in these features for the next version.

http://www.sociatic.com Kwame
Hi Siddarth,
Nice idea! Is this quiz script available for download anywhere? I scored 80%. I think it isn’t bad.
//forrst.me/adrusi Adrusi
Also, the entire background for the next and previous buttons should be part of the link, and the entire block around the radios should be a label for them, kept missing the buttons.

Rizwan
Yay, I got 100%. It wasn’t too hard though, you should also make some intermediate and advanced quizes.Thanks!
http://ryancannon.com/ Ryan Cannon
I’m not sure 10 is a very good question. Given:
<p>
Text
<span style=”display:block”></span>
This seems pretty relevant.
</p>
Will render with a line break in between. Also, would be great to show the questions along with their correct answers.

http://www.ssiddharth.com Siddharth
Author
With respect to the snippet given in the quiz, I think most users got what I intended to say.

http://www.ssiddharth.com Siddharth
Author
Whoops. Misinterpreted your post. The questions was meant to say inline, not block. And since spans are inline anyway… you get the idea.
But in the given example, I’d just use a generic block level element, wouldn’t it?

http://voices.wooster.edu Jon
I was surprised to see that 100 because some of them were a little tricky. I look forward to the rest of the quizzes.
http://fakeuser.com Fakeuser
Question 10 has no correct answer, all of the properties are relevant.
SPAN is an inline element and display:block will make it a block element.

http://www.ssiddharth.com Siddharth
Author
Whoops! It was meant to say inline, not block. Fixed, thanks!

http://www.rizzif.com/ Francesco Rizzi
Sorry, i don’t agree with Q#1 “correct” answer. (regardless: i made another mistake, so this is not to try and get a perfect score :) – anyway: kudos for the idea of having quick quizzes like this. Looking forward to more

http://dridgett.com.au David Walker
Mind if I ask what is wrong with the correct answer for question 1? Seems rather correct to me. Unless you’re misinterpreting the distinction between ‘structure’ and ‘layout’.

David B.
Bam. 100% the first time. Makes me feel good!
http://giggleboxstudios.net Brandtley McMinn
Good quiz :) Got 93.33 though it made me stumble a little with the wording, but that makes it all the more meaningful to get the right answer.. my only problem is I can’t view the question I got wrong =\ Would be neat to have a tooltip styled pop up containing the question when the [X Wrong] button is hovered in the results.

http://www.ssiddharth.com Siddharth
Author
Yeah, sorry about that. I’ll rework the system to display the questions you got wrong for the next quizzes.
Thanks for reading. :)

Alex
How exactly is “display: block” on a span element considered irrelevant? Spans are inline by default so setting it to block may very well be relevant.

http://www.rizzif.com/ Francesco Rizzi
Agreed with Alex: I didn’t see the display: block as irrelevant on that question. Curious as to the reasoning behind that answer, thanks

http://www.ssiddharth.com Siddharth
Author
My bad, a typo snuck in. It was meant to be inline, not block. Fixed now.

http://thealiencow.com en
I guess you should use a block element instead of using css to make an inline tag block.
http://www.jeffrey-way.com Jeffrey Way
Was a typo. Sid fixed it just a bit ago. :)
David B.
Hah, didn’t even notice that that it said “block” I just sort of registered it as “inline” without really thinking about it as it wouldn’t have made sense otherwise.

http://www.ssiddharth.com Siddharth
Author
Haha. I did exactly the same when typing it up. Mind said ‘inline’ while my hands typed up ‘block’!

dan
booom 100% :D
http://thealiencow.com en
whats with #14 ? >.< (93.33%)
Allen
100%. Yeah. :-)
Siiron
100% on first try :-) – Not too hard.
http://johnsardine.com/ João Sardinha
More quizzes please :)
http://cl.ly/6Za2
http://ksarwara.com Kanwaljit Singh
Albus, is that you? You scored 100%
Bring it on, make it a bit tough :p
http://lauralynndesigns.net Laura
I think it would help if you showed the questions, cause I can’t remember which answers to go to which questions…and maybe through in some CSS tutorial suggestions at the end of the quiz as well.
By the way, great feature! This really helps show people how far they’ve come when studying.

http://www.ssiddharth.com Siddharth
Author
I’ll definitely include this functionality for the next version. Didn’t have much time this time so I just handled the essentials.

http://myspace.com Nouman
easy, 100% :)
http://lopini.deviantart.com/ Agustín
Exceeds expectations! You scored 86.67%
I was wrong on question #13 and #14.
Tunbosun
Wow 86.67% not bad
timbot
Great idea to have these quizzes! They help to keep the mind sharp! Any plans for javascript or php? That would be awesome!
http://bit.ly/cLZXGi Julian
86.67%, not too shabby :)
Bring on more quizzes!
http://habib-ryd.web.ugm.ac.id Habib
Haha, got 86.67%, misunderstand the question #5 & #14. For #5 I think it should be asking about total width, I totally confused by ‘effective width’, is it width of element that you could actually use, or it’s a total of defined width + padding. For #4, I didn’t read the question properly :P.
Kyle
I got 100%, but the span question did throw me. The display: block is required if you wish you change an inline element to display as block. So it’s reallty not a fair question. I’d suggest switching the display:block with margin:0 20px and see what they select.

Nouman
If I’m not mistaken, the choice was display: inline.
Making it useless on an element which is inline by default

Kyle
You’re correct. Strange I thought it said block. either way it would be the correct answer to chose.
I remember the good old days when I didn’t know what a block or inline element was. :P

http://www.pathnetcreations.com Jerald Johnson
“Outstanding, noble sir! You scored 93.33%”…. yes!!!
http://alisalem.me Ali Salem
w00t! ;)
http://localhostr.com/files/zTCX2nz/capture.png
http://gregmcausland.com/ Greg McAusland
100% !
Been using it for 5 years, so it would be fairly embarrassing to score lower! but I really enjoyed playing along none the less!
voting for a php/javascript/wordpress/insert web thingo quiz next! very fun :)
http://www.impendulo.net Joost Kiens
Very nicely done quiz. Is the script available?
Doesn’t the question on how to link a stylesheet depend on the doctype? Not that it really matters, there’s obviously only one correct answer.
Excuse my ignorance, but who is Albus?

http://www.ssiddharth.com Siddharth
Author
Albus Percival Wulfric Brian Dumbledore

http://dorianpatterson.wordpress.com Dorian Patterson
100% without breaking a sweat. This was easy!
http://pollyfolio.com Polly
LOL, “Albus, is that you?”
This is fun, looking forward to the next quiz!
Nate
Dammit! Only 93% :P
I think that’s pretty good for some kid who’s still a bit between beginner and intermediate :D
http://joecochran.com Joe Cochran
NINJA! I got 100%. If you keep making these, methinks I will start using them to test people we hire :)
http://dl.dropbox.com/u/7623798/nettuts-css-quiz1.jpg
Oh, by the way, From a UX perspective, it would be better if clicking anywhere on the box containing the answer selected it, rather than just the text. A clever hack for this would be to contain the input radio button inside label and style label as your box.
I know that technically isn’t correct, but the functionality is fantastic with no js.
had to open my editor and confirm I couldn’t just do <div for=”radio_button_id”>

http://joecochran.com Joe Cochran
Oh, I see your source does just that, but the box styling is on the <li>, would be great if that styling went on <label> instead. Great quiz nonetheless, looking forward to more!

http://www.teeplates.com Gavin Smith
100% – I need to get out more.
Shaq
I got 87%. It’s a good quiz, hope to see more in the future.
http://www.visual-blade.com Daquan Wright
Exceeds expectations! You scored 86.67%
Great quiz, as someone who dabbled in and learned CSS for years, it’s a nice refresher. I missed questions 13/15. :D
http://jondunbar.com Jon Dunbar
I must be getting rusty. 86.67%, got question 10 and 13 wrong
Guilherme Nagatomo
100% lol It wasn’t that hard. I want to see the intermediate, advanced, extreme and insane levels!
http://wpblazer.com Leo
lucky me! 100%.
http://www.devtuts.com.br/wp Rafael Angeline
Wow! Nice :D
“Outstanding, noble sir! You scored 93.33%” – I will have a good night after this XD
Anouck
Is Answer 13 correct???
http://www.adesignlink.com Chad P
There is a huge problem with the selections. They dont display the words. Ill try a different browser. i am using chrome

http://joecochran.com Joe Cochran
Screencap and chrome version? I can confirm it works fine in build 11.0.696.60 and 11.0.696.65 on Windows 7.

http://www.chrismcmanus.com this dude
agh! i gotta pull my head outta programming and get back into my css.
hanging my head in shame ( lame score hint: muggle) i am so going to redo this.
http://code-junkie.com Brannon
You should include the ability to share your result on Facebook and Twitter. That would probably drive more traffic to your site and let people brag about their scores to friends.
I got 100%, but I’m not sure I would say that this is beginner CSS. When I was almost a graduate in college as a web design student and working in two development firms as a web development intern, I’m pretty sure I would have gotten less than 50% on this test. If people don’t get great scores, I would think that they’re still doing pretty well.

http://www.ssiddharth.com Siddharth
Author
Yep, will be adding some social integration to the next version.
As to the difficulty of the questions, I don’t know, barring a few ones, I think most of these are pretty beginner level.