Boot Camp

Boot Camp–CSS–Introduction to CSS

I’m hoping to finally defeat CSS this time, so we will probably take a long time on it.  HTML is easy, I’ve been teaching it literally for decades, but I’ve never truly groked CSS.

I can read it, and modify it so it does what I want, but I’ve never been able to make my own.

So they start with a very quick introduction.

http://htmldog.com/guides/css/beginner/

Biggest student mistake – putting HTML in a CSS file.  Don’t do that.


Boot Camp–HTML–Last HTML Tutorial

There last HTML tutorial puts it all together. 

http://htmldog.com/guides/html/beginner/conclusion/

Of course, I’ve done some of that already by having you make the start or your portfolio. 

Once we learn some real coding, we’ll had a contact form so you don’t have to have your email address on your web page.

By the way, you know not to put your email address on a web page and why don’t you?

It’s so that bots won’t harvest and send you spam.  Do they even still do that?


Boot Camp–HTML–Forms

Forms allow your user to interact with your website.  They allow you to collect data from the user.  You see them in contact forms, shopping carts, and any other time the website needs to interact with a user.

The form is only part of the solution, and our tutorial goes into that.

http://htmldog.com/guides/html/beginner/forms/

This tutorial is only the tip of the iceberg, there are plenty of  other html tags, but this is a good place to start.


Boot Camp–Making Money–Reviews–Surface 4

Writing good reviews can do two things for you – get some revenue is someone clicks on the link and buys the item or it could get you more items to review.  Many companies do that.

So first thing is going out to the affiliate network that want to advertise through and find the link for the product you want to review.

I’m picking the Surface 4 since I’m using it now.

Here’s the link:

<a href="http://click.linksynergy.com/link?id=7HS4x*QBNM0&offerid=452112.5072771100&type=2&murl=https%3A%2F%2Fwww.microsoftstore.com%2Fstore%2Fmsusa%2Fen_US%2Fpdp%2FproductID.5072771100"><IMG border=0 src="https://dri1.img.digitalrivercontent.net/Storefront/Company/msintl/images/English/en-INTL-Surface-Pro4-Refresh-SU3-00001/en-INTL-XL-Surface-Pro4-Refresh-SU3-00001-mnco.jpg" ></a><IMG border=0 width=1 height=1 src="http://ad.linksynergy.com/fs-bin/show?id=7HS4x*QBNM0&bids=452112.5072771100&type=2&subid=0" >

And here is how it looks on the page.

Love my Surface Pro 4.  This is the exact same model I use, though the price has gone down – I’ve had it for over a year.

Runs Windows 10, which I find easier to use than the early versions of Windows, and even easier than the Mac OS.

Mine came with the Pen. 

It is small, light, and easy to care.  I take it with me when I travel over night and use it for most of my development needs on the road.

I recommend getting a Type Cover.  My favorite is the Signature Type Cover.

It adds very little weight, looks classy, types well and protects your surface.

Please support my efforts and purchase though these links if you need one.


Boot Camp–Making Money

One of the things I’ve done is put advertising on my blogs and at least one of my portfolios.  I haven’t made any money yet, but you never know.

Here’s a good article about that:

http://everything.typepad.com/blog/2013/06/affiliate-programs.html

You should get started on getting signed up with that, because it can take a while before you get approved.

Both Commission Junction and Rakuten Linkshare have lots of tutorials, articles and resources for learning how to do ads.

I’ve got this blog set up with Rakuten Linkshare as a affiliate for Microsoft.    Here’s a link for an example:

<a  target='new' href="http://click.linksynergy.com/fs-bin/click?id=BDG7aX0CVIk&offerid=452112.10002558&type=3&subid=0" >Valentine’s Day Gift Guide at Microsoft Store! Expires 2/14</a><IMG border=0 width=1 height=1 src="http://ad.linksynergy.com/fs-bin/show?id=BDG7aX0CVIk&bids=452112.10002558&type=3&subid=0" >

As you can see, it’s a typical absolute link. 

Valentine’s Day Gift Guide at Microsoft Store! Expires 2/14

If you click on it, I’ll get credit for it.

This one happens to be a text link.

Here’s a product link:

<a href="http://click.linksynergy.com/link?id=BDG7aX0CVIk&offerid=452112.318278000&type=2&murl=https%3A%2F%2Fwww.microsoftstore.com%2Fstore%2Fmsusa%2Fen_US%2Fpdp%2FproductID.318278000"><IMG border=0 src="https://dri1.img.digitalrivercontent.net/Storefront/Company/msintl/images/English/en-INTL-Microsoft-Lumia-735-Verizon-Grey-DC3-00001/en-INTL-L-Microsoft-Lumia-735-Verizon-Grey-DC3-00001-mnco.jpg" ></a><IMG border=0 width=1 height=1 src="http://ad.linksynergy.com/fs-bin/show?id=BDG7aX0CVIk&bids=452112.318278000&type=2&subid=0" >

Which will look like this to the user:

This one would be great for a product review.

I personally prefer only to advertisers I know and trust. 


Boot Camp - HTML–Enough to do a personal web page

Now we know enough to make a personal webpage, which is going to be the front page of your portfolio.  Yes, if you are going to work online you need a portfolio showing off your work.  Right now, we’re only going to do the HTML.  We’ll make it pretty when we do the CSS.

To recap, you know enough HTML, to put in a title, headings, paragraphs, lists, links and images.  It will be in black and white, but that’s fine, again, we’ll fix that later.

You’ll want your name, a short bio related to your online business, contact information, a list of other things you’ve worked, with links to the ones that are online.  This is something you’ll update every time you finish a project.

Once you get that done, contact me, and we’ll figure out a way for me to review it for you.  If you have set up the domain, you might even put that there, but I’ll be talking about other places to host and how to do that later.  So far now, you can keep it on your website.

Also, we’re not done learning HTML, it’s that the next lessons probably won’t apply to your website. 

A BIG THING!  Don’t put your email address in the website.  I”ll show you a trick in the new few lessons so you don’t have to have your email address exposed.

===

By the way, one of the reasons I’m putting the guide online here, is that I’m volunteering to help people self-teach when it comes to coding.  As I learn how to make some money on this (I hope), I’ll share what I learned.

The other reason is for my own accountability.  I’ve found if I keep an online journal on a project, I”m better organized and I actually get it done.


Boot Camp–HTML–Links and Pictures

The next two tutorials cover the things that make your web page both useful and interesting.

Links

http://htmldog.com/guides/html/beginner/links/

Absolute links and relative links confuse most students.  Absolute links are for linking to another site.  Relative links are used to link within the site.

Also there are anchors, used to link within a web page something that can be very useful.

Images

Otherwise known as pictures.

Make sure you make use of alt tags, a lot of people skip them.  They allow screen readers to tell their users what your picture is.  Be descriptive. I once won award for that.

As always, feel free to ask for help, show off your work, etc!


Boot camp continues

The next section is on headings.  Pay attention to organization, a lot of people don't including me.  

http://htmldog.com/guides/html/beginner/headings/

It is short and sweet.

Since that one is so short, let's look at lists also. 

http://htmldog.com/guides/html/beginner/lists/

As always, connect with with the contents if you have questions or just want to share.