Zero to Web Development SUPERHERO

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#1

Hi All,

My name is Chris.

I have currently started a personal quest to become a code ninja, web development superhero. I know it's not going to happen over night. But I'll be posting updates weekly regarding my progress, and I'll be asking questions as well.

I am familiarizing myself with HTML5 at the moment, and then I'll move onto CSS3, PHP and JAVASCRIPT.

This is very simple web page.

https://s3.amazonaws.com/aws-website-zerotosuperheroinwebdevelopment-msa5b/myFirst.html

I hope to meet some good people!

Regards,
Chris

Web_Dev_Chris, Jun 7, 2016 IP

Puntocom81 likes this.

Hiago Lucas Cardeal Greenhorn

Messages:: 4

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 21

#2

good luck bro!!!!!

Hiago Lucas Cardeal, Jun 8, 2016 IP

raajtram Member

Messages:: 17

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 31

#3

Always remember one thing Chris - Code is Poetry.

Also - keep HTML and CSS together and you'll understand how one highly depends on the other. Learning them separately will make it time-consuming and yet less productive.

raajtram, Jun 8, 2016 IP

Puntocom81 Banned

Messages:: 80

Likes Received:: 3

Best Answers:: 1

Trophy Points:: 35

#4

Congratulations, your website is accesible

Learn proper HTML 4 first and then you'll realise the flaws of HTML5. This link will help you: http://cutcodedown.com/article/whats_wrong_with_HTML_5

Puntocom81, Jun 9, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#5

Puntocom81 said: ↑

Congratulations, your website is accesible

Learn proper HTML 4 first and then you'll realise the flaws of HTML5. This link will help you: http://cutcodedown.com/article/whats_wrong_with_HTML_5
Click to expand...

Thanks for that, this guy has really good information, but he seems a little bitter critic. I don't see the problem with HTML5 if it works and so many people are using it?

Web_Dev_Chris, Jun 9, 2016 IP

PoPSiCLe Illustrious Member

Messages:: 4,623

Likes Received:: 725

Best Answers:: 152

Trophy Points:: 470

#6

The amount of people using a solution has absolutely nothing to do with the quality of that solution. There are millions of people shopping at McDonalds every year - that does not mean they serve good food.

There isn't really anything directly wrong with HTML 5, it's just an update to previous incarnations, but some of the new "features" are at best redundant, and at worst adds nothing of value to the specification. One of the major problems with HTML 5 is that they've gone away from separating content and style, and specifically created HTML elements that is just meant to style content, or be used for content in specific places.

PoPSiCLe, Jun 9, 2016 IP

matt_62 and Nigel Lew like this.

VanceVP Member

Messages:: 113

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 33

#7

Thanks for that, this guy has really good information, but he seems a little bitter critic. I don't see the problem with HTML5 if it works and so many people are using it?
Click to expand...

Deathshadow has lots of good information and while he may come across as a bit bitter sometimes, he does seem quite passionate about what he does and if you really listen to what he is saying . . . it makes perfect sense.

If he is willing to help you, you have access to a goldmine of solid information.

Good luck . . .

VanceVP, Jun 10, 2016 IP

matt_62 likes this.

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#8

Hi All,

I'm on my Journey to becoming a Pokemon Master (Cough Cough), I mean "Web Development SUPERHERO".

I am progressing in learning HTML5, but a little bit slower than anticipated. I had high expectation of myself, I was hoping to learn it all in a week! But here I am still, only probably not even half way through all of HTML5.

Anyway, that said. I am serious about my own Web Development Journey and no matter the challenge (Gets boring after awhile, not to give up and keep on pressing-in!) I will overcome and continue on the path I have chosen.

HTML5 is actually fun to learn, I'm even sneakily studying it/writing code when I get chances at work. (Slaps and rubs hands together, hehehehehe) Anyways, lets look at what I have learned so far.

Summing up my progress
<!DOCTYPE html> - I have learned about the Document Type Declaration, and that all HTML5 code needs to start with this to let the browser know that the this is an HTML5 page.
TAGS - Html consists of lots of tags to structure the page.

<html lang="EN"></html> First and last tag with the lang attribute to let the browser/application know that the webpage is displayed in English.

<head></head> - I have learned that important information in displayed in the head tags which is not visually displayed by the browser.

A few tags I have learned so far that go in the head are <meta charset="UTF-8"> and <title></title> All english webpages use UTF-8 and it contains virtually all numbers, characters and symbols ect... and the Title tag is used to display text in the tab by most browsers, the search engines use this as well.

