Sampson Web Dev

Web Development 0.2.1

In this video, Jonathan talks about an HTML add-on called Twitter Bootstrap. It helps with the CSS, making it easier to have tables, buttons, forms, and especially positioning. In this video, he tells you how to get Bootstrap, and he also goes a little into using it. You can get Twitter Bootstrap at http://getbootstrap.com/ . Getting Bootstrap into your webpage is very simple. You know how you are able to use the <link> tag to link your webpage to CSS files? Well, you can use it to also link to online CSS files, you just need to put in the URL. Jonathan explains how to do this, so I won't get into it. Here is the video:

Web Development 0.1.8

In this video, Jonathan talks a lot about CSS positioning, and some other basic CSS. He explains that the browser window where you see the HTML page is basically called a "viewport". He explains how to make an image or other HTML things stay where it is as you scroll down, so that it will scroll down with you. That can be very useful for making navigation bars. Also, he talks about how to use the padding, so you can position your HTML element almost wherever you want! 

 

Web Development 0.1.5

In this video, Jonathan talks about CSS selectors. Here is an example of some of the selectors he went over: 

* { 

Which is the universal selector, it selects everything on the page. And another: 

p { 

Which, as you probably know, selects a single element. I like CSS, and he is now going into a lot of CSS! 

Web Development 0.1.4

This video was a continuation of 0.1.3. Jonathan continues with the PHP forms, and how to use them. He talks about the checkbox form, the radio form, and attributes; like one makes it so the text box cannot be edited, (called readonly). This is what it would look like:

Checkbox:

Radio button:

And as a bonus at the end, he showed how to set up WAMP (Windows, Apache, MySQL, PHP), which is required to use most of the PHP stuff.

Web Development 0.1.2

In this video, Jonathan talks about tables. He talks about and explains all the tags that can go in the <table> tag. Here are some:

<thead>

<head>

<td>

<tr>

Video:

Web Development 0.1.3

This is definitely my favorite! Jonathan talks mostly about PHP forms in this part, and how to use them to change your webpage. Like once, he made it so you can have a color form:

And when you select a color and press the submit button it will use that color for the background of your page. Just love it! And using this, I was able to create a form that let's you choose the background, size, and placement of a color <div> tag. The code for the above color form is:

<form>

<input type="color">

</form>

It won't do anything, of course. Just watch the video to learn all about forms and inputs!

Web Development 0.1.1

This video was very interesting. He talks about embedding content, and styling. First he explains the <del> tag. It basically adds a strikethrough, so as to point out spelling errors. It can be used like this:

<p>I like to <del>to</del> eat ice cream</p>

It would be used if one person was correcting/pointing out spelling errors. Then, he talks a lot about the <img> tag. It is used (of course) to display images on webpages. He also tells about the different attributes (like src=""), and especially the alt="" attribute. If the browser cannot display the image, it replaces the image with the text in the alt="" attribute. Example:

<img src="errorpic.png" alt="This image can't be displayed!">

If the image couldn't be found, or the link was't right it will display the text "This image can't be displayed!". Then, he talks about the <iframe> tag. You can embed content from other sites with it. If you wanted to embed your about page into your home page, you could do this:

<iframe src="aboutPageURL.html">

He also talks about how Youtube uses this to embed videos into webpages. Before the <iframe> tags, Youtube used a very long string of gibberish, but now it is very much shortened.

Web Development 0.0.8

This video is a review of the last videos. He talks more about <p> tags, <article> tags and <section> tags. Also, he talks a little about CSS.

Video:

Web Development 0.0.6

The part I found most interesting in this video was that you can use an <iframe> tag to show an HTML document inside an HTML document. Like this:

<iframe src="http://www.example.com">
</iframe>

This is even used to embed Google surveys! 

Video: 

Web Development 0.0.4

This video explains a lot about sections and valid code. He talks about how using tags like <section> and <article> tags can make the code more human-readable and help search engines like Google display information about your site better. Also, he talks about invalid and valid code. He says that the <h1> can not be in another h1 tag. This would be invalid code:

 

<h1>

<h1>Invalid code</h1>

</h1>

It would display properly, but it is best not to do this because it can confuse web browsers sometimes. And last of all, he talks about h1 through h6 tags, footers, and headers.

Video:

Web Development 0.0.3

This video explains about good syntax. He also says that 'whitespace' is used to help the user read code.



<head>

    <p>A paragraph</p>

</head>


So the spaces, or 'tabs' (actually, in most program text editors, you can use the tab button to create a long space) is really optional. You can get the same output with this, but it is much harder to read an uglier:



<head><p>This is bad text</p></head>

Also, he teaches about a few extra tags. The <section> tag and the <article> tag. This can be used for ordering:

 

<section>

        <p>This section is for comments!</p>

</section>


The tag can be used the same way. And he goes through a little CSS too. He talks about ids and what they can do. Lastly, he teaches about "genetic tags". When you target the tag with, let's say, a color of green, this targets the body tag AND any tag inside it. It's really interesting because it is very similar to real life genetics. Here is an example:

<grandmother eye="blue">

<mother>

<son>

</son>

</mother>

<aunt>

<cousin>

</cousin>

</aunt>

</grandmother>

If the grandmother had blue eyes everyone inside would have blue eyes, unless they were specifically changed to another color. If you gave the body a color of blue, then the body and everything inside would be blue.

Video:

 

 

Web Development 0.0.2

This video is really nice for the beginner, because he tells you what the best editor is to install. He works on how to use a little bit of CSS, and explains what tags are. He tells you how to use the <title>, <head>, <body>, <style> and much more! I really like this video. I would also recommend getting Sublime Text (link above). It adds semicolons (;) automatically where needed, and also helps with making tags. When you type <, it makes a small window with a list of tags. I like this video a lot, and I think would be helpful for a beginner.

ideo: