« Older Posts

Learning to code - Tools you should use

posted by:
I know I said that this lesson would be about links, file paths and how to organize your files but let’s move that to the next lesson so we can get you the tools that will make this entire process much easier for you. You need the right software now that you are getting really good at your HTML.

Here are my recommendations for you:

Windows & Mac

NetBeans (https://netbeans.org) - This is a great tool, it will color code things for you to make it easier to see the tags on your page and when we get into JavaScript and even PHP it will suggest code for you which helps you to type less! *Don't use this app on anything less than a MacBook Pro with a bunch of memory (MacBook, MacBook Air), it tends to lock up your Mac which is really annoying.

Mac Only

Text Wrangler (https://itunes.apple.com/us/app/textwrangler/id404010395?mt=12) - A very easy to use text editor that will color code things for you as well. It doesn't do code suggestions but it is VERY good at giving you only what you need. This app is free, there is a paid version called BBEdit that is available from the company's web site.

Code Runner (https://itunes.apple.com/us/app/coderunner-2/id955297617?mt=12) - Nice and simple like Text Wrangler, but it has code completion and is very easy to use. Text Wrangler supports FTP but this one does not. That isn't important now but it may be down the road. This app costs a few bucks but it's worth it.

Ok, those are my favorite tools. I know there are more but these are the ones that made me happy. We can pick up next time with your new tools and hopefully more practice under your belt!

Learning to code - Images and Styles

posted by:
In the last tutorial I showed you how to get started with HTML, how to add tags and how to see your results in your browser window. The reason we are starting with HTML is because it is very easy to learn, easy to understand and easy to test. I promise you we will get into some really cool stuff soon so stick with me.

Today we are going to add an image or two to our page and also move things around on the screen to make them look better. If you took the time to explore the list of HTML tags and add some content of your own then you can start with the page you created in the last tutorial. If you are joining us now you can download this zip file to start where I left off.

You may have noticed that in the last tutorial I did not use any images, that was on purpose because you were not adding any images. I wanted you to get used to seeing your page as text and tags.

And now we are going to add a new tag to our page, the image tag. This tag does not require a closing tag and it is the first tag that I’m introducing to you that has a required attribute. Attributes are values within the tag that you set to change the behavior of the tag. This one is required which means that if you don’t set it your tag will not work properly.

The image tag looks like this:

<img src="">

Can you see the attribute? It’s the ‘src’ and it represents the source of the image to be displayed. Images on the web are usually JPG, GIF or PNG files. It’s best to stick to JPG files because they are stored compressed, download faster and display faster on the page. But feel free to experiment with all of them. You may try other formats but these are supported in all web browsers where other formats may not be.

Before we can add the tag we need to have an image. Any image will do, so find an image and save it to your desktop (or the same place that you stored the page you are working on. An image was included for you if you downloaded the starter project.)

Right now my code looks like this:

<html>

 <head>

 </head>

 <body>
  <h1>Learning to Code!</h1>
  <p>This is the begining point of part two of the learning to code series on OurBigAdventure.com so far we have covered how to use HTML tags to allow our content to be seen in our web browser!</p>
  <p>By the end of this lesson we will have some images on our page and our display will look much less like a simple outline.</p>
  <h2>Image Tag</h2>
  <p>The image tag is <i>fun</i>! We can add them <b>almost anywhere</b>!</p>
  <p>Let's add some fake text here so we have more to play with. <strong>Portland</strong> street art sustainable paleo wayfarers, mlkshk food truck pabst echo park salvia. …</p>
  <p>Hella sartorial pitchfork, pabst typewriter plaid hoodie offal ethical godard before they sold out. Humblebrag stumptown 3 wolf moon four dollar toast fingerstache, gastropub slow-carb street art pitchfork sriracha asymmetrical craft beer mixtape schlitz. …</p>
  <p>Whatever slow-carb trust fund, mixtape pabst flexitarian bitters ramps gluten-free. Marfa gluten-free selvage mixtape, venmo <u>etsy master</u> cleanse small batch DIY vice. …</p>
  <p>You probably haven't heard of them ramps gentrify kitsch health goth, drinking vinegar bespoke. Ethical lumbersexual cronut, microdosing twee chartreuse humblebrag mlkshk. …</p>
  <p>Sriracha you probably haven't heard of them small batch post-ironic etsy. Man bun crucifix fashion axe gluten-free deep v meditation yr. …</p>
  <p>Salvia pour-over tattooed marfa offal. Pickled 8-bit celiac direct trade kale chips. Lumbersexual thundercats microdosing, keytar 8-bit messenger bag trust fund distillery vice. …</p>
 </body>

</html>

You can see that I have a few tags mixed in probably like you do. Just pick anywhere within your content (even between other tags) and add your image like this:

  <p>The image tag is <i>fun</i>! We can add them <b>almost anywhere</b>!</p>
  <img src="sample.jpg">
  <p>Let's add some fake text here so we have more to play with. <strong>Portland</strong> street art sustainable paleo wayfarers, mlkshk food truck pabst echo park salvia. …</p>

or this:

  <p>The image tag is <i>fun</i>! We can add them <b>almost anywhere</b>!</p>
  <p>Let's add some fake text here so we have more to play with.<img src="sample.jpg"><strong>Portland</strong> street art sustainable paleo wayfarers, mlkshk food truck pabst echo park salvia. …</p>

or even this:

  <p>The image tag is <i>fun</i>! We can add them <b>almost anywhere</b>!</p>
  <p>Let's add some fake text here so we have more to play with.
   <img src="sample.jpg">
   <strong>Portland</strong> street art sustainable paleo wayfarers, mlkshk food truck pabst echo park salvia. …</p>

As long as your image tag is between the <body> tags, and the source attribute points to an existing image it will appear on the page.

Take some time to play with the image tag to see what it does when you put it in different places in your code. You can also add a few more images if you want to. Don’t worry about how the look right now, we will move them around next and set their sizes as well. When you are done playing, you can continue on.

So far you have been introduced to HTML tags, and have used your first tag attribute. Next we are going to introduce you to another attribute that will work in every tag along with a new list of things to play with. This attribute is the ‘style’ attribute and it will allow you to control how each tag element is displayed within your page!

Let’s start with the <body> tag and really change the look of our page. Add a ‘style’ attribute and set the value of the background to gray like this:

 <body style="background: gray;">

Refresh your page and take a look at your changes! Most of the time you will use the hexadecimal number representation of the color. This is not a scary thing at all, it is 6 characters, the first two represent how much red to use, the middle two represent green, and the last two represent blue. The values go from 00 (no color) to FF (100% color). To set your background with the hexadecimal value for a color you would do it like this:

 <body style="background: #66CCFF;">

Luckily you don’t have to guess at what the colors will be, you can use a color picker like this one to give you the correct value for the color you want to use.

What do we do to set the color of our text? That’s easy, we can just set the ‘color’ value in the style attribute as well. Try that next:

 <body style="background: #66CCFF; color: red;">

What else can we do with our styles? How about moving things around the page! Let’s start by picking one of our tags with text content like an <h1> or a <p> tag. The value we want to set varies, we can control the space around our tag, the space within it, where it aligns and many other things. For now, let’s control the space around it with the ‘margin’ value.

There are four values for the margin, the ‘top’, ‘right’, ‘bottom’, and ‘left’. You can set them together or separately. To set all of the margins to the same value you can do something like this:

 <p style=“margin: 20px;”><strong>Portland</strong> street art sustainable paleo wayfarers, mlkshk food truck pabst echo park salvia. …</p>

This adds a 20 pixel buffer all around this paragraph. Try this on one of yours to see what it looks like. Then, also add it to your <body> tag to see how that changes things. Fun stuff right! As you can imagine you could spend hours and hours moving things around to get them just right. Once we get a few more lessons under our belts I will show you how you can avoid that and just use your new skills to clean things up. :)

Now, if we want to set our margins separately there are two ways to do that. You can set these separately:

margin-top: VALUE;
margin-right: VALUE;
margin-bottom: VALUE;
margin-left: VALUE;

OR we can set them all on the same line like this:

margin: TOP_VALUE RIGHT_VALUE BOTTOM_VALUE LEFT_VALUE;

The values are listed clockwise starting at the top which makes it easier to remember the order. :)

Oh, and did I mention that you can also set them as percent values? The percent will get a little tricky from time to time because it’s not the percent value of the overall page, it’s the percent value of the parent container. So if we set a <p> tag to have a top margin of 10%, that is equal to 10% of the <body> tag. So if our <body> tag has any spacing set it will also adjust the value of that top margin that we set, much like you saw when you added the margin value to your body tag. Basically these styles cascade through the tags from outermost to innermost. (Which is why I had you indent your tags to begin with, it makes it easier to see the parent elements and will be helpful in this lesson.)

Ok, take a deep breath. I know it’s getting a little scary with sometimes unintended changes on your page but it’s not really that bad, it just takes some practice. Now let’s clear up the one thing that will confuse you if you have jumped ahead to the ‘padding’ setting. Actually, let’s just show you what that does so you can understand it really easily!

Add a border to any tag on your page. You do that like this:

<strong style="border: 1px solid blue;">Portland</strong>

The border for this element is now set to be a 1 pixel thick solid blue line. You can make yours ‘dashed’ if you want or even ‘dotted’, it’s entirely up to you. (I’ll tell you where you can find out more about these styles in just a minute)

Now that we have a border we can see the difference between ‘margin’ and ‘padding’. Now add a padding value to the same element like this:

<strong style="border: 1px solid blue; padding: 10px;">Portland</strong>

Can you see the change! Now the border has 10 pixels of padding all around the contents of this element, very cool. Ok, change it to say ‘margin’ instead of ‘padding’.

<strong style="border: 1px solid blue; margin: 10px;">Portland</strong>

What happened? The border is still there, everything is in the same place, but this time the 10 pixels is on the outside of the border. And keep in mind that the border is the outside edge of this element so the difference is that a margin is on the outside and padding is on the inside. That can be a tough concept in the beginning, so awesome job for getting that under your belt!

It would be too much to walk you through all of the values that you can use for your new page so here is a great link for learning about everything you can set and how each one of them works: http://www.w3schools.com/cssref/

Some of the things you may want to look at for your layout would be the ‘font’ options, the ‘float’ options, and even the ‘max-height’ and ‘max-width’ options.

Now let’s tackle that image we added earlier. How do we set that sucker to a size that we want? Well if your image is REALLY BIG try to save a smaller version first (a size less than 1200 pixels wide or high would be great) then let’s add a style attribute to that image and see how it looks:

   <img src="sample.jpg" style="width: 300px; height: 300px;">

Great! Our image has changed sizes but it also got weird. :} That’s because we are setting the height and width to be a ratio that doesn’t match the image. (Unless I guessed correctly on your image which would be really lucky) So let’s change our style again and this time let’s not be so rigid in our settings:

   <img src="sample.jpg" style="max-width: 300px;">

That’s better! When we don’t set the height our browser will calculate it for us, and we aren’t really setting the width either, we are just setting the max-width so if our layout settings begin to squish our image it will scale and still look ok, but it will never stretch beyond 300 pixels wide.

Go play with your new style skills and see what you can create. We will pick up next time explaining links, file paths and how to organize your files to make your web pages easy for you to work with in the future.

OH! and before I forget, you will see ‘CSS’ a lot as you play with your styles. CSS stand for Cascading Style Sheets. You understand the ‘cascade’ part and the ‘style’ part as well. We will cover why it is a ‘sheet’ in the next lesson when we move all of your styles to their own file! It’s going to be awesome. :)

Learning to code from scratch

posted by:
After posting my first code tutorial I realized that maybe I needed to start from the beginning. I know a lot of people that are interested in learning how to build web sites and learn to write code but there isn't anything that is beginner enough to make them feel like they CAN do it.

So I'm telling everyone right now that you can and if you have a little patience you will be surprised how fast you can learn. This time I'm starting from the very beginning. Normally I would tell you to have a project to build, but until you get started this may not be easy, so let's start at the very beginning.

Step One

Open up a text editor. On Windows you should use Notepad. On a Mac you can use TextEdit or Text Wrangler. All of these text editors are free and they won't add any invisible formatting that will break your work.

If instead you tried to use something like Microsoft Word what you would actually get is a bunch of invisible formatting characters in your file that your browser would have no idea what to do with. Trust me when I say that using a pure text editor with no formatting options is the only way to go. I will introduce you to some of my favorite editing tools in the future, but for now just go with the free stuff that is easy to use.

Step Two

Open up your web browser. If you are reading this you have done that already and are ahead of the class. Gold star for you!

Step Three

Save the empty file from your text editor to your desktop and call it "MyPage.html"

Step Four

Open a new tab in your web browser. Click 'File' then 'Open File' and pick "MyPage.html" from your desktop.

You should see an empty white screen.

Hurray! You made your first page, you have zero errors and the page displays exactly what you told it to... nothing. As you will learn over time, it's always good to start with a situation exactly like this one. You didn't do anything and nothing happened. This would be much better than doing nothing and having something break, a problem that you would then have to solve!

Ok, so let's get down to the next step. You have the tools, you know where your files are and you know how to test them.

Next we are going to make our page unique. … wait, let’s actually make it a page!

The first thing you need to do is tell your browser what this file is so let’s add our first tag! At the top of the file in your text editor type:

<html>

The language we are going to start with is HTML or Hyper Text Markup Language. It’s not the most powerful language but like I said, we are starting from the beginning.

HTML uses tags to tell the browser software what to do. Most tags have an opening tag and a closing tag with stuff in the middle, much like an Oreo cookie. In this case the <html> tag is one cookie, we will add some extra stuff in the middle and the other cookie which goes on the next line is:

</html>

Can you see the difference? The closing tag has the slash in it indicating that it is a match for the preceding tag with the same name. So right now your file should look something like this:

<html>

</html>

You can go ahead and refresh your browser to see the changes but there won’t be any yet. All we’ve done is told it what to expect in our file, we haven’t given it the good stuff… the icing in the middle, to continue the Oreo analogy.

The next thing you need to know about a web page is that it only has two parts. The ‘head’ and the ‘body’. The head section contains things like the title, formatting information, metadata and other things that won’t display in the browser but are used by search engines and the browser to help understand more about the page itself. Think of this as the first few pages of a book, the ones with the Publisher’s name, the ISBN number and the other stuff that you have never looked at before diving in at page one.

So let’s add these new tags to our file! Add a ‘head’ tag and also a ‘body’ tag between the ‘html’ tags. It should look something like this:

<html>
<head>
</head>
<body>
</body>
</html>

To be honest this is a little ugly, let’s clean it up by indenting our code a little. Typically you intent things that are inside of a tag, and it’s very ok to also add some empty lines to make things easier to read. Maybe something like this:

<html>

 <head>

 </head>

 <body>

 </body>

</html>

Much better, now we can see that the ‘html’ tags match and that they surround the ‘head’ and ‘body’ tags. Keeping your code organized will make it easier to work with in the future. So be sure to clean it up as you go because cleaning it up later is really, really hard!

Alright, still no changes in the browser because we haven’t done anything special, so let’s do that now. The first visible thing we are going to add to our page is a bunch of text. So just write a sentence or two inside of your body tag.

 <body>
  This is some test text that I am adding to my first page!!
 </body>

NOW, go ahead and refresh your browser window. You should see your text on the screen! How’s that for simple, you just programmed your browser’s display!

Ok, but let’s make that a little more impressive. Let’s add a title above it! To do this we are going to use another tag called a ‘heading’ and there are a bunch of them. We are going to go with the biggest one, the ‘h1’ tag! Add an ‘h1’ tag to the body of your page just above your sentence and put some text between the ‘h1’ and it’s closing tag.

 <body>
  <h1>This page is mine!</h1>
  This is some test text that I am adding to my first page!!
 </body>

Now test your changes. Simple isn’t it? Now I want you to add a few things on your own. The tags are really easy: *don't forget your closing tags

1. <i> - make text italic
2. <b> - make text bold
3. <u> - underline something

If you want to see what other tags there are here is where you can find the entire list:

Http://www.w3schools.com/tags/

This is a really good place to learn about each tag. If you click on the tags in the list it will take you to a page that gives an example of how the tag is used, tells you what it does and which browsers support the tag.

Take some time to get comfortable with how these tags are explained, you will be using this site often to learn how to use new tags and to see if they do what you think they do.

Keep playing with your page and don't worry about what it looks like for now, we will make it prettier in the next tutorial. For now just get some stuff on the screen. We will pick up next time by adding some images and moving things around the screen!
« Older Posts