Moving on, I have learned that all content displayed on the webpage belongs in the <body></body> tags. I have learned a few body tags for titles, paragraphs, emphasis, strong emphasis, highlight, links, lists, and more complicated nested lists.

They look like this...

<h1-6></h1-6> - Different headings based on important of titles.
<p></p> - General paragraphs.
<em></em> - Emphasize important information.
<strong></strong> - Strongly emphasize very important information.
<br/> - Line Breaks
<hr/> - Horizontal Line
  - Proper Space
<mark></mark> - Used to highlight text.
<a href=""></a>- Links to another page, I have also learned how to used the ID attribute to link further down a longer page, which creates a jump effect link. I will be going over a few more stuff with links, like emailing, and force opening in another tab.
<ol><li></li></ol>-Ordered lists
<ul><li></li></ul>- Unordered lists
The <li></li> tags need to be used in the lists to define each list item. I have also learned nested lists which I'm not going to list here due to complexity.
<dl></dl>-Definition list opening tags, <dt></dt> Definition terms to list items and <dd></dd> Definition data to list meaning/definition/explanation.

That pretty much sums up my progress so far. I have also practice quite a fair bit, and find it easy to type up a simple web page code.

Like this...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>#1 Forum Member</title>
</head>
<body>
<h1>The Number One Forum Member</h1>
<p>The number one forum member is <mark>ME</mark> Web_Dev_Chris.</p>
</body>
</html>
HTML:

Web_Dev_Chris, Jun 14, 2016 IP

PoPSiCLe Illustrious Member

Messages:: 4,623

Likes Received:: 725

Best Answers:: 152

Trophy Points:: 470

#9

Just wanted to elaborate on some of your comments on the different elements:

Web_Dev_Chris said: ↑

<h1-6></h1-6> - Different headings based on important of titles.
Click to expand...

Well... yes, and no. H1 should only be used once (disregard the HTML5 notion of sections and articles with separate heading context). Also, you should never, ever use a lower number heading unless it's preceded by a higher number. To exemplify: One H1, of which everything else on the page is a descendant. Then comes H2, and WITHIN a H2, you can have a H3, to make a subsection-heading, and within a H3 you can have a H4 and so on. Something like this:
...
<h1>Website heading</h1>
<h2>First content section</h2>
  <p>Content goes here in several paragraphs</p>
  <h3>This is a subsection of the h2 above</h3>
     <p>More content for this subsection</p>
     <h4>This is another subsection, this time of the h3 above</h4>
         <p>Content for the h4 above</p>
  <h3>New h3 for another subsection on the same level as the h3 above</h3>
     <p>And so on and so forth</p>
...
Code (markup):
Web_Dev_Chris said: ↑

<hr/> - Horizontal Line
Click to expand...

No, no, no. A <hr> is a divider, much the same as a heading <h1-6> - and NOT an horisontal line (although that is how it's mostly shown in modern browsers). It's just a divider, put in place where an actual heading serves no purpose. For instance, in many books, you'll see some sort of graphic when this is used, like a twirl or glyph or something similar. It's to divide content, like splitting a footer from the rest of the text.

Web_Dev_Chris said: ↑

  - Proper Space
Click to expand...

Well... it's a No Break Space - it can be used where you want to have more than one space "show up" (if you don't use   but just the space key, only one space will show up, regardless of the amount of spaces in the code. It can also be used to show an elsewise empty element, although that is usually deemed bad practice. Normally, you shouldn't need to use this at all.

PoPSiCLe, Jun 15, 2016 IP

Nigel Lew likes this.

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#10

PoPSiCLe said: ↑
Just wanted to elaborate on some of your comments on the different elements:

Well... yes, and no. H1 should only be used once (disregard the HTML5 notion of sections and articles with separate heading context). Also, you should never, ever use a lower number heading unless it's preceded by a higher number. To exemplify: One H1, of which everything else on the page is a descendant. Then comes H2, and WITHIN a H2, you can have a H3, to make a subsection-heading, and within a H3 you can have a H4 and so on. Something like this:
...
<h1>Website heading</h1>
<h2>First content section</h2>
  <p>Content goes here in several paragraphs</p>
  <h3>This is a subsection of the h2 above</h3>
     <p>More content for this subsection</p>
     <h4>This is another subsection, this time of the h3 above</h4>
         <p>Content for the h4 above</p>
  <h3>New h3 for another subsection on the same level as the h3 above</h3>
     <p>And so on and so forth</p>
...
Code (markup):
No, no, no. A <hr> is a divider, much the same as a heading <h1-6> - and NOT an horisontal line (although that is how it's mostly shown in modern browsers). It's just a divider, put in place where an actual heading serves no purpose. For instance, in many books, you'll see some sort of graphic when this is used, like a twirl or glyph or something similar. It's to divide content, like splitting a footer from the rest of the text.

Well... it's a No Break Space - it can be used where you want to have more than one space "show up" (if you don't use   but just the space key, only one space will show up, regardless of the amount of spaces in the code. It can also be used to show an elsewise empty element, although that is usually deemed bad practice. Normally, you shouldn't need to use this at all.
Click to expand...
Thank you for the expanded explanation.

Web_Dev_Chris, Jun 15, 2016 IP

Puntocom81 Banned

Messages:: 80

Likes Received:: 3

Best Answers:: 1

Trophy Points:: 35

#11

<hr> means "Horizontal rule" and it should be used for semantic breaks in topic/section, not to draw a line in the screen. That's the task of CSS (presentation).

For example, if you have some paragraphs after <h2> and later the footer info without any header, you should put <hr> in order to separate the content under h2 to the footer info.

http://htmlhelp.com/reference/html40/block/hr.html

That's the reason I use this like deathshadow explains:
hr {
      display:none;
      /*
          HR in my code are for semantic breaks in topic/section, NOT
          style/presentation, so hide them from screen.css users
      */
}
Code (markup):

Last edited: Jun 15, 2016

Puntocom81, Jun 15, 2016 IP

kk5st Prominent Member

Messages:: 3,497

Likes Received:: 376

Best Answers:: 29

Trophy Points:: 335

#12

Web_Dev_Chris said: ↑

<html lang="EN"></html> First and last tag with the lang attribute to let the browser/application know that the webpage is displayed in English.
Click to expand...

One of us is suffering from a misunderstanding. The lang attribute is used as you describe, but that is not its sole usage. It should also be used within the content to indicate words or phrases from a language different from the page's base language. E.g.,
<p>
  Most, if not all <span lang="fr">soi-disant</span> web designers who think that PS 
  is integral to development are blowing smoke up the seventh planet.
</p>
Code (markup):
It's the common default that foreign languages are shown in italics. e.g.
span[lang] {
    font-style: italic;
    }
Code (markup):
This is important to provide a visual cue in graphical browsers and in screen readers, the voice can speak with an appropriate accent.

cheers,

gary

kk5st, Jun 15, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#13

Puntocom81 said: ↑
<hr> means "Horizontal rule" and it should be used for semantic breaks in topic/section, not to draw a line in the screen. That's the task of CSS (presentation).

For example, if you have some paragraphs after <h2> and later the footer info without any header, you should put <hr> in order to separate the content under h2 to the footer info.

http://htmlhelp.com/reference/html40/block/hr.html

That's the reason I use this like deathshadow explains:
hr {
      display:none;
      /*
          HR in my code are for semantic breaks in topic/section, NOT
          style/presentation, so hide them from screen.css users
      */
}
Code (markup):
Click to expand...
Thank you for providing that feedback.
kk5st said: ↑
One of us is suffering from a misunderstanding. The lang attribute is used as you describe, but that is not its sole usage. It should also be used within the content to indicate words or phrases from a language different from the page's base language. E.g.,
<p>
  Most, if not all <span lang="fr">soi-disant</span> web designers who think that PS
  is integral to development are blowing smoke up the seventh planet.
</p>
Code (markup):
It's the common default that foreign languages are shown in italics. e.g.
span[lang] {
    font-style: italic;
    }
Code (markup):
This is important to provide a visual cue in graphical browsers and in screen readers, the voice can speak with an appropriate accent.

cheers,

gary
Click to expand...
Thank you for informing me of this, it's good to know the proper uses of all the attributes and elements of HTML.

Last edited by a moderator: Jun 15, 2016

Web_Dev_Chris, Jun 15, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#14

Thank you everyone for replying with helpful information.

Web_Dev_Chris, Jun 15, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#15

I have applied all of the HTML5 information that I have learned in the last week and a half to design a basic HTML5 webpage with no styling as an exercise to practice what I have learned. All of the above information is applied in the made up webpage.

Live Page:
https://s3.amazonaws.com/aws-website-zerotosuperheroinwebdevelopment-msa5b/index.html

[IMG]

Page Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sydney Soccor Club</title>
</head>
<body>
<h1>Sydneys' Soccor Club</h1>
<p><strong>Welcome to the Mighty Birds.</strong><br/>
Might Birds is Sydneys' <em>top perfoming soccor club</em>, known all over the globe.</p><hr/>
<p>Go straight to Exlusive Training? <a href="#ex">Click Here</a></p>
<h3>Weekly Games</h3>
<p>Games are usually held weekly over many different regional soccor fields.<br/>
<mark>Tickets are now available</mark> to be purchased for next seasons game. <br/><a href="http://www.google.com.au/" title="25% Discount on all early orders." target="_blank">Click Here to Order Now</a></p>
<h3>Custom Club Shoe Design</h3>
<p>The new custom club shoes are now available for purchase!</p>
<h4>Benefits of Custom Shoes</h4>
<ul>
<li>More durable than previous design.</li>
<li>Comfort without loss of performance.</li>
<li>Latest dirt grip technology optimised for speed.</li>
</ul>
<h4>Custom Club Shoes Order Process</h4>
<ol>
<li>Download Measurements Guide - <a href="">Click Here to Download</a></li>
<li>Complete the order section in the measurements guide.</li>
<li>Email Order Section. - <a href="mailto:orders.soccerclubsydney.org">Email Here</a></li>
</ol>
<h3>Most Recent Game</h3>
<h4 title="11/06/16">Game Tally</h4><table border="1">
<tr>
<th></th>
<th>Mighty Birds</th>
<th>Agressive Eagles</th>
</tr>
<tr>
<td>1</td>
<td>12</td>
<td>14</td>
</tr>
<tr>
<td>2</td>
<td>16</td>
<td>18</td>
</tr>

</table>
<p>This was a close match and unfortunable we will not be performing out team victory dance.<br/>
Might Birds fought quite well against the Agressive Eagles, had we another 5 minutes victore would've been ours.<br/>
Nevertheless, the team spirit is still as strong as ever, working hard daily to win the next match.</p>
<p>Ace Jacob amazingly slipped past 8 men on his own, this feat hasn't been seen before in our club.<br/>
Well done Jacob, the team screamed in excitement and amazement as Jacob pulled this trick off.</p>

<feature>
<img src="https://s3.amazonaws.com/aws-website-zerotosuperheroinwebdevelopment-msa5b/images/soccor_match.jpg" alt="Most Recent Soccor Match" title="Jacob moving quickly."/>
<figcaption>Jacob just blew past many men!</figcaption>
</feature>
<h3 id="ex">Exclusive Training</h3>
<p>Keep training hard.Keep training hard.Keep training hard.Keep training hard.Keep training hard.<br/>
Keep training hard.Keep training hard.Keep training hard.Keep training hard.Keep training hard.<br/>
Keep training hard.Keep training hard.Keep training hard.Keep training hard.Keep training hard.<br/>
Keep training hard.Keep training hard.Keep training hard.Keep training hard.Keep training hard.<br/>
Keep training hard.Keep training hard.Keep training hard.Keep training hard.Keep training hard.<br/>
Keep training hard.Keep training hard.Keep training hard.Keep training hard.Keep training hard.<br/></p>
<hr/>
<p>Copyright - Sydneys' Soccer Club 2016 | <a href="mailto:coach@sydney.com">Contact Me</a></p>
</body>
</html>

HTML:

Feedback would be appreciated, thank you!

Regards,
Chris

Web_Dev_Chris, Jun 15, 2016 IP

tomasz86 Greenhorn

Messages:: 24

Likes Received:: 2

Best Answers:: 0

Trophy Points:: 18

#16

There are other issues but just for the table:
<table border="1">
  <caption>Game Tally</caption>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th scope="col">&nbsp;</th>
      <th scope="col">Mighty Birds</th>
      <th scope="col">Agressive Eagles</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>12</td>
      <td>14</td>
    </tr>
    <tr>
      <td>2</td>
      <td>16</td>
      <td>18</td>
    </tr>
  </tbody>
</table>
Code (markup):
Colgroup is not needed in this example but I have just added it to show how to use it. Border="1" is controversial although I prefer to add it as otherwise the table is difficult to read with CSS disabled (especially if it is a large table). In my opinion tables should have borders visible by default, and the reason they do not is because of all the old websites with tables used for layout. The   is typically put into empty cells for old IE compatibility.

Also see https://css-tricks.com/complete-guide-table-element/

tomasz86, Jun 15, 2016 IP

Puntocom81 Banned

Messages:: 80

Likes Received:: 3

Best Answers:: 1

Trophy Points:: 35

#17

You are using <hr> for presentational purposes (drawing a line in the screen). It would be more correct to do something like this:
<div id="header">
<h1>Sydneys' Soccor Club</h1>
<p><strong>Welcome to the Mighty Birds</strong>.</p>
<p>Might Birds is Sydneys' <em>top perfoming soccor club</em>, known all over the globe.</p>
</div>
Code (markup):
I think the slogan should not be treated as a paragraph.

And then you use CSS to reset and draw that line with something like this:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}

img, fieldset {
border:none;
}

#header {
border-bottom:2px solid #eee;
}
Code (markup):
The same with the table, you are using HTML for presentation (border="1"), it should be done in CSS.

Puntocom81, Jun 16, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#18

Puntocom81 said: ↑
You are using <hr> for presentational purposes (drawing a line in the screen). It would be more correct to do something like this:
<div id="header">
<h1>Sydneys' Soccor Club</h1>
<p><strong>Welcome to the Mighty Birds</strong>.</p>
<p>Might Birds is Sydneys' <em>top perfoming soccor club</em>, known all over the globe.</p>
</div>
Code (markup):
I think the slogan should not be treated as a paragraph.

And then you use CSS to reset and draw that line with something like this:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}

img, fieldset {
border:none;
}

#header {
border-bottom:2px solid #eee;
}
Code (markup):
The same with the table, you are using HTML for presentation (border="1"), it should be done in CSS.
Click to expand...
Thank you for this information. I haven't learned about divs or CSS yet. But I think I'll be learning these two very soon. But I'll remember that, HTML is not ideally used for design/display it's more useds for structure.

Web_Dev_Chris, Jun 16, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#19

tomasz86 said: ↑
There are other issues but just for the table:
<table border="1">
  <caption>Game Tally</caption>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th scope="col">&nbsp;</th>
      <th scope="col">Mighty Birds</th>
      <th scope="col">Agressive Eagles</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>12</td>
      <td>14</td>
    </tr>
    <tr>
      <td>2</td>
      <td>16</td>
      <td>18</td>
    </tr>
  </tbody>
</table>
Code (markup):
Colgroup is not needed in this example but I have just added it to show how to use it. Border="1" is controversial although I prefer to add it as otherwise the table is difficult to read with CSS disabled (especially if it is a large table). In my opinion tables should have borders visible by default, and the reason they do not is because of all the old websites with tables used for layout. The   is typically put into empty cells for old IE compatibility.

Also see https://css-tricks.com/complete-guide-table-element/
Click to expand...
Hi thank you for your reply. I haven't learned about colgroup or col yet with tables. I'll need to research this, I'm bound to come across it with the books I'm reading.

Web_Dev_Chris, Jun 16, 2016 IP

ketting00 Well-Known Member

Messages:: 782

Likes Received:: 28

Best Answers:: 3

Trophy Points:: 128

#20

Web_Dev_Chris said: ↑

Thanks for that, this guy has really good information, but he seems a little bitter critic. I don't see the problem with HTML5 if it works and so many people are using it?
Click to expand...

Yeah, I agree. Go ahead with HTML5. If deathshadow ranting at you (sorry to mention, nothing against deathshadow), consult gary. He's always here to help.

Or better yet, follow his signature and read his blog. I still do this from time to time. His suggestions mostly conform with the rest of the world.

ketting00, Jun 17, 2016 IP

Log in or Sign up

Zero to Web Development SUPERHERO

Web_Dev_Chris Well-Known Member

Hiago Lucas Cardeal Greenhorn

raajtram Member

Puntocom81 Banned

Web_Dev_Chris Well-Known Member

PoPSiCLe Illustrious Member

VanceVP Member

Web_Dev_Chris Well-Known Member

PoPSiCLe Illustrious Member

Web_Dev_Chris Well-Known Member

Puntocom81 Banned

kk5st Prominent Member

Web_Dev_Chris Well-Known Member

Web_Dev_Chris Well-Known Member

Web_Dev_Chris Well-Known Member

tomasz86 Greenhorn

Puntocom81 Banned

Web_Dev_Chris Well-Known Member

Web_Dev_Chris Well-Known Member

ketting00 Well-Known Member

Useful Searches