Project: html ⁄ css


Where Do I Start?

This is what I asked myself not to long ago, where the heck does one start when you want to learn XHTML and CSS. There is a tremendous amount of information on the web and every flavor of book one could imagine. After I figured out college classes were out due to time constraints it was time to hit the internet and see which books and online classes were voted best. I decided on the O'Reilly School of Technology course Intro to HTML and CSS. Now that the class is done I can say there is room for improvement but over-all it is an excellent class. The big help is having access to an instructor who can answer your questions. If you get stuck just email your instructor and they are usually back to you within the day. The book that the class uses is Head First HTML with CSS & XHTML they send you the book after you sign up and pay for the class. If your unable to take the class buy the book, it's that good. Just reading the book through and using it for reference you'll be able to make a great website. Start by downloading the example files, turn to page one and work your way through the book doing all the examples. The Head First book series does an excellent job explaining the material and having you work through problems.

Link to my lesson files

You are right now looking at my final exam (Lesson 16). I am pretty happy with the improvements and knowledge I have gained through the course, I have enjoyed looking back at my school work and seeing how your pages change as your knowledge increases. I have left all of my lessons unaltered just the way I turned them in so you can get an idea of what the progression is and what is expected. The link below will open a new page or new tab depending on how your browser is set up and take you to the website that I was building during the course. Many of the lessons build upon themselves and I thought it would be a good idea to just start making a website with what I was learning. From this "old page" you can open up all of the lessons and take a look, be sure to right click and select "view source" so you can look at the HTML and CSS. Looking at the final results is one thing, seeing what goes into bulding the page is a whole new view.



Goals for Website

I have many but right now I would like to know how to have wordpress power a blog for me with my own custom layout. I would like to learn some PHP, JavaScript and whatever is necessary to build a secure shopping cart (not that I'm selling anything, I just want to know how to do it). I want to have a link on my main page that allows the visitor to my website to have a choice of website styles, this current theme I call Ocean Beach, but I would like to have the visitor choose different color themes (through the power of CSS). There is so many incredible things people are doing today with websites, its awfully exciting and a little humbling when you realize the skill and knowledge it takes to build these great sites.

Incredible Places to Learn More

These are some of my favorite places to learn more. Most I subscribe via RSS or get there podcasts via iTunes. There are a lot of extremely talented people sharing there expertise....

Tools you will want to have access to

Take a look at these links they will come in very handy as you learn. I usually have serveral of these pages open while I am building my pages so I have access to information that I need all the time.


I just found Abobe Browser Lab and it's incredible, I work on a mac and check my pages on the latest versions of safari, firefox, and opera. Now with Browser Lab I can check my pages on different versions of Internet Explorer. I do have Parallels running on my mac so I can run Windows XP and check things on IE but it's much faster and less hassle using Adobe Browser Lab. They open and close the registration window quite a bit so you might not be able to get in right away, my advice would be to follow them on Twitter and when they open registration jump on and sign up.


Dynamic Drive is a great place to get JavaScript that you can use in your web pages to do all kinds of stuff. They also have a great favicon maker.

Software for web page construction

This is the software that I have tried out so far and have really liked. A text editor is a really personal choice. If you take the O'Reilly course they have you use a built in text editor that works really good. But once you move beyond the course you will want to use a more powerful text editor, I have tried both the BBEdit and the TextMate editors and both have there strengths and weaknesses. Both come with a 30 day trial period so download both and give them a try. As far as FTP software, I have only used Expandrive and have not had any trouble, it works great.

Photoshop and Images

If your serious about making websites your going to have to bite the bullet and buy Photoshop. There are a ton of tools within PS for websites. I am just learning how to make a complete web page within PS then using the slice tool to make the actual web page that you designed in PS. It's really an incredible process and seems to be the way a lot of current designers are doing it right now. Chris Coyier the brain behind CSS Tricks has a multi-part screen-cast about how to take your PS design from PS to a web page. It's an incredible series that I'm deep into now and really want to learn how to do it well.
I have been experimenting for the last few weeks with Pixelmator It's only 59 dollars and is really an impressive piece of software. It feels and looks a lot like PS. Give it a try free for 30 days if you cant cough up the money for PS right now, it will get you up and running with your pictures, icons and text for your website.

Books

I'm going to list and rate the books that I have read cover to cover or have used extensively for reference. Now is a good time to get acquainted with O′Reilly Books if your new at this stuff your going to need some good learning and reference books and this is the place to get them.


I have bought stuff from Amazon for years but I have found that for technical books O′Reilly can′t be beat and here is why. You can purchase a bundle and get the book in three different formats and this has been a huge help for me. The first format mobi is for the kindle so when I′m on the road I have all my technical books with me and don′t have to actually lug around all 185 pounds of books. Laying in bed reading is also much easier with the kindle verses holding a large book. The next format is pdf for the computer, this is a huge help for having the book open on your computer so you can cut and past code out of it or do a quick search to find the exact spot within this 800 plus page book that your looking for. When your doing lessons out of the books it′s nice to have your project open with the book right along side for quick and easy reference. With pdf you can also highlight paragraphs, make bookmarks and add notes. The third format is epub for your iPhone, I use the application Stanza to load all my books and this is a nice place to have them if you spend much time on the road. I am constantly sitting in an airport reading ahead and absorbing material to put to use later.


Head First HTML Book Head First HTML with CSS and XHTML, If your new to this whole website building gig this is your starting place. Great book with solid lessons and exercises. Buy this book and get started! Five Hearts ♥♥♥♥♥


Head First Web Design Book Head First Web Design, If your new to website building your most likely new to web site design, there is more to this than you think. I was not to interested in this book and thought it would be a quick read with not much learned. I was wrong! I spent more time with design than I did with actually building, get this book and read up on design, navigation and ease of use. Also, visit lots of websites and write down what you like and why, take screen shots of websites you like for future reference. Four Hearts ♥♥♥♥


CSS Pocket Reference CSS Pocket Reference, as your writing your CSS you will be constantly picking up this book to jog your brain with the appropriate property and property values. Small size that is easy to carry, highlight stuff you always use, take notes in it. You will not regret this pocket reference book. Five Hearts ♥♥♥♥♥


HTML Pocket Reference HTML and XHTML Pocket Reference, companion book to the CSS Pocket Reference. All of this information is online but I found that a small paper copy that I could highlight and take notes in was a better reference for me. You will not regret this pocket reference book. Five Hearts ♥♥♥♥♥


Update: Monday August 24th 2009

Well, I dove off into the WordPress world and made myself a blog! This started with a need to have a centralized location for all the tips, links to good tutorials and news. Plus, having a good way to comment on them and search was important. Doing this myself with my main website right now is way beyond my skills. Enter WordPress, this is an amazing CMS (Content Management System) that you can use for making a blog or to power a complete website. The past week has been busy with learning how to install and modify WordPress on my web server then downloading a theme and making it look how I want it to (basically, aligning the theme of the blog with my main website and twitter page). Although, I am not totally happy with the look or design of my website and blog it has to do for now. You can spend all your time messing with the look and feel and not get any content done. I can really see why design and implementation are two separate jobs!
The blog is up now and I "think" ready for the world to see. I'm sure there will be some growing pains and lessons learned but there's no better way than to just jump in with both feet. The plan is to use the blog for my main or centralized point of information and updates and link to the main website when needed. Again, this jumps back to design, ease of use and the general layout of your website that I have a lot to learn about.
Working with WordPress has a fairly large learning curve and it makes you dive off into PHP Programming. The Codex or User Manual of WordPress is downright incredible. The popularity of WordPress has made it a much covered CMS with excellent documentation. If you have any trouble just search the Codex or Forums and chances are you'll find what your looking for. I'll be posting my favorite WordPress information sites and general tips and tricks as I learn them. Wanna go make a blog?

Update: Monday August 17th 2009

Well, this has been quite a journey so far. This all started in April of this year and three months later I have cliff538.com online and starting to gel into something I am happy with. Now it's a break from all the XHTML and CSS stuff (kind of) and moving into the next phase of building a modern dynamic website which is learning a little bit about PHP, MySQL and JavaScript. Now, let me be clear on my disclaimer....... I am brand new to all of this and am stepping out and doing my best with what I have. I could very well be wrong with lots of my information and beliefs but without a mentor in this area, my research and book learning is going to have to do (Anybody want to be my mentor?)
Websites today are alive, interactive and teaming with activity, the new catch phrase is web 2.0 which to my understanding includes websites that are stand alone programs that process information in the background and deliver you fresh current information without a page reload. Your web page is built by the server and updated automatically. I want to learn this stuff and be part of it.
All of that includes PHP, MySQL, JavaScript and Ajax. Why these? welI, for now it's because they are open source programs that are free and have a tremendous amount of support and documentation. I am off, diving in with both feet to see what happens in this journey. I will update the site as much as time allows. If you would like update notifications you can follow me on twitter as I will be posting updates there. I still do not know how to include RSS on my page, it's on the every growing to-do list.
How am I starting this phase, well tonight I installed MAMP Pro to set up a development server on my computer. MAMP stands for Mac, Apache, MySQL and PHP. One install sets up all of them and gives you a web server that you can play with. Easy install with no problems. Next is using my very first ever IDE, I am experimenting with two different ones for PHP but right now NetBeans IDE is winning out for me. It is working well and set right up with my MAMP server. All of this is being guided by several books but one is standing out with me going through every page Learning PHP, MySQL and JavaScript by Robin Nixon.
Talk to you soon!