Up Your Game: Learn The Basics of HTML/CSS/PHP (Videos)

November 26th, 2010 by admin Leave a reply »

Why should you learn html, css, and php? So you can make (and test) landing pages! So you can set up tracking correctly. So you don’t have to outsource it and wait a week before your landing page is done. Learning the basics will only make you a better and more efficient (dare I say dangerous?) marketer. After all, this IS an internet business. Additionally, if the affiliate thing never works out, you could always become a web designer and make a great living from home.

The tutorials start with HTML and CSS, then to some PHP… and then move on to WordPress. Let me explain.

  • HTML/CSS is the basics of the web and making web pages look the way they do
  • PHP because it will help you greatly with tracking variables like in Prosper202 ( t202kw= )
  • WordPress because you will probably at some point be building sites made with WordPress

It will take you 1-4 weeks to get through everything, but learning how to code websites is sooo worth it in the long run. So many people want to be successful with affiliate marketing, but they refuse to learn how to use the internet.

It’s really easy once you get some experience, but getting that experience is painful when you don’t know what you’re doing. That’s why I made this page. It took me 2 god awful years to learn this all on my own (I just know the basics). 2 years of searching around for good tutorials and many hair-pulling experiences. Well here it is – you no longer have to search – watch all these videos in order, and by the end, you will have a solid grasp of making and tweaking landing pages however you want.

Tutorial on the basics of HTML and CSS:

 

Firebug: A MUST HAVE Tool (it’s free)

You NEED this Firefox plugin: http://css-tricks.com/video-screencasts/15-introduction-to-firebug/ (13mins)

Firebug allows you to click a button and hover around things on the page, and it will show you the CSS rules that affect the look of your webpage. This is useful because if the font is the wrong or color or something, you can just pop open Firebug, click Inspect, and see which line of the CSS you need to edit as you hover around the thing you want to change. This will save you many days of hair pulling. In CSS, there is something called specificity, and if you are editing the wrong line, it won’t work and you WILL get mad. Firebug saves you from that.

 

Floats

Floats are how you make a 2-column layout. You “float” a section to the left for example to make a navigation bar on the left or “float” an optin box to the right. Floats were very tricky for me to learn, and I’m sure it will be the same for you.

 

The MEAT: Watch Actual Websites Being Written

Here are a few tutorials on how to code templates with HTML and CSS. Watch these and over time you’ll get good with HTML and CSS. As you watch the guy code out these templates, you’ll see most all the HTML and CSS tags that are commonly used. You will see these HTML and CSS tags all throughout your WordPress themes, so it makes sense to get acquainted with them. They are all really easy.

  1. http://net.tutsplus.com/tutorials/html-css-techniques/the-ultimate-guide-to-creating-a-design-and-converting-it-to-html-and-css/ (1hr)
  2. http://net.tutsplus.com/articles/news/how-to-convert-a-psd-to-xhtml/ (2hrs)
  3. http://net.tutsplus.com/articles/news/converting-a-design-from-psd-to-html/ (53mins)
  4. http://net.tutsplus.com/articles/news/slice-and-dice-that-psd/ (1hr 10mins)
 

Converting a Photoshop Mockup – Series #1:

  1. http://css-tricks.com/videos-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/
  2. http://css-tricks.com/video-screencasts/2-converting-a-photoshop-mockup-part-2-of-3/
  3. http://css-tricks.com/video-screencasts/3-converting-a-photoshop-mockup-part-3-of-3/

Converting a Photoshop Mockup – Series #2:

  1. http://css-tricks.com/video-screencasts/12-converting-a-photoshop-mockup-part-two-episode-one/
  2. http://css-tricks.com/video-screencasts/13-converting-a-photoshop-mockup-part-two-episode-two/
  3. http://css-tricks.com/video-screencasts/14-converting-a-photoshop-mockup-part-two-episode-three/
 

OK, by the time you finish all the tutorials linked above, you’ll be familiar with HTML and CSS. WordPress on the other hand uses PHP, which is a bit more advanced.

Primer for Learning PHP

This screencast will start preparing you for PHP stuff you’ll see in WordPress: http://css-tricks.com/video-screencasts/11-working-modularly-with-php/

Diving Into PHP – Your PHP Primer

  1. Day 1
  2. Day 2
  3. Day 3
  4. Day 4
  5. Day 5
  6. Day 6
  7. Day 7
  8. Day 8
  9. Day 9
  10. Day 10
  11. Day 11
  12. Day 12
  13. Day 13
  14. Day 14
  15. Day 15
  16. Day 16
 

WordPress, WordPress, WordPress

After you have had some exposure to some PHP, now you can watch the WordPress theming tutorials and actually get what’s going on. These are the 2 series that taught me everything I know about WordPress.

WordPress for Designers – 18 Part Series:

  1. Day 1
  2. Day 2
  3. Day 3
  4. Day 4
  5. Day 5
  6. Day 6
  7. Day 7
  8. Day 8
  9. Day 9
  10. Day 10
  11. Day 11
  12. Day 12
  13. Day 13
  14. Day 14
  15. Day 15
  16. Day 16
  17. Day 17
  18. Day 18

Designing for WordPress – 3 Part Series:

  1. Part 1
  2. Part 2
  3. Part 3

And That’s a Wrap

If you watch every single one of these videos in order (will only take you 1-4 weeks), then you will have some serious (and marketable!) skills when it comes to basic programming. Affiliate Marketing is an internet business, so learning the basics is a natural first step.

Serious Business

7 comments

  1. nicky says:

    Found your site on PPV Playbook. Great content! The biggest thing holding me back right now is definitely coding.

  2. nicky says:

    Thanks for the tip. I’m learning coding on Lynda tutorials right now, lots of content to cover though…

  3. Camila says:

    OMG I love you for this tutorials.
    Thanks a lot.

  4. Kevin says:

    Thanks for the resources bro! This is exactly what I needed.

  5. william says:

    I’ve been going through these tutorials like you said and I feel like I’m really starting to get it! Thank you for putting this page up

  6. Eric says:

    Great list of tutorials, really helped me a lot!! Thanks anyway!!

Leave a Reply