Zero to Web Development SUPERHERO

amyev Well-Known Member

Messages:: 181

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 101

#21

hey Chris
I got this

This XML file does not appear to have any style information associated with it. The document tree is shown below.
");"><Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>5BC03BA32B04ADFA</RequestId>
");"><HostId>
kPyf2tBzFUiqLdPY/bbKuZbljwftFi/A5gOKWL0UUMtucMzXOAJKBS39+DIgbpvndFKtK6xsmqc=
</HostId>
</Error>

amyev, Jun 17, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#22

amyev said: ↑

hey Chris
I got this

This XML file does not appear to have any style information associated with it. The document tree is shown below.
");"><Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>5BC03BA32B04ADFA</RequestId>
");"><HostId>
kPyf2tBzFUiqLdPY/bbKuZbljwftFi/A5gOKWL0UUMtucMzXOAJKBS39+DIgbpvndFKtK6xsmqc=
</HostId>
</Error>
Click to expand...

?? From my website?

Web_Dev_Chris, Jun 18, 2016 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,999

Best Answers:: 253

Trophy Points:: 515

#23

Web_Dev_Chris said: ↑

Anyways, lets look at what I have learned so far.
Click to expand...

Let's go through a few of these and make some adjustments and better explanations for you. Something to remember about HTML is that it was created to be based on professional writing norms, so most of the tags have a meaning, or indicate what would be done to the content in a professionally typewritten document.

Web_Dev_Chris said: ↑

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

Not quite. Well, kind of. Headings provide document structure (unless you're using 5's gibberish pissing on the rules with <section>, <header>, <article>, <aside> and <footer>) in that a H1 is the heading that EVERYTHING on the site is a subsection of. Hence why as Gary mentioned you should have one and only one H1. If you use HTML 5's section tag, you reset to H1 every time you open <section> turning the page into a incomprehensible mess!... think of an H1 like how on every page of a book or newspaper the name of that document is on every page or fold-pair. That's the H1, it ties all the pages together.

An H2 indicates the start of a subsection of the H1, an H3 indicates the start of subsection of the H2 preceding it -- which is why in your code where you have a H3 with no H2 before it? That's gibberish. H4 is the start of a subsection of a H3 all the way down to H6 being a subsection of the H5 before it. That's why skipping numbers going down makes no sense.

RELATED to headings is:

Web_Dev_Chris said: ↑

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

Which as others have mentioned does NOT mean "horizontal line" -- it indicates a horizontal rule; a break in content / change in topic where heading text is unwanted/unwarranted. Horizontal rules can be conveyed in many different ways depending on the target device, from three asterisks centered, to a row of tilde's, to a full on page-feed.

ANY time you're thinking of using a tag just because you want a specific look, you're choosing the wrong tags for the wrong reason.

These meanings of H1..H6 and HR -- breaking the page into sections, is why I consider most of HTML 5's new tags to be rubbish. There ARE a decent number of improvements in HTML 5 like the simplified <head> contents, simplified charset declaration, simplified language declaration, and removal of pointless/redundant type attributes on things like <link rel="stylesheet"> or <script>... but for every improvement there are a dozen "what in blazes are they doing" and MOST of those happen inside <body>.

If we have tags to break it into sections already, why do we need a <section> tag? If we have sections can't one logically assume the last section in a level block might actually be the footer, and if so why do we need a <footer> tag? If you use <aside> to indicate a sidebar, how is that any less presentational a use than <center>? The only manner in which an aside would make sense is as a literary aside, and unless you're writing a lot of scripts for Deadpool or Ferris Bueller, you're not going to have a whole lot of those.

All these new tags just reek of "nobody's using what we already have properly, so let's just throw more tags in there to be misused, claim it fixes everything, shrug and walk away!"

Which is why as Gary said, "disregard the HTML5 notion of sections and articles with separate heading context". You can tell just how much the people at the WhatWG who created HTML 5 (entirely separate from W3C supervision) were completely ignorant of the intent of HTML and why 4 Strict even existed. They basically just documented what people were doing right OR wrong, and said "fine, whatever"... at a time where most developers were still sleazing out HTML 3.2 and proprietary crap under 4 tranny... which is why most of the people who fully embrace 5's bloated asshattery are either brand new to this, or never pulled their cranium out of 1997's rectum.

Moving on...

Web_Dev_Chris said: ↑

<p></p> - General paragraphs.
Click to expand...

GRAMMATICAL paragraphs! As in an ACTUAL paragraph of text in the literary sense. Don't just go slapping it around a few words willy-nilly. In your example page you have a <br> inside a paragraph on what quite clearly should be a heading and a paragraph, not one paragraph. Same goes for the strong as that really doesn't seem like text you'd be implying "more emphasis" to.

Sadly, grammatical paragraphs are something my generation was taught in the third grade... now it seems you can graduate high school without even being introduced to the concept!

The rest of what you have is pretty spot on understanding-wise, and what isn't others have already covered.

As others pointed out with your live page, there's more tags that go into a table than just TR and TD... whilst you have TH, you are lacking their SCOPE attribute and you failed to use THEAD or TBODY.

I would suggest that you put some effort into learning ALL the tags and attributes that go in a table to better understand their structure. One BIG thing that can be hard to wrap your head around is TFOOT.

A TFOOT block is declared BEFORE TBODY, and like THEAD if sent to print should be printed at the bottom of each page just as THEAD is always at the top of each printed page. They are there for structural indicators and because a TFOOT can print at the bottom of a page BEFORE the TBODY is complete, that's why it goes first.

On TH, the SCOPE attribute says which direction the heading applies. COL for column, ROW for row. This can be handy when you have data such as your scorecard:
<table class="scorecard">
	<caption>Game Tally - 11/06/16</caption>
	<thead>
		<tr>
			<th scope="col">Game #</th>
			<th scope="col">Mighty Birds</th>
			<th scope="col">Agressive Eagles</th>
		</tr>
	</thead><tbody>
		<tr>
			<th scope="row">1</th>
			<td>12</td>
			<td>14</td>
		</tr><tr>
			<th scope="row">2</th>
			<td>16</td>
			<td>18</td>
		</tr>
	</tbody>
</table>
Code (markup):
The game number being the heading for the row, indicating what the data in that row is directly tied to.

Also, even though some people will crap on their markup with it, avoid the border attribute, it hasn't officially even existed in HTML since 1998 for a reason. You'll likely soon come across another attribute called "target" -- unless you have framesets (which you shouldn't) in a 4 frameset document (which you shouldn't) you shouldn't be using target. EVER. ESPECIALLY if you're going to use it to shove a new window or tab down the user's throat whether they like it or not.

One BIG thing that stands out to me is that you have a "FEATURE" tag. There is no such tag in ANY HTML specification, so I've no clue what gave you the idea to use that.

