Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
191 lines (140 sloc) 12.9 KB
---
title: Learning Front End Web Development
categories:
- Technology
tags:
- css
- html
- web-dev
status: publish
type: post
published: true
meta:
_edit_last: '1'
_cws_is_markdown: '1'
_rawhtml_settings: '0,0,0,0'
dsq_thread_id: '1025674391'
_wpbitly: 'http://bit.ly/VIOfiz'
_su_title: ''
date: 2011-06-22T00:00:00.000Z
redirect_from: /blog/technology/learning-front-end-web-development/
---
<p>I am a self-taught Front End Web Developer who writes a lot of <a href="http://en.wikipedia.org/wiki/Css">CSS</a>, <a href="http://en.wikipedia.org/wiki/HTML">HTML</a>, &amp; <a href="http://en.wikipedia.org/wiki/jQuery">jQuery</a> Javascript and pushes pixels in Photoshop from my laptop with flexible location and time restraints. I love my job. I want to share how to get started in this field. I feel that if you're reasonably tech-savvy and persistently driven, you can learn this. If you're not tech-savvy, then just double up on the persistence. First I'll cover the tools needed, next I'll go over the fundamentals, and then share my favorite resources.
<!--more--></p>
<h1>Tools</h1>
<ul>
<li><strong>Mac</strong> - Not saying you can't do this on a Windows or Linux machine, just that if you want to, you're learning from the wrong guy. That being said 95% of the people I know that do design, development, or production, do it on a Mac. You don't need a fast one as web work is pretty nimble (most files are really small). I'd suggest getting the low-end MacBook for the basics, or the low-end MacBook Pro if you've got a little extra. Portability is nice. If you know you'll only be working at home, then go for the iMac. That thing kicks ass and you get a huge screen (super helpful to have lots of screen space). If you go laptop, eventually get a second monitor.</li>
<li><a href="http://panic.com/coda"><strong>Coda</strong></a> - Skip Dreamweaver. You need to learn the code. It's not too hard, I realize it's tempting to use a visual editor to lay web page elements out, but if you don't understand how the core components of web development work, then you're hurting yourself in the long run. Coda's the best code editor IMHO. <a href="http://macrabbit.com/espresso/">Espresso's</a> a good pick too.</li>
<li><strong><a href="http://getfirefox.com">Firefox</a> &amp; the <a href="http://getfirebug.com">Firebug</a> extension</strong> - If web development was plumbing, then Firebug would be x-ray goggles. This amazing, handy, wonderful, life-saving doodad allows you to see the components of a web page, then alter them in real-time to see their effects. It's awesome. Get it, then right click on any element on any web page and click 'Inspect Element'. Now play around. This helps understanding <strong>so much.</strong></li>
<li><a href="http://dreamhost.com"><strong>Dreamhost Account</strong></a> - Not totally necessary at first as you can play around with basic stuff on your local computer, but getting this going allows you to have a web server and an actual web site to play with. Great deal, great support, tons of features. I've used them for a long time and am really happy with them.</li>
</ul>
<h1>Fundamentals</h1>
<p>3 main fundamental languages make up the world of Front End Web Development that you need to learn: HTML controlling web content: images, text, links to other pages, etc; CSS laying out the HTML's content: placing an image on the right, selecting what font size and color the text is and determining the width of the sidebar; and finally Javascript manipulating the layout and the content as it reacts to the user's actions: menus dropping down, content becoming available, and other interactive actions. HTML:Content, CSS:Presentation, Javascript:Behavior.
Keeping these separate is important and leads to your sanity, I swear.
Usually these are kept separate by simply keeping them in different files. A basic site could contain three files: index.html, style.css, and script.js. In the top of the HTML file, you'd include links off to style.css, which would apply it's styles to the content of the HTML file, then link off to script.js too which would apply it's behavior to the same content.
Here's the good news: you don't really need to worry about Javascript: yet. The vast majority of the work is done in CSS. Solid HTML is totally necessary, but HTML is actually pretty easy to learn. Let's go over it first.</p>
<h2>HTML</h2>
HTML tags wrap content. There's a part before &amp; after the content:
<pre><code>&lt;p&gt;I'm a paragraph&lt;/p&gt;
</code></pre>
The tags can have attributes also. Think of them as the settings of the tag. So to make a link, you need to have an anchor tag: <code>&lt;a&gt;</code> with an href attribute that says which URL to go to. Like this:
<pre><code>&lt;p&gt;Here's a link to &lt;a href="http://google.com"&gt;Google's&lt;/a&gt; home page.&lt;/p&gt;
</code></pre>
So, do you see how you close the tag with the '/'? A paragraph begins with a <code>&lt;p&gt;</code> and ends with a <code>&lt;/p&gt;</code>. That's how you wrap content. Here's how you make an unordered list:
<pre><code>&lt;ul&gt;
&lt;li&gt;Item 1&lt;/li&gt;
&lt;li&gt;Item 2&lt;/li&gt;
&lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
The <code>&lt;ul&gt;</code> tells we have an unordered list, then all the <code>&lt;li&gt;</code> are the list items.
Some elements stand on their own, like an image tag:
<pre><code>&lt;img src="images/logo.jpg" /&gt;
</code></pre>
So if this was in an html file that had a directory named 'images' with a logo image named 'logo.jpg', it would show up on the page.
There's many more HTML tags than this, but it's all comprehendible. Focus on learning about the Headers (<code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, etc), Divisions (<code>&lt;div&gt;</code>), Spans (<code>&lt;span&gt;</code>), and the above mentioned tags.
So there's two essential tag attribute we need to cover: IDs &amp; Classes. These can be added on to any tag we've mentioned. It allows us to identify the content we want to style with CSS. So for example, that image of our logo is kinda important and we need to give it some layout attention. So we give an ID of 'logo', like this:
<pre><code>&lt;img src="images/logo.jpg" id="logo" /&gt;
</code></pre>
Or we might want to identify a list of some links that it's a menu:
<pre><code>&lt;ul id="menu"&gt;
&lt;li&gt;&lt;a href="item-1.html"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="item-2.html"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="item-3.html"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
In both those cases, they are the only ones. There's just one logo and there's just one menu. IDs can only be applied to one tag per page. If the multiple tags need to be styled with the same thing, then you use classes. Say we had multiple paragraphs in a row and we want every other one to have a different colored background, we'd add a <code>class="odd"</code> to the odd paragraphs, like this:
<pre><code>&lt;p class="odd"&gt;Paragraph&lt;/p&gt;
&lt;p class="even"&gt;Paragraph&lt;/p&gt;
&lt;p class="odd"&gt;Paragraph&lt;/p&gt;
&lt;p class="even"&gt;Paragraph&lt;/p&gt;
</code></pre>
That way we can write some CSS styles for the odd paragraphs and some for the even ones.
There's much more to learn, but I just wanted to give you an overview of what some of it looks like. Not too bad, right?
<h2>CSS</h2>
CSS is awesome. Think of it as orally describing design. You have rules of the way things look. The rules can be broad, affecting everything, or specific and targeted. It's pretty easy to understand. What do you think <code>background-color: red;</code> does? Or <code>width: 200px</code>? Let's look at a full style rule.
<pre><code>p {
font-size:16px;
font-family:Arial;
color:black;
}
</code></pre>
The first part is called a selector, and it's the html element without all the characters around it. So here we're assigning styles to all the <code>&lt;p&gt;</code> on the page. We're telling them all to have a size 16 pixel font, use the font Arial, and be black.
So if we want to tell all the odd and even paragraphs from the example from earlier to have different styles, we use <code>.</code> for classes and <code>#</code> for IDs. So the paragraphs that had <code>class="odd"</code> we reference by using this for a selector: <code>.odd</code>. The navigation with <code>id="menu"</code> would be selected by <code>#menu</code>. Here's some examples:
<pre><code>.odd {
background-color: gray;
}
.even {
background-color: silver;
}
#menu {
background-color: black;
}
</code></pre>
Now if we wanted to tell all the links within the menu that we want them to be the color white (so they stand out from the black background we gave <code>#menu</code>), we'd use a descendent selector:
<pre><code>#menu a {
color: white;
}
</code></pre>
These are just a few of the <a href="http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/">selectors that are out there</a>, and this only touches the beginnings of the style rules, but I just wanted to give you some examples.
<strong>More things to learn</strong>
<ul>
<li><a href="http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/">Floats</a></li>
<li><a href="http://www.barelyfitz.com/screencast/html-training/css/positioning/">Positioning</a></li>
<li><a href="http://www.threestyles.com/tutorials/css-tips-for-better-typography/">Typography</a></li>
</ul>
<h1>Further Reading</h1>
<h2>Suggested Books</h2>
Here's the first books you should pick up:
<ul>
<li><a href="http://headfirstlabs.com/books/hfhtml/">Head First HTML with CSS &amp; XHTML</a> - This would be a great first book to get. Great format, easily digestible. </li>
<li><a href="http://www.amazon.com/gp/product/0321303474/ref=as_li_ss_tl?ie=UTF8&amp;tag=evalov-20&amp;linkCode=as2&amp;camp=217145&amp;creative=399369&amp;creativeASIN=0321303474">Zen of CSS Design</a></li>
</ul>
Once you get a little bit further, pick these up:
<ul>
<li><a href="http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1430223979/ref=dp_ob_title_bk">CSS Mastery</a> - After getting the basics down, this book will solidify them. This is the book that really made it all make sense for me.</li>
<li><a href="http://www.amazon.com/gp/product/0321410971/ref=as_li_ss_tl?ie=UTF8&amp;tag=evalov-20&amp;linkCode=as2&amp;camp=217145&amp;creative=399369&amp;creativeASIN=0321410971">Transcending CSS</a> - This book also made SO many things click for me. Amazingly written and forward thinking, this shows how to apply the concepts you've been putting together.</li>
<li><a href="http://www.amazon.com/Smashing-Photoshop-CS5-Professional-Techniques/dp/0470661534/ref=sr_1_2?ie=UTF8&amp;qid=1308774677&amp;sr=8-2">Smashing Photoshop</a></li>
<li><a href="http://www.smashingmagazine.com/2010/07/27/new-ebook-from-smashing-magazine-mastering-photoshop-for-web-design/">Mastering Photoshop For Web Design</a></li>
</ul>
<h2>Suggested Blog Posts Reading</h2>
<ul>
<li><a href="http://net.tutsplus.com/sessions/web-design-from-scratch">Net Tuts - Web Development from Scratch</a> - A great series of video tutorials that go over a lot of the basics.</li>
<li><a href="http://www.smashingmagazine.com/2011/06/22/following-a-web-design-process/">Web Design Process</a></li>
<li><a href="https://gist.github.com/1023581">Resources for learning web design &amp; front-end development</a> - Mother load of links. Go here for anything I missed.</li>
</ul>
<h2>Final Thoughts</h2>
Invariably, these tips, books, posts, and links will become outdated. Things are always changing and constantly learning new techniques is essential to this field. I, personally, love it. I hate the idea of stagnancy. So keep up on favorite blogs, keep buying new books that interest you, and always play around and experiment. Here's the sources I would keep up on:
<ul>
<li><a href="http://net.tutsplus.com/category/tutorials/html-css-techniques/">Net Tuts HTML &amp; CSS section</a></li>
<li><a href="http://www.smashingmagazine.com/">Smashing Magazine</a></li>
<li><a href="http://freelancefolder.com/">Freelance Folder</a></li>
<li><a href="http://css-tricks.com/">CSS-Tricks</a></li>
<li><a href="http://www.peachpit.com/imprint/index.aspx?st=61074">New Riders Books</a></li>
<li><a href="http://www.abookapart.com/">A Book Apart</a></li>
<li><a href="http://www.alistapart.com/">A List Apart</a></li>
<li><a href="http://stuffandnonsense.co.uk/">Anything from Andy Clarke</a></li>
<li><a href="http://astore.amazon.com/simplebits-20">Books from SimpleGoods</a></li>
</ul>
Eventually, you'll probably want to use a <a href="http://en.wikipedia.org/wiki/Content_management_system">Content Management System</a> to handle your content. I'd suggest <a href="http://en.wikipedia.org/wiki/WordPress">Wordpress</a> for starters, but I believe <a href="http://en.wikipedia.org/wiki/Drupal">Drupal</a> to be more powerful albeit a little harder to learn.
Have anything to add? Got any questions? Made any progress from these initial steps? I'd love to hear all that and more in the comments below. Thanks for reading!
You can’t perform that action at this time.