a:2:{i:0;a:1:{s:4:"data";a:1:{s:7:"entries";a:1:{i:0;a:7:{s:2:"id";s:3:"283";s:5:"title";s:33:"How Do You Start Web Development?";s:11:"displayDate";s:10:"05.14.2007";s:13:"attributeDate";s:10:"2007-05-14";s:4:"body";s:2121:"<p>While reading forums, blogs, and other web development related resources, I keep coming across people asking how to get started in CSS. They may have be table-converts or they may be new to the field, but the question keeps coming up.</p>

<p>In my opinion, a lot of people are going about it the wrong way. Sure they may be able to get a nice design that works across browsers and platforms and their code may validate. But look under the hood of a lot of those sites. The code can sometimes be just as bad as using a table.</p>

<h2>Where to Start</h2>

<p>I think that the key to succeeding in the field, is to begin by learning semantic HTML. Sure, you may have been using HTML for years while doing table layouts, but you are also the same people who were using nested blockquotes to increase your margins.</p>

<h3>What is Semantic HTML?</h3>

<p>Well let’s first define semantics:</p>

<blockquote><p>Of or relating to meaning, especially meaning in language.</p></blockquote>

<p>Now if we apply that to HTML, it is the idea that every element has a meaning. Yes, there is a reason that when you want emphasize something you wrap it in an em tag. Instead of simply choosing elements because of how they are styled, you should be choosing elements because of their meaning.</p>

<p>Once you have the semantics down, then you get to use CSS to hook into all those wonderfully semantic elements that you have used.</p>

<h3>Just My Thoughts</h3>

<p>That is not necessarily how I learned, but I think that will be the most beneficial way to learn in the long run.</p>

<h4>Some Resources</h4>
<p>These are some sites that I read regularly, mainly focusing on the basic stuff.</p>

<ul><li><a href="http://456bereastreet.com/">456 Berea Street</a></li>
 <li><a href="http://alistapart.com/">A List Apart</a></li>
 <li><a href="http://cssbeauty.com/">CSS Beauty</a></li>
 <li><a href="http://cssglobe.com/">CSS Globe</a></li>
 <li><a href="http://digital-web.com/">Digital Web Magazine</a></li>
 <li><a href="http://fadtastic.net/">Fadtastic</a></li>
 <li><a href="http://thinkvitamin.com/">Vitamin</a></li>
</ul>";s:13:"numberOfLikes";N;s:10:"bodyBlocks";a:0:{}}}}}i:1;O:25:"yii\caching\TagDependency":3:{s:4:"tags";a:4:{i:0;s:7:"element";i:1;s:29:"element::craft\elements\Entry";i:2;s:40:"element::craft\elements\Entry::section:4";i:3;s:7:"graphql";}s:4:"data";a:4:{s:40:"CraftCMSce35088bdfe0816226cd17fd051a4803";s:21:"0.70573500 1736501960";s:40:"CraftCMS2743a789e8993267a348eee1ee7e4450";s:21:"0.67537500 1713205687";s:40:"CraftCMS2ac34726f299f7e18e449d8e536c67f8";s:21:"0.84529700 1741778847";s:40:"CraftCMS3817d4a648fcfac939af46605323feb0";s:21:"0.36746500 1735923287";}s:8:"reusable";b:0;}}