Inside that you have figure and figcaption -- two pointless tags from a semantic standpoint unless you actually have a mathematical or scientific figure inside them. As that is quite clearly neither of those things, that's semantically misleading gibberish. Again why I consider most if not all of 5's new tags to be at BEST pointless redundancies, at worst idiotic halfwit nonsense created by people who failed to grasp the POINT of HTML. Which is probably why they had to create it without the W3C's gold stamp, and then somehow managed to shove it down their throat and call that mess a "specification"..

You also seem to be shoving a title on a IMG tag for no good reason as that's outright gibberish... and yes, I know a lot of people do it despite it being nonsense.

TITLE="" should only be used when the content of the tag does not fully convey all the information needed. Since an IMG tag has alt text if you "need" a title, you did something wrong with your alt or the image itself. Where title MIGHT make sense is on an anchor around it to describe where the image goes (since the alt should describe the image itself) -- but if you need that again there's something wrong with the image itself, the alt text, and any accompanying text.

Also, MARK means user selected or annotated text, which means your use of it really makes little to no sense. GENERALLY speaking apart from certain development websites, there's little if any legitimate reason to be using a MARK tag.

Another use of title that's a bit hinky is this:
<a href="http://www.google.com.au/" title="25% Discount on all early orders." target="_blank">Click Here to Order Now</a>
Code (markup):
Again, if you "need' title there, there's something wrong with the text inside the link. I would think "Order Early for a 25% discount" would make far more sense as the text INSIDE the anchor than it does as a title that users might not even see. GENERALLY it's frowned upon in accessibility circles (and SEO one's too) to have text that says "click here" -- some search engines treat those as stop words ignoring the link, of COURSE you click there, it's an anchor -- that's what the underscore, different cursor, and colouration should be telling the user. When possible put USEFUL text saying EXACTLY what it's doing inside the anchor. If you can't do that, have an earlier link with the useful text and use the shorter one as a hint at the bottom. (Articles for example often do this with their heading text, with a "read more" link at the bottom).

But for all that, you're already churning out code a dozen times cleaner than the shlock many so called "experts" in the field will vomit up and have the unmitigated gall to call HTML... so stick with it. You're showing far more promise than most.

Last edited: Jun 19, 2016

deathshadow, Jun 19, 2016 IP

Puntocom81 likes this.

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#24

deathshadow said: ↑
Let's go through a few of these and make some adjustments and better explanations for you. Something to remember about HTML is that it was created to be based on professional writing norms, so most of the tags have a meaning, or indicate what would be done to the content in a professionally typewritten document.

Not quite. Well, kind of. Headings provide document structure (unless you're using 5's gibberish pissing on the rules with <section>, <header>, <article>, <aside> and <footer>) in that a H1 is the heading that EVERYTHING on the site is a subsection of. Hence why as Gary mentioned you should have one and only one H1. If you use HTML 5's section tag, you reset to H1 every time you open <section> turning the page into a incomprehensible mess!... think of an H1 like how on every page of a book or newspaper the name of that document is on every page or fold-pair. That's the H1, it ties all the pages together.

An H2 indicates the start of a subsection of the H1, an H3 indicates the start of subsection of the H2 preceding it -- which is why in your code where you have a H3 with no H2 before it? That's gibberish. H4 is the start of a subsection of a H3 all the way down to H6 being a subsection of the H5 before it. That's why skipping numbers going down makes no sense.

RELATED to headings is:

Which as others have mentioned does NOT mean "horizontal line" -- it indicates a horizontal rule; a break in content / change in topic where heading text is unwanted/unwarranted. Horizontal rules can be conveyed in many different ways depending on the target device, from three asterisks centered, to a row of tilde's, to a full on page-feed.

ANY time you're thinking of using a tag just because you want a specific look, you're choosing the wrong tags for the wrong reason.

These meanings of H1..H6 and HR -- breaking the page into sections, is why I consider most of HTML 5's new tags to be rubbish. There ARE a decent number of improvements in HTML 5 like the simplified <head> contents, simplified charset declaration, simplified language declaration, and removal of pointless/redundant type attributes on things like <link rel="stylesheet"> or <script>... but for every improvement there are a dozen "what in blazes are they doing" and MOST of those happen inside <body>.

If we have tags to break it into sections already, why do we need a <section> tag? If we have sections can't one logically assume the last section in a level block might actually be the footer, and if so why do we need a <footer> tag? If you use <aside> to indicate a sidebar, how is that any less presentational a use than <center>? The only manner in which an aside would make sense is as a literary aside, and unless you're writing a lot of scripts for Deadpool or Ferris Bueller, you're not going to have a whole lot of those.

All these new tags just reek of "nobody's using what we already have properly, so let's just throw more tags in there to be misused, claim it fixes everything, shrug and walk away!"

Which is why as Gary said, "disregard the HTML5 notion of sections and articles with separate heading context". You can tell just how much the people at the WhatWG who created HTML 5 (entirely separate from W3C supervision) were completely ignorant of the intent of HTML and why 4 Strict even existed. They basically just documented what people were doing right OR wrong, and said "fine, whatever"... at a time where most developers were still sleazing out HTML 3.2 and proprietary crap under 4 tranny... which is why most of the people who fully embrace 5's bloated asshattery are either brand new to this, or never pulled their cranium out of 1997's rectum.

Moving on...

GRAMMATICAL paragraphs! As in an ACTUAL paragraph of text in the literary sense. Don't just go slapping it around a few words willy-nilly. In your example page you have a <br> inside a paragraph on what quite clearly should be a heading and a paragraph, not one paragraph. Same goes for the strong as that really doesn't seem like text you'd be implying "more emphasis" to.

Sadly, grammatical paragraphs are something my generation was taught in the third grade... now it seems you can graduate high school without even being introduced to the concept!

The rest of what you have is pretty spot on understanding-wise, and what isn't others have already covered.

As others pointed out with your live page, there's more tags that go into a table than just TR and TD... whilst you have TH, you are lacking their SCOPE attribute and you failed to use THEAD or TBODY.

I would suggest that you put some effort into learning ALL the tags and attributes that go in a table to better understand their structure. One BIG thing that can be hard to wrap your head around is TFOOT.

A TFOOT block is declared BEFORE TBODY, and like THEAD if sent to print should be printed at the bottom of each page just as THEAD is always at the top of each printed page. They are there for structural indicators and because a TFOOT can print at the bottom of a page BEFORE the TBODY is complete, that's why it goes first.

On TH, the SCOPE attribute says which direction the heading applies. COL for column, ROW for row. This can be handy when you have data such as your scorecard:
<table class="scorecard">
    <caption>Game Tally - 11/06/16</caption>
    <thead>
        <tr>
            <th scope="col">Game #</th>
            <th scope="col">Mighty Birds</th>
            <th scope="col">Agressive Eagles</th>
        </tr>
    </thead><tbody>
        <tr>
            <th scope="row">1</th>
            <td>12</td>
            <td>14</td>
        </tr><tr>
            <th scope="row">2</th>
            <td>16</td>
            <td>18</td>
        </tr>
    </tbody>
</table>
Code (markup):
The game number being the heading for the row, indicating what the data in that row is directly tied to.

Also, even though some people will crap on their markup with it, avoid the border attribute, it hasn't officially even existed in HTML since 1998 for a reason. You'll likely soon come across another attribute called "target" -- unless you have framesets (which you shouldn't) in a 4 frameset document (which you shouldn't) you shouldn't be using target. EVER. ESPECIALLY if you're going to use it to shove a new window or tab down the user's throat whether they like it or not.

One BIG thing that stands out to me is that you have a "FEATURE" tag. There is no such tag in ANY HTML specification, so I've no clue what gave you the idea to use that.

Inside that you have figure and figcaption -- two pointless tags from a semantic standpoint unless you actually have a mathematical or scientific figure inside them. As that is quite clearly neither of those things, that's semantically misleading gibberish. Again why I consider most if not all of 5's new tags to be at BEST pointless redundancies, at worst idiotic halfwit nonsense created by people who failed to grasp the POINT of HTML. Which is probably why they had to create it without the W3C's gold stamp, and then somehow managed to shove it down their throat and call that mess a "specification"..

You also seem to be shoving a title on a IMG tag for no good reason as that's outright gibberish... and yes, I know a lot of people do it despite it being nonsense.

TITLE="" should only be used when the content of the tag does not fully convey all the information needed. Since an IMG tag has alt text if you "need" a title, you did something wrong with your alt or the image itself. Where title MIGHT make sense is on an anchor around it to describe where the image goes (since the alt should describe the image itself) -- but if you need that again there's something wrong with the image itself, the alt text, and any accompanying text.

Also, MARK means user selected or annotated text, which means your use of it really makes little to no sense. GENERALLY speaking apart from certain development websites, there's little if any legitimate reason to be using a MARK tag.

Another use of title that's a bit hinky is this:
<a href="http://www.google.com.au/" title="25% Discount on all early orders." target="_blank">Click Here to Order Now</a>
Code (markup):
Again, if you "need' title there, there's something wrong with the text inside the link. I would think "Order Early for a 25% discount" would make far more sense as the text INSIDE the anchor than it does as a title that users might not even see. GENERALLY it's frowned upon in accessibility circles (and SEO one's too) to have text that says "click here" -- some search engines treat those as stop words ignoring the link, of COURSE you click there, it's an anchor -- that's what the underscore, different cursor, and colouration should be telling the user. When possible put USEFUL text saying EXACTLY what it's doing inside the anchor. If you can't do that, have an earlier link with the useful text and use the shorter one as a hint at the bottom. (Articles for example often do this with their heading text, with a "read more" link at the bottom).

But for all that, you're already churning out code a dozen times cleaner than the shlock many so called "experts" in the field will vomit up and have the unmitigated gall to call HTML... so stick with it. You're showing far more promise than most.
Click to expand...
Thank you deathshadow for this very long, very informative response. I'll be sure to absorb the correction.

Regards,
Chris

Web_Dev_Chris, Jun 19, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#25

Progress on CSS

I know there are three different ways to use CSS.

Internal, external and inline. I have chosen to practice/go with external via .css as it's the most recommended and to me best practice.

In theory it's pretty simple.

1.)
Add a link into the head section <link rel="stylesheet" href="style.css" /> to tell the browser that the HTML document is associated with a file called style.css

2.) CSS rules
Property (effects) and value (commands). Start with TAG/selected elements, open and closes with {} place colon : in middle of rule and end with semicolon ;.

I have learned how to use a few selectors such the class attribute and span tag to select and identify text the .tc example is using a span tag with the class attribute to select a specific word in my paragraph.

Example:
P
{
  color:blue;
}

h1
{
  color:blue;
  font-size:200%;
  font-family:impact;
}

.tc
{
  color:red;
  font-size:200%;
  font-family:impact;
}
body
{
  background-color:pink
}
Code (markup):
I know I'm just touching water here, I still have a lot to learn as I study daily. I'll continue to post my updates.

Regards,
Chris

Last edited: Jun 19, 2016

Web_Dev_Chris, Jun 19, 2016 IP

Christine Hopkins Greenhorn

Messages:: 15

Likes Received:: 2

Best Answers:: 0

Trophy Points:: 23

#26

Best of luck for your future. It will take time but hard work and passion to do something is the key of success for you. Set a goal as you have done and follow that till the last breath. If you want to learn then you may also contact with other web development company to get ideas and knowledge. It will be useful for you.

Christine Hopkins, Jun 24, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#27

Background Property

There are five background properties that are used to manipulate backgrounds to different elements in CSS.

background-color: aliceblue;

The “background-color” property is used to change/set the background colour of an element. There are over 100 pre-defined color values that can be used like white, red, pink, blue, deepskyblue, aliceblue and many more. The hex code can be used to set a color “#f1f1f1” or rgb (0,0,255).

background-image: url (“.../images/smallpebbles.jpg”);

The “background-image” property allows you to set an image within an element.

background-repeat: no-repeat;

The “background-repeat” property specifies whether to repeat the background image or how to repeat it. The background-repeat has three different values repeat-x, repeat-y, no-repeat. The repeat-x value repeats the image along the x(left and right) axis, repeat-y repeats the image along the y(up and down) axis. The no-repeat value stops the images from repeating.

background-attachment: fixed;

The background-attachment property defines how the image should be attached to the element and has three values. Scroll, the image scrolls along with the element. Fixed, the image is fixed in regards to the viewport. Local, the image scrolls with the element content.

background-position: left top;

The background-position property allows you to specify the location of the image within an element. There are 9 pre-defined values for locations that can be used with the property. Left top, left center, left bottom, center top, center center, center bottom, right top, right center, right bottom. To define the exact location of an image you can use two number with measurement units or percentages next to each other, the first number represents the x axis and the second the y axis. The combination of 0 0 or 0% 0% will set the image in the top left corner and 100% 100% will set the image in the bottom right corner.

Shorthand Code:

The shorthand code would like look this, it uses the background property to combine all background properties into a single line.

background: #f1f1f1 url(".../images/rocks.jpg") no-repeat fixed left center;

The order has to be as follows:
Color, image, repeat, attachment and position and it doesn't have to include all properties.

Web_Dev_Chris, Jun 27, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#28

Border Property:

There are three different properties to define a border of an element which is border-style, border-width and border-color.

Border-style: dotted;

The border style has 10 different values to change the border around an element which are defined as dotted, dashed, solid, double, groove (3D effect), ridge(3D effect), inset(3D effect), outset(3D effect), none (no border) and hidden (hidden border). Each side can also have a different border.

Border-width: 2px 5px 3px 10px;

The border width property defines the thickness to the border of an element. The border width can be set with any css measurement unit px, pt, cm, em ect... There are three pre-defined values of thin, medium and thick that can also be used to specify the size. To define each side of a border add 4 number in measurement units as seen above. First defines the top, second the right, third the bottom and last the left. You can also use border-width-top, border-width-right, border-width-bottom and border-width-left to set the border width of a specific side.

Border-color: darkblue;

The border-color defines the colour of the border. Each side can also have a different color

Shorthand Code:

Border: dotted 6px darkblue;

Web_Dev_Chris, Jun 27, 2016 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,999

Best Answers:: 253

Trophy Points:: 515

#29

Some advice on colours -- avoid using the named colours; well over 80% of them didn't officially even exist in the CSS specification until recently, and they are a relic of X11 screenspace at 6500 degree colour, as opposed to the 9500 to 10K that's commonplace on todays displays. Hence why they have a "brown" that's actually just red, if there's no green component, it's NOT brown! Well, unless your colour palette on the display is shifted to green like the older *nix graphical displays that cheaped out on their colour phosphors. Nothing like paying ten times what a PC cost in the '80's just to get cheaper phosphors than a magnovox TV

Also avoid using RGB unless you REALLY need the RGBA version. Legacy IE will apply an incorrect gamma to RGB just like it does to png -- but only on certain platforms. The colour mismatch can drive you nutters when someone reports it.

For primary colours, try to stick to the 12 bit 3 digit hex space. A LOT of mobile devices -- and Apple being cheap lying ***'s selling people 16 or 22 bit displays as 24 bit -- are far less than the full 16.7 million colour capable, and fake the higher colour depth with dithering. A LOT of displays claiming to be "16.2 million" instead of the full "16.7" are in fact only 65536 colour capable -- a bold faced lie to consumers. Ever design something to be brown, go view it on an older G3 or G4 apple or a low end handheld and everything is purple? That's why? (they cheap out on the blue channel usually reducing it to 5 or six bits -- sometimes you only get 7 bits of green, 5 bits of red, and 4 bits of blue). Just something to be aware of on the accessibility front.

Basically, when possible, stick to hex... and for the love of Christamas it's "F1F1F1" not "f1f1f1", you're not writing sexigesimal (base 60) or gah, I forget the proper name for 36 bits per character. (DEC mainframes used it).

Sorry, pet peeve from old fart who remembers when if you saw a lower case letter you assumed it WASN'T Hex, but some other number system... but I'm old enough to remember working with 6 bit subbytes and 6 bit character sets. -- aka the entire character set only allowed for 64 characters, hence the 64 in base64 encoding. Amazing how many dipshits think that base64 is 64 bit; it's not, it's a relic of 6 bit mainframes. That's why it's also NOT a "native format" on anything other than ancient mainframes, no matter how many ignorant fools will try to tell you otherwise.

The only reason it was used for e-mail encoding in the first place was supporting legacy mainframe users.

Last edited: Jun 28, 2016

deathshadow, Jun 28, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#30

I think I've learned enough to replicate my CV on a webpage. The first official project will be to reproduce my resume on a plain webpage.

Web_Dev_Chris, Jun 28, 2016 IP

serialentre Member

Messages:: 123

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 30

#31

Hey Chris,

If you need more structure in your self-learning, check out Free Code Camp, and their community on gitter.
Their programme has plenty of materials and projects for you to attemp.
Their gitter community is online 24/7.

serialentre, Jun 28, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#32

serialentre said: ↑

Hey Chris,

If you need more structure in your self-learning, check out Free Code Camp, and their community on gitter.
Their programme has plenty of materials and projects for you to attemp.
Their gitter community is online 24/7.
Click to expand...

That's looks awesome and fun, I'm signing up!

Web_Dev_Chris, Jun 28, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#33

I did kind-of replicate my resume with HTML and CSS, then accidently deleted a portion of the code and saved over it. So I'm a bit annoyed about that, but It's on hold at the moment. Not finished yet.

Anyways, I'm working on a new website. Before I get too carried away with styling could some please check my HTML code to make sure I have used it to display semantic meaning properly.

