{"id":1205,"date":"2008-10-17T05:45:46","date_gmt":"2008-10-17T12:45:46","guid":{"rendered":"http:\/\/css-tricks.com\/?p=1205"},"modified":"2008-10-15T12:55:36","modified_gmt":"2008-10-15T19:55:36","slug":"how-would-you-recommend-a-novice-get-started-using-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-would-you-recommend-a-novice-get-started-using-css\/","title":{"rendered":"How Would You Recommend a Novice Get Started Using CSS?"},"content":{"rendered":"<p>This question was sent in by <strong>Nikita James<\/strong>.<\/p>\n<p>I get this one a lot and it&#8217;s surprisingly difficult to answer. The problem is that the question doesn&#8217;t include the persons background, which will in many ways determine the best course of action.<\/p>\n<ul>\n<li>Are you literally just getting started in web design? As in, you have never designed a website before?<\/li>\n<li>Have you designed web sites before, but never with CSS? As in, you are coming from a table-based mindset?<\/li>\n<li>Have you designed sites (graphically) before, but never done the actual coding?<\/li>\n<\/ul>\n<p>My favorite analogy is that learning web design is like learning to play the guitar.<\/p>\n<p>When you get your first guitar, you have stars in your eyes. You are picturing yourself on stage rocking out with throngs of screaming fans. Or at the very least, you are imagining yourself playing Dave Matthews Band songs on the porch of a frat house increasing your chances of getting laid that night. But in order to get there, you have a lot of practicing to do. So you buy a book. It shows you how to make a G chord and a Dm chord. Then you learn all the notes in the C Ionian scale and learn some finger exercises. <strong>Great<\/strong>. Now you are bored stiff and the guitar goes to the pawn shop.<\/p>\n<p>You need to something to sink your teeth into! Something fun, something to keep you playing and practicing, so you can keep that excitement going. Maybe that &#8220;Step 1&#8221; should have been to learn a few simple chord shapes and then learn a <a href=\"http:\/\/www.guitaretab.com\/s\/social-distortion\/17770.html\" rel=\"noopener\">super easy Social Distortion tune<\/a>.<\/p>\n<p>This is just like web design. You are all excited to build an awesome looking website. So you go out and buy a book. It tells you all about how you should be using XHTML 1.0 STRICT and what an unordered list is, what the details of the box model are, and how to remove links from underlines with CSS.  Now you are bored, yawning, and that original spark of excitement is gone.<\/p>\n<p>Instead, here is what you do. Go out and get yourself a domain name (from GoDaddy or the like) and get yourself some cheap hosting. You need to learn how to do that stuff anyway. Then you get yourself a template. That&#8217;s right, a template. No, it&#8217;s not cheating, we&#8217;re learning here. (Free ones <a href=\"http:\/\/www.oswd.org\/\" rel=\"noopener\">here<\/a>, or nice paid ones <a href=\"http:\/\/themeforest.net\/\" rel=\"noopener\">here<\/a>.) Upload that template to your new hosting and go visit that site on the web in a real browser. If you are like me, you still get a grin on your face when you see that website come up for the first time. I&#8217;ve done this 100 or more times and I still smile when I see it. It&#8217;s the birth of a website. A place you will bring to life!<\/p>\n<p>Now you have the ultimate learning environment. Start poking through that code and making changes and seeing what happens. <a href=\"https:\/\/css-tricks.com\/new-screencast-introduction-to-firebug\/\">Learn to use Firebug<\/a> so you can understand structure easier. <a href=\"https:\/\/css-tricks.com\/new-screencast-designing-for-wordpress-part-one\/\">Install WordPress<\/a> and play with the template. See what you can make happen. <\/p>\n<p>That is how you learn CSS. Experimentation. THEN, you go buy a book about CSS. That book will make 10x more sense now that you have something to relate it to.<\/p>\n<p>That&#8217;s why it depends on how you are coming into this. If you&#8217;ve been making sites for years as tables, maybe a book about CSS will do you good right out the door. For you, <a href=\"http:\/\/simplebits.com\/publications\/bulletproof\/\" rel=\"noopener\">Bulletproof Web Design<\/a> is probably a good choice. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>This question was sent in by Nikita James. I get this one a lot and it&#8217;s surprisingly difficult to answer. The problem is that the question doesn&#8217;t include the persons background, which will in many ways determine the best course of action. Are you literally just getting started in web design? As in, you have [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":2515,"url":"https:\/\/css-tricks.com\/excercise-to-get-better-at-web-design\/","url_meta":{"origin":1205,"position":0},"title":"Exercise to Get Better at Web Design","date":"April 8, 2009","format":false,"excerpt":"Getting better at anything takes considerable time and effort. Feel like you are in a rut with progressing your web design skill? Try this: Find a web site you really love the design of. Maybe browse a design gallery. Open up your design program of choice and try to copy\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":339461,"url":"https:\/\/css-tricks.com\/web-languages-as-compile-targets\/","url_meta":{"origin":1205,"position":1},"title":"Web Languages as Compile Targets","date":"April 30, 2021","format":false,"excerpt":"Jim Nielsen quoting Eric Bailey: He references an example on Twitter where someone noted you can use the <details> element to \u201ccreate a native HTML accordion,\u201d to which someone responded: \u201cthis works without Bootstrap? \ud83e\udd2f\u201d What\u2019s the problem here? From Eric: the problem that arises from this situation is that\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/details-summary.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":186094,"url":"https:\/\/css-tricks.com\/get-started-web-design\/","url_meta":{"origin":1205,"position":2},"title":"How To Get Started in Web Design","date":"October 17, 2014","format":false,"excerpt":"Here's an answer to how to get started building websites that I fully endorse and isn't vague. This is going to cost a little money, just like learning to play the guitar requires buying a guitar and some accessories. This is also going to require a little time and mostly\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":299885,"url":"https:\/\/css-tricks.com\/music-and-web-design\/","url_meta":{"origin":1205,"position":3},"title":"Music and Web Design","date":"December 9, 2019","format":false,"excerpt":"Brad has a long history in music outside of being a web designer, and draws some interesting parallels. One is that he had reached for more complex music in an effort to become a better musician \u2014 and developers can do the same thing. The other is that the composition\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/musical-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":366468,"url":"https:\/\/css-tricks.com\/web-development-books-you-can-get-for-free\/","url_meta":{"origin":1205,"position":4},"title":"Great (and Free!) Web Development Books You Can Get Online","date":"June 27, 2022","format":false,"excerpt":"Right after \"Where is the best place to learn?\" perhaps the most commonly asked question I hear from folks getting into code is \"What web development books should I get to learn?\" Well, consider this an answer to that question as I've curated a list of books that are not\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/books-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374792,"url":"https:\/\/css-tricks.com\/finding-front-end-development-scholarships\/","url_meta":{"origin":1205,"position":5},"title":"Finding Front-End Development Scholarships","date":"November 16, 2022","format":false,"excerpt":"I'm often asked where to learn web development. The answer varies, of course, and we've published a few posts on the topic over the years, the most recent of which was Chris taking a stab at different learning paths in 2020. The answer doesn't have to be school. But sometimes\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/education-brackets.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1205"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1205"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1205\/revisions"}],"predecessor-version":[{"id":1208,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1205\/revisions\/1208"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=1205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}