Beginner-Friendly Web Programming Resources
I first took an interest in web programming in elementary school, creating a very basic (and tacky) HTML site with flashing images and midi background music. Besides the HTML tutorial I found on Neopets (I know you played it too), all the programming sites I came across were full of intimidating technical jargon. That was over 10 years ago, and luckily the internet has become a much friendlier place for those learning to code. When I finally decided to roll up the sleeves and make new my website from scratch, there were tons of resources out there (thanks to all my engineering/design buddies for sending them to me!) Since there are many people wondering where to begin, I thought I would share with you some of the resources I used and what I learned.
Tutorials
1. Codeacademy
Codeacademy is a great site for step-by-step tutorials on everything including Python, JavaScript, and jQuery. I completed the web fundamentals tutorial which leads you through HTML/CSS in 6 different sections, most ending in a mini project. I love the interactive component - they teach a little, you code a little, then they highlight any parts you got wrong and tell you why. The mini-projects help you digest the material by giving you the chance to apply your knowledge immediately.
2. Nettuts+: How to Convert a Warm, Cheerful Web Design to HTML and CSS
This was the most helpful site, recommended by my friend Stanley Lai. It's a collection of video tutorials on converting your PSD mockup into code - an important step that many tutorials miss. It comes with all the source files for the website example so you can see what the final result should look like. It covers creating the markup, slicing the PSD, integrating the grid system, building the CSS, and more.
The creator goes over things quickly, so thank goodness for the pause button. The one thing that frustrated me was how often he uses shortcuts in his code - great for more advanced users, but hard to follow when you're just starting out.
If you're also new to website design, there's a previous tutorial on creating the example mockup in Photoshop. That goes over website layout, various texture/gradient effects, pattern creation, detailing, use of type, and image placement.
Resources (all free)
These are tools I found helpful and beginner-friendly.
Although you could use Notepad or TextEdit to write your HTML/CSS, I found TextWrangler to be a much better alternative. The most valuable aspect is the colour-coding of sections of code, but I also liked being able to jump from one HTML/CSS file to another on the left-hand side.
*Edit: I've been told Sublime Text is better
Screen Shot 2013-04-30 at 2.03.55 PM
For the slideshow elements on my website, I used this plugin for jQuery. The website shows a few different examples of how it can be modified (sliding transitions, slide previews, etc)
For my illustration/graphic design and photography galleries, I used the fancyBox image tool. There are various effects, button options, and title positions to play with. The website gives a detailed guide on how to make these changes in the code, as well as examples to test.
Filezilla is an FTP client. What is FTP? It stands for File Transfer Protocol and it allows you to transfer your website files (HTML, CSS, images, etc) from your computer and onto the internet through your hosting service (eg. Network Solutions, GoDaddy, etc).
Tips
Saving you from repeating my mistakes.
Keep your code organized: Code can get very messy, especially when you're using bits and pieces from various resources. Adding comments on your code makes it easier to find code you need to fix and can help keep related things grouped together.
Screen Shot 2013-04-30 at 2.39.38 PM
Keep your files organized: From the beginning, make sure you have a system for naming and organizing your files on your computer. You can group by page, file type, etc - just be consistent! Having all your similar files in one location makes it a lot easier to track and link to later on (especially if you have many image galleries).
Resize your images: Don't be lazy! I keep all my images as their original large sizes to preserve quality when printing, but for my website I couldn't keep them that way. Even though you can resize your images in HTML/CSS, large files take much longer to load and users will be left staring at blank boxes or frozen screens. Take the time to shrink your images down to screen size (yes, you'll have to make the thumbnails as well).
Use websafe fonts: In my original design, I had used Gill Sans as my main font. On my browser things looked great, but to my dismay my text looked terrible on other computers since they were not able to interpret it. Websafe fonts are common fonts that are viewable on almost any browser. You can also use more unique fonts by adding API to your css - some are free, some are subscription-based (eg. Google Webfonts, Typekit). Here's a list of sites to explore:
Google Webfonts - A directory of free open sourced webfonts with API you can add to your code.
Beautiful Web Type - A showcase of the best Google webfonts
Typekit - A subscription-based library of high quality webfonts (the trial plan is free with a limited library). Co-founded by Jeff Veen (also the co-founder Adaptive Path).
How to get your website onto the internet - Yes, you would think this would be simple, but the experience of getting my site live was as frustrating as fixing my broken code. This deserves its own blog post so I will save it for later.