As suggested on Cutcodedown.com to start from the content up, that's what I have done. Content, HTML and now I'm kind of playing with style.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>View-Resume.com</title>
</head>
<body>
<div id="header">
<h1>View Resume</h1>
<h2>Streamline your resume with our service.</h2>
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Our Services</a></li>
<li><a href="">FAQS</a></li>
<li><a href="">References</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
<div id="topfeature">
<h2>Who we are</h2>
<p>View-resume.com is here to provide you with a unique service. We streamline your resume that will potentially hook you up with a rewarding future job. Our services include, simplifying, designing, and hosting your resume.
Access and print your resume from anywhere around the world. Receive an easily remembered personal link that will render your resume on any device whether it be mobile, tablet, laptop and pc.
</p>
<h3>Simple process</h3>
<p>Give us your resume, we simplify the design, we host it and we give you a unique link (example: “view-resume.com/johnsmith”) that will take you directly to your resume. <a href="">See Our Design Range</a>.
</p>
<p>
Find out <a href="">how we are different</a> from other online services.
</p>
</div>
<div id="body-container">
<h2>Resume Tips</h2>
<ol class="article-index">
<span>Article Index</span>
<li><a href="#index1">Positive Initial Impression</a></li>
<li><a href="#index2">Prioritise your strengths</a></li>
<li><a href="#index3">Outline achievements to illustrate value</a></li>
<li><a href="#index4">Relevant Keywords to Company Culture</a></li>
</ol>
<h3 id="index1">Positive Initial Impression</h3>
<p>
A resume is an essential document that is required to apply for jobs. Your resume has a vibe. When someone looks at it, it leaves an impression. To put it simple, it’s the initial thought or subconscious notion that’s created in someone’s mind when your resume is displayed.
</p>
<p>
After the first six seconds of seeing it, most recruiters have already made a decision. Everything has been noted, name, education, current position and company, previous position and company ect... the list goes on...
</p>
<p>
Simple, make a few minor adjustments. This makes all the difference. These changes will give your resume a positive first impression. Do this and improve your chance of being shortlisted.
</p>
<h3 id="index2">Prioritise your strengths</h3>
<p>
Think about everything, it all counts towards making that first positive impression. Make the changes to get ahead of pack. Two words, so simple!
</p>
<p>
Fresh out of school or just finished university? Emphasize education sooner. Do you have a solid work history with accomplishments? Emphasize work history sooner. Maybe you have relationships or connections with well know high stake-holders, who said you couldn’t emphasise contacts sooner.
</p>
<blockquote>
Karen Southall Watts - Career Coach and Business Consultant -  “But, if you have a previous position that makes you a great match for an advertised job, there's no rule that says you can't highlight your work history and put education further down the page,” she adds.
</blockquote>
<h3 id="index3">Outline achievements to illustrate value</h3>
<p>
Do not make the rooky mistake of listing day to day duties. Instead, illustrate your achievements to reflect the requirements of the role. This is much more appealing than just listing some day to day duties. It displays how well you perform them and highlights proven results.
</p>
<ul>
<caption><h4>Two ways this can look:</h4></caption>
<li>Illustrate results while your competitor outlines day to day duties.</li>
<li>The competitor outlines results while you have list good-for-nothing day to day duties.</li>
</ul>
<p>
Day to day duties seem less convincing and less impressive to recruiters. For example, instead of writing about your experience selling cars, write about the impact achieved. Maybe you smashed past the targeted percentage, maybe there was a day that you were able to sell fifty cars. Apply, rule out another odd.
</p>
<ul>
<caption><h4>Stand out and have some uniqueness:</h4></caption>
<li>Express qualities and skills ect... in the present tense. </li>
<li>Ensure positive skills and qualities are highlighted.</li>
<li>Allocate more space for your most recent positions. Employers will pay more attention here.</li>
</ul>
<h3 id="index4">Relevant Keywords to Company Culture</h3>
<p>
Many companies are starting to rely on software to pick/analyse and narrow down relevant resumes. This is more convenient for employers to get through the resume selection process. It allows them to quickly narrow down the hundreds of applications to the few selected ones.
</p>
<ol>
<caption><h4>Typically the software works like this:</h4></caption>
<li>The Department of Human Resources will receive your resume along side of hundreds of others.</li>
<li>All style is removed and text is broken down into recognisable strings of data for further analysis.</li>
<li>Meaning is assigned to resume content. (Example, Education, Work Experience, Skills, and Contact Info)</li>
<li>Employers will use keywords to search for candidates. (Example: Web Development, Market Research)</li>
<li>Your resume is given a score based on the relevancy.</li>
</ol>
<h4>Salt and pepper your resume</h4>
<p>
Flavour your resume with company culture keywords to add definable contrast that recruiters may notice. Start by familiarising yourself with the company, read information, browse the website to gain an understanding. Keep your resume fairly relevant to the position you are applying for, common sense. This will not guarantee your shortlist/job interview.  Although ruling out more odds are definitely an advantage.
</p>
</div>
<hr>
<div id="footer">
&copy; View-resume.com - 2016 | <a href="mailto:chrisditfort@gmail.com">Contact Us</a>
</div>
</body>
</html>

HTML:

/* 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;
}
* { //specific settings applied to all elements
   background-repeat: no-repeat;
}
hr {
   display: none;
}
blockquote {
background-color: #EFF;
border: dashed .1em #000;
border-radius: 1em;
padding: .8em;
font-family: verdana, arial, serif;
font-size:1em;
font-weight: bold;
width: 25em;
}
p, h2, h3, h4, h5, h5, blockquote, span, caption {
margin:1em .5em;
}
ul, ol {
margin: .5em;
padding: .5em 2em;
}
#menu {
list-style:none;

}
#header {
color:#EFF;
background-color: #000;
max-Width: 100em;
height: 10em;
}
#header h2 {
margin:o;
padding:0;
}
.article-index {
background-color: #EEF;
border: hidden .1em #000;
border-radius: 1em;
max-width: 21em;
}
.article-index span {
font-family: serif, verdana, arial;
font-size:1.7em;
}
#body-container {
max-width: 45em;
padding: .5em;
border: solid .1em #000;
border-bottom:none;
border-top: dotted .2em #000;
margin: 1em auto 0;
}
#body-container p, ul, ol {
font-family: verdana, arial, serif;
font-size:1em;
}
#footer {
font-size: 1.2em;
padding: 1em;
max-width: 100em;
height: 1em;
color: #FFF;
background-color: #000;
text-align: center;
}
#footer a {
color:white;
text-decoration:none;
border: solid .1em #EEE;
border-radius: 1em;
padding: .2em;
}

Code (CSS):

Web_Dev_Chris, Jul 10, 2016 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,999

Best Answers:: 253

Trophy Points:: 515

#34

Some FORMATTING would be nice... since you pulled all the tabs making easy verification of openings and closures harder to do... though you have a LOT of invalid markup such as a span where span can't go (as a direct child of a OL), CAPTION tags when there's no table ALSO applied to a list (the ONLY thing that can be a direct child of a list is a LI), H4 inside a CAPTION which makes even less sense (since caption IS a type of heading!), I'm REALLY not sold that your h1+h2 pairing makes even the least bit of sense since you don't seem to be opening up a new subsection of the page yet (probably why you're all the way up to H4 later on), BLOCKQUOTE is not a content wrapper, you MUST put a valid content containing tag like <p> or <div> inside it...

It's pretty clear that your next learning step should be getting a handle on what tags are valid inside which other tags as you pretty much aren't nesting any of them even CLOSE to properly. Whilst it's an older reference, I would really suggest that you go through this site:

http://www.htmlhelp.com/reference/html40/

... and look under each of the tags in the reference paying attention to the "contained in" and "contains" sections. For example if we go to OL:
http://www.htmlhelp.com/reference/html40/lists/ol.html

Under "contents" you can see the ONLY valid tag you can have as a direct child of a OL is a LI. Same goes for UL. As such you can't just slap a span, caption, or heading inside the list. You want a heading for the list, put it in as a numbered heading BEFORE the list!

Look at caption:
http://www.htmlhelp.com/reference/html40/tables/caption.html

"contained in: TABLE" -- that's it. It can ONLY be used as a direct child of TABLE. That's another detail, when it says "contained in" it means as a direct child of that element, as such:
<table>
  <caption>Describe the table Here</caption>
Code (markup):
Is valid.
<table>
  <thead>
    <caption>Describe Table Here</caption>
Code (markup):
Is NOT valid as it's not the DIRECT child of table, it's a grandkid.

If we look at blockquote:
http://www.htmlhelp.com/reference/html40/block/blockquote.html

Must have a block level container as a child in Strict... now, HTML 5 kind of pissed on that behaving like HTML 3.2, but honestly a LOT of what HTML 5 says is ok is ignorant nonsense and a hefty part of why I have zero confidence in the WhatWG or the W3C to be making the specification any more. So far as HTML 5's loosening of the structural rules are concerned, I think the people who did so need their heads examined and so far as using said looser practice, they need to take a sugar frosted *** off the end of my ***.

In case you couldn't tell, I'm not exactly a fan of HTML 5 or the direction it's headed; said direction being the WORST of 1990's "sleaze it together any old way" practices! **** juggling thunder-****'s

Also, I say don't bother with en-US or en-UK distinctions, half the UA's out there won't recognize anything other than the two-letter variant anyways. It's also technically invalid in a charset declaration to say "UTF" instead of "utf" -- though the number of UA's that choke on that can be easily dismissed... and of course you have no media targets on your stylesheet link... are using a uselessly vague "style.css" OF COURSE it's STYLE, it's a CSS FILE!!! instead of a meaningful name like say... the media target? Also the lack of a viewport meta will bite you when it's time to go responsive.

Guessing wildly as your layout is still quite clearly incomplete, a cleaner HTML would go something like this:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
	name="viewport"
	content="width=device-width,height=device-height,initial-scale=1"
>
<link
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
>
<title>
	View-Resume.com
</title>
</head><body>

<div id="top">

	<h1>
		<a href="/">
			View Resume<br>
			<small>Streamline your resume with our service.</small>
		</a>
	</h1>
	
	<ul id="mainMenu">
		<li><a href="/">Home</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Our Services</a></li>
		<li><a href="#">FAQS</a></li>
		<li><a href="#">References</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
	
</div>

<div class="subSection">
	<h2>Who we are</h2>
	<p>
		View-resume.com is here to provide you with a unique service. We streamline your resume that will potentially hook you up with a rewarding future job. Our services include, simplifying, designing, and hosting your resume. Access and print your resume from anywhere around the world. Receive an easily remembered personal link that will render your resume on any device whether it be mobile, tablet, laptop and pc.
	</p>
	
	<h3>Simple process</h3>
	<p>
		Give us your resume, we simplify the design, we host it and we give you a unique link (example: "view-resume.com/johnsmith") that will take you directly to your resume. <a href="">See Our Design Range</a>.
	</p><p>
		Find out <a href="">how we are different</a> from other online services.
	</p>
</div>

<div class="subsection">
	<h2>Resume Tips</h2>
	
	<div class="index">
		<h3>Article Index</h3>
		<ol>
			<li><a href="#positive_initial_impression">Positive Initial Impression</a></li>
			<li><a href="#prioritize_your_strengths">Prioritise your strengths</a></li>
			<li><a href="#outline_achievements">Outline achievements to illustrate value</a></li>
			<li><a href="#relevant_keywords">Relevant Keywords to Company Culture</a></li>
		</ol>
	</div>
	
	<h3 id="positive_initial_impression">Positive Initial Impression</h3>
	<p>
		A resume is an essential document that is required to apply for jobs. Your resume has a vibe. When someone looks at it, it leaves an impression. To put it simple, it’s the initial thought or subconscious notion that’s created in someone’s mind when your resume is displayed.
	</p><p>
		After the first six seconds of seeing it, most recruiters have already made a decision. Everything has been noted, name, education, current position and company, previous position and company ect... the list goes on...
	</p><p>
		Simple, make a few minor adjustments. This makes all the difference. These changes will give your resume a positive first impression. Do this and improve your chance of being shortlisted.
	</p>
	
	<h3 id="prioritize_your_strengths">Prioritise your strengths</h3>
	<p>
		Think about everything, it all counts towards making that first positive impression. Make the changes to get ahead of pack. Two words, so simple!
	</p><p>
		Fresh out of school or just finished university? Emphasize education sooner. Do you have a solid work history with accomplishments? Emphasize work history sooner. Maybe you have relationships or connections with well know high stake-holders, who said you couldn’t emphasise contacts sooner.
	</p>
	
	<blockquote>
		<p>
			<cite>Karen Southall Watts, Career Coach and Business Consultant</cite> -
			 "But, if you have a previous position that makes you a great match for an advertised job, there's no rule that says you can't highlight your work history and put education further down the page"
		</p>
	</blockquote>
	
	<h3 id="outline_achievements">Outline achievements to illustrate value</h3>
	<p>
		Do not make the rooky mistake of listing day to day duties. Instead, illustrate your achievements to reflect the requirements of the role. This is much more appealing than just listing some day to day duties. It displays how well you perform them and highlights proven results.
	</p>
	
	<div class="points">
		<h4>Two ways this can look:</h4>
		<ul>
			<li>Illustrate results while your competitor outlines day to day duties.</li>
			<li>The competitor outlines results while you have list good-for-nothing day to day duties.</li>
		</ul>
	</div>
	
	<p>
		Day to day duties seem less convincing and less impressive to recruiters. For example, instead of writing about your experience selling cars, write about the impact achieved. Maybe you smashed past the targeted percentage, maybe there was a day that you were able to sell fifty cars. Apply, rule out another odd.
	</p>
	
	<div class="points">
		<h4>Stand out and have some uniqueness:</h4>
		<ul>
			<li>Express qualities and skills ect... in the present tense. </li>
			<li>Ensure positive skills and qualities are highlighted.</li>
			<li>Allocate more space for your most recent positions. Employers will pay more attention here.</li>
		</ul>
	</div>
	
	<h3 id="relevant_keywords">Relevant Keywords to Company Culture</h3>
	<p>
		Many companies are starting to rely on software to pick/analyse and narrow down relevant resumes. This is more convenient for employers to get through the resume selection process. It allows them to quickly narrow down the hundreds of applications to the few selected ones.
	</p>
	
	<div class="points">
		<h4>Typically the software works like this:</h4>
		<ol>
			<li>The Department of Human Resources will receive your resume along side of hundreds of others.</li>
			<li>All style is removed and text is broken down into recognisable strings of data for further analysis.</li>
			<li>Meaning is assigned to resume content. (Example, Education, Work Experience, Skills, and Contact Info)</li>
			<li>Employers will use keywords to search for candidates. (Example: Web Development, Market Research)</li>
			<li>Your resume is given a score based on the relevancy.</li>
		</ol>
	</div>
	
	<h4>Salt and pepper your resume</h4>
	<p>
		Flavour your resume with company culture keywords to add definable contrast that recruiters may notice. Start by familiarising yourself with the company, read information, browse the website to gain an understanding. Keep your resume fairly relevant to the position you are applying for, common sense. This will not guarantee your shortlist/job interview.  Although ruling out more odds are definitely an advantage.
	</p>
	
</div>

<div id="footer">
	<hr>
	&copy; View-resume.com &bull;
	<a href="mailto:chrisditfort@gmail.com">Contact Us</a>
</div>

</body></html>
Code (markup):
Well, probably without the comment bitching out the W3C and WhatWG for the idiotic jackasses they've become. (well, WhatWG always kind of were since they never embraced 4 Strict and completely ignored what HTML is FOR!

deathshadow, Jul 10, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#35

deathshadow said: ↑
Some FORMATTING would be nice... since you pulled all the tabs making easy verification of openings and closures harder to do... though you have a LOT of invalid markup such as a span where span can't go (as a direct child of a OL), CAPTION tags when there's no table ALSO applied to a list (the ONLY thing that can be a direct child of a list is a LI), H4 inside a CAPTION which makes even less sense (since caption IS a type of heading!), I'm REALLY not sold that your h1+h2 pairing makes even the least bit of sense since you don't seem to be opening up a new subsection of the page yet (probably why you're all the way up to H4 later on), BLOCKQUOTE is not a content wrapper, you MUST put a valid content containing tag like <p> or <div> inside it...

It's pretty clear that your next learning step should be getting a handle on what tags are valid inside which other tags as you pretty much aren't nesting any of them even CLOSE to properly. Whilst it's an older reference, I would really suggest that you go through this site:

http://www.htmlhelp.com/reference/html40/

... and look under each of the tags in the reference paying attention to the "contained in" and "contains" sections. For example if we go to OL:
http://www.htmlhelp.com/reference/html40/lists/ol.html

Under "contents" you can see the ONLY valid tag you can have as a direct child of a OL is a LI. Same goes for UL. As such you can't just slap a span, caption, or heading inside the list. You want a heading for the list, put it in as a numbered heading BEFORE the list!

Look at caption:
http://www.htmlhelp.com/reference/html40/tables/caption.html

"contained in: TABLE" -- that's it. It can ONLY be used as a direct child of TABLE. That's another detail, when it says "contained in" it means as a direct child of that element, as such:
<table>
  <caption>Describe the table Here</caption>
Code (markup):
Is valid.
<table>
  <thead>
    <caption>Describe Table Here</caption>
Code (markup):
Is NOT valid as it's not the DIRECT child of table, it's a grandkid.

If we look at blockquote:
http://www.htmlhelp.com/reference/html40/block/blockquote.html

Must have a block level container as a child in Strict... now, HTML 5 kind of pissed on that behaving like HTML 3.2, but honestly a LOT of what HTML 5 says is ok is ignorant nonsense and a hefty part of why I have zero confidence in the WhatWG or the W3C to be making the specification any more. So far as HTML 5's loosening of the structural rules are concerned, I think the people who did so need their heads examined and so far as using said looser practice, they need to take a sugar frosted *** off the end of my ***.

In case you couldn't tell, I'm not exactly a fan of HTML 5 or the direction it's headed; said direction being the WORST of 1990's "sleaze it together any old way" practices! **** juggling thunder-****'s

Also, I say don't bother with en-US or en-UK distinctions, half the UA's out there won't recognize anything other than the two-letter variant anyways. It's also technically invalid in a charset declaration to say "UTF" instead of "utf" -- though the number of UA's that choke on that can be easily dismissed... and of course you have no media targets on your stylesheet link... are using a uselessly vague "style.css" OF COURSE it's STYLE, it's a CSS FILE!!! instead of a meaningful name like say... the media target? Also the lack of a viewport meta will bite you when it's time to go responsive.

Guessing wildly as your layout is still quite clearly incomplete, a cleaner HTML would go something like this:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
    name="viewport"
    content="width=device-width,height=device-height,initial-scale=1"
>
<link
    rel="stylesheet"
    href="screen.css"
    media="screen,projection,tv"
>
<title>
    View-Resume.com
</title>
</head><body>

<div id="top">

    <h1>
        <a href="/">
            View Resume<br>
            <small>Streamline your resume with our service.</small>
        </a>
    </h1>
   
    <ul id="mainMenu">
        <li><a href="/">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Our Services</a></li>
        <li><a href="#">FAQS</a></li>
        <li><a href="#">References</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
   
</div>

<div class="subSection">
    <h2>Who we are</h2>
    <p>
        View-resume.com is here to provide you with a unique service. We streamline your resume that will potentially hook you up with a rewarding future job. Our services include, simplifying, designing, and hosting your resume. Access and print your resume from anywhere around the world. Receive an easily remembered personal link that will render your resume on any device whether it be mobile, tablet, laptop and pc.
    </p>
   
    <h3>Simple process</h3>
    <p>
        Give us your resume, we simplify the design, we host it and we give you a unique link (example: "view-resume.com/johnsmith") that will take you directly to your resume. <a href="">See Our Design Range</a>.
    </p><p>
        Find out <a href="">how we are different</a> from other online services.
    </p>
</div>

<div class="subsection">
    <h2>Resume Tips</h2>
   
    <div class="index">
        <h3>Article Index</h3>
        <ol>
            <li><a href="#positive_initial_impression">Positive Initial Impression</a></li>
            <li><a href="#prioritize_your_strengths">Prioritise your strengths</a></li>
            <li><a href="#outline_achievements">Outline achievements to illustrate value</a></li>
            <li><a href="#relevant_keywords">Relevant Keywords to Company Culture</a></li>
        </ol>
    </div>
   
    <h3 id="positive_initial_impression">Positive Initial Impression</h3>
    <p>
        A resume is an essential document that is required to apply for jobs. Your resume has a vibe. When someone looks at it, it leaves an impression. To put it simple, it’s the initial thought or subconscious notion that’s created in someone’s mind when your resume is displayed.
    </p><p>
        After the first six seconds of seeing it, most recruiters have already made a decision. Everything has been noted, name, education, current position and company, previous position and company ect... the list goes on...
    </p><p>
        Simple, make a few minor adjustments. This makes all the difference. These changes will give your resume a positive first impression. Do this and improve your chance of being shortlisted.
    </p>
   
    <h3 id="prioritize_your_strengths">Prioritise your strengths</h3>
    <p>
        Think about everything, it all counts towards making that first positive impression. Make the changes to get ahead of pack. Two words, so simple!
    </p><p>
        Fresh out of school or just finished university? Emphasize education sooner. Do you have a solid work history with accomplishments? Emphasize work history sooner. Maybe you have relationships or connections with well know high stake-holders, who said you couldn’t emphasise contacts sooner.
    </p>
   
    <blockquote>
        <p>
            <cite>Karen Southall Watts, Career Coach and Business Consultant</cite> -
             "But, if you have a previous position that makes you a great match for an advertised job, there's no rule that says you can't highlight your work history and put education further down the page"
        </p>
    </blockquote>
   
    <h3 id="outline_achievements">Outline achievements to illustrate value</h3>
    <p>
        Do not make the rooky mistake of listing day to day duties. Instead, illustrate your achievements to reflect the requirements of the role. This is much more appealing than just listing some day to day duties. It displays how well you perform them and highlights proven results.
    </p>
   
    <div class="points">
        <h4>Two ways this can look:</h4>
        <ul>
            <li>Illustrate results while your competitor outlines day to day duties.</li>
            <li>The competitor outlines results while you have list good-for-nothing day to day duties.</li>
        </ul>
    </div>
   
    <p>
        Day to day duties seem less convincing and less impressive to recruiters. For example, instead of writing about your experience selling cars, write about the impact achieved. Maybe you smashed past the targeted percentage, maybe there was a day that you were able to sell fifty cars. Apply, rule out another odd.
    </p>
   
    <div class="points">
        <h4>Stand out and have some uniqueness:</h4>
        <ul>
            <li>Express qualities and skills ect... in the present tense. </li>
            <li>Ensure positive skills and qualities are highlighted.</li>
            <li>Allocate more space for your most recent positions. Employers will pay more attention here.</li>
        </ul>
    </div>
   
    <h3 id="relevant_keywords">Relevant Keywords to Company Culture</h3>
    <p>
        Many companies are starting to rely on software to pick/analyse and narrow down relevant resumes. This is more convenient for employers to get through the resume selection process. It allows them to quickly narrow down the hundreds of applications to the few selected ones.
    </p>
   
    <div class="points">
        <h4>Typically the software works like this:</h4>
        <ol>
            <li>The Department of Human Resources will receive your resume along side of hundreds of others.</li>
            <li>All style is removed and text is broken down into recognisable strings of data for further analysis.</li>
            <li>Meaning is assigned to resume content. (Example, Education, Work Experience, Skills, and Contact Info)</li>
            <li>Employers will use keywords to search for candidates. (Example: Web Development, Market Research)</li>
            <li>Your resume is given a score based on the relevancy.</li>
        </ol>
    </div>
   
    <h4>Salt and pepper your resume</h4>
    <p>
        Flavour your resume with company culture keywords to add definable contrast that recruiters may notice. Start by familiarising yourself with the company, read information, browse the website to gain an understanding. Keep your resume fairly relevant to the position you are applying for, common sense. This will not guarantee your shortlist/job interview.  Although ruling out more odds are definitely an advantage.
    </p>
   
</div>

<div id="footer">
    <hr>
    &copy; View-resume.com &bull;
    <a href="mailto:chrisditfort@gmail.com">Contact Us</a>
</div>

</body></html>
Code (markup):
Well, probably without the comment bitching out the W3C and WhatWG for the idiotic jackasses they've become. (well, WhatWG always kind of were since they never embraced 4 Strict and completely ignored what HTML is FOR!
Click to expand...
Wow, such value. Such a comprehensive response. Thank you so much. I'll be reading that website. I'll be learning how to structure my HTML cleaner based off of your example.
W3Schools is good and all for learning but it doesn't teach you practically.

Web_Dev_Chris, Jul 11, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#36

I will implement deathshadows structral example in all my HTML coding practices. I have learned a few things as well. I wasn't familiar with the meta viewport untill I did a little bit of reading about and lots of practice. I have also learned new head link tag attribute such as media.

Anyway it's almost bed time for me. I have been practicing the cleaner HTML structure that deathshadows used in my examples untill I have become fairly familiar with it.

This looks like a copy and paste, but believe me or not I have written this word for word after lots of practice. Thank you deathshadow for sharing knowledge.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
    name="viewport"
    content="width=device-width,height=device-height,initial-scale=1"
>
<link
    rel="stylesheet"
    href="screen.css"
    media="screen,projection,tv"
>
<title>
    Practicing Structure Again
</title>
</head><body>
    <h1>Improving HTML Coding Practices</h1>
    <p>
       The only way to improve is to learn, practice and implement.
    </p>
</body></html>
HTML:

Web_Dev_Chris, Jul 11, 2016 IP

Web_Dev_Chris Well-Known Member

Messages:: 222

Likes Received:: 12

Best Answers:: 1

Trophy Points:: 105

#37

deathshadow said: ↑

Guessing wildly as your layout is still quite clearly incomplete, a cleaner HTML would go something like this:
Click to expand...

I realize that with this HTML layout, it's much easier to run through and even code in notepad as there is some kind of structure as opposed to my messy layout, it's easier to get confused when working in software such as notepad.

deathshadow said: ↑

Also, I say don't bother with en-US or en-UK distinctions, half the UA's out there won't recognize anything other than the two-letter variant anyways. It's also technically invalid in a charset declaration to say "UTF" instead of "utf" -- though the number of UA's that choke on that can be easily dismissed... and of course you have no media targets on your stylesheet link... are using a uselessly vague "style.css" OF COURSE it's STYLE, it's a CSS FILE!!! instead of a meaningful name like say... the media target? Also the lack of a viewport meta will bite you when it's time to go responsive.
Click to expand...

I had no idea about any of this. I didn't realize that CAPITAL and lower case matters. The annoying factor is that this is how it's taught in books. I was taught capital is OK and to do en-US. From now on I am going to use just "en" in the lang attribute. The utf will be lowercase and I am going to name my CSS file after the media target 'screen'.

deathshadow said: ↑

Some FORMATTING would be nice... since you pulled all the tabs making easy verification of openings and closures harder to do... though you have a LOT of invalid markup such as a span where span can't go (as a direct child of a OL), CAPTION tags when there's no table ALSO applied to a list (the ONLY thing that can be a direct child of a list is a LI), H4 inside a CAPTION which makes even less sense (since caption IS a type of heading!), I'm REALLY not sold that your h1+h2 pairing makes even the least bit of sense since you don't seem to be opening up a new subsection of the page yet (probably why you're all the way up to H4 later on), BLOCKQUOTE is not a content wrapper, you MUST put a valid content containing tag like <p> or <div> inside it...
Click to expand...

I am still in the learning process, my knowledge on HTML and CSS is still very little. Although I am improving daily. Thanks for those links and correcting my markup.

My next actions will be to clean up my markup, I wont really be learning anything if I just copy and paste your edit and continue to learn about HTML and CSS.

Last edited: Jul 11, 2016

Web_Dev_Chris, Jul 11, 2016 IP

Log in or Sign up

Zero to Web Development SUPERHERO

amyev Well-Known Member

Web_Dev_Chris Well-Known Member

deathshadow Acclaimed Member

Web_Dev_Chris Well-Known Member

Web_Dev_Chris Well-Known Member

Christine Hopkins Greenhorn

Web_Dev_Chris Well-Known Member

Web_Dev_Chris Well-Known Member

deathshadow Acclaimed Member

Web_Dev_Chris Well-Known Member

serialentre Member

Web_Dev_Chris Well-Known Member

Web_Dev_Chris Well-Known Member

deathshadow Acclaimed Member

Web_Dev_Chris Well-Known Member

Web_Dev_Chris Well-Known Member

Web_Dev_Chris Well-Known Member

Useful Searches