Please Review My Online Portfolio

Hello fellow Digital Pointers!! I'm hoping to start a career as a Web Designer and Developer. I've designed and developed my Online Portfolio, www.AshMilDevigner.com. I know I only have a few projects in it (a couple older versions of my online portfolio and a website I volunteered to design and develop for a non-profit), but what do you think?? Am I off to a good start?? Thank-you in advance.

 

First and foremost, based on your page (http://www.ashmildevigner.com/) you are DEFINITELY off to a good start. Why? It looks like you did NOT use Turdpress, Bootcrap, jQueery, nor any other pile of crap that outputs TEN times more code than is needed to display webpages. You apparently believe that simple is BEST. Very good. This way when you have any errors you can fix them ONCE and forget them FOREVER.

Not so with Turdpress et alia. With them you fix an error which causes ANOTHER error when fixed causes another error ad infinitum. In summation, you would spend the REST of your life and thousands of hours trying to put shellac on a pile of crap using any CMS.

Your code is SHORT, to the point, and works! And it is FAST. You are only loading ONE Javascript file and ONE CSS file, instead of DOZENS like Turdpress et alia load. With only two files like that (IDEAL by the way) your handshaking time during loading is at the absolute minimum.

That does not mean everything is perfect, BUT YOU ARE DEFINITELY ON THE RIGHT TRACK! All you need to do is LEARN, LEARN, LEARN and you might even give @deathshadow a run for his money.

So to start, you do need to expand your knowledge of HTML. Take a look at this >>> http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0.

What you see there are the "errors" on your page. BE AWARE that there may be only ONE error, which when fixed, would NULLIFY all of the other "errors" shown. Fix the FIRST error, then validate your page again. Keep fixing ONE error at a time UNTIL no more errors are shown on your page.

You also need to become familiar with WCAG standards, particularly with legibility of your content. Your current page is NOT very legible. The two main problems are choice of font and contrast. Fix both of those, and your page will be easy for anyone to read.

I read part of your portfolio. It appears that you have some confusion as to designing things.

For example, you CANNOT design a website using ADOBE PHOTOSHOP. Photoshop is a GRAPHIC designer, not a page designer. All you can do with Photoshop is ENHANCE an existing well-designed page. And graphic design should NEVER come before page design. Graphics must complement the page, not force the page to work around the graphics. Design the page first, THEN design the APPROPRIATE graphics to ENHANCE the page. DO NOT PUT THE CART BEFORE THE HORSE. If you do, you will work twice as hard to do the same job, often NEEDING to REDESIGN your graphics later.

I did not visit any of the example sites listed on your page, but I know for a fact that if you used Turdpress, Bootcrap, etc. that NONE of them have VALID code. Don't believe me? Trying running them through the validator above and see what you get.

Since you seem to be able to design decent pages WITHOUT Turdpress, go look at the HORRIBLE code on those sites. You will find DOZENs of Javascript/CSS files all slowing down the page loads because of all of the handshaking going on. Further, on mobile that handshaking is DRAINING the visitors battery power often causing the visitor to leave BEFORE he gets to the content the site owner wants him to see.

You will also see TONS of INVALID code that will cause those sites to CRASH on some computers or at best show a scrambled page. Further, invalid code can, and often does, cause search engines to ABORT indexing a site. Is that what your customers really want?

I am assuming that you are targeting the business community. If so, the normal business does NOT want to limit its audience. What that means is that your sites MUST work on AS MANY DEVICES and SYSTEMS as possible. Successful businesses are MORE CONCERNED ABOUT REACHING AS MANY CUSTOMERS AS POSSIBLE than having the "prettiest" site that NO one visits. Look at Google or Craiglist. UGLY sites used by MILLIONS. Pretty is not always best.

I realize that most customers have NO CLUE what makes a good site. All they see are pretty pictures and THINK the site is good. It is YOUR job to educate your customers. You really don't need to design sites then have your customers go out of business. What you really need to have are REPEAT customers, and that is not possible if you let THEM define what a good site is. THEY do NOT know. All they see are the pretty pictures.

If your customers will not listen and heed your advice, YOUR BEST BET IS NOT TO WORK FOR THEM. You have better things to do rather than trying to deal with people who have no clue OVER AND OVER AND OVER AND OVER again. You simply will not make any money catering to those types of people. CHOOSE your customers well and they will pay WHATEVER it takes to keep you AND them happy.

This is way too long, so I will end it here. Visit http://www.cutcodedown.com/ for ways to make your sites work ON ALL DEVICES without TEN times more code than is needed. Your page (http://www.ashmildevigner.com/) is a GOOD start in the right direction. Keep up the good work.

 

Very simple and nice.

 

Design-wise it has a few places of dubious colour contraasts in terms of legibility, though it's hard to tell if that's the fault of the colours or the use of a difficult to read (for some) "thin gylph" webfont. I would also set a max width or make any current max-width smaller on your content areas as some of the longer paragraphs (such as under "About Me") are hard to follow. Upping the line-height could also help with that. Likewise some spacing between your LI under "my skills" could greatly help making the content clearer.

But all that said, I've seen far, FAR worse on that front.

Popping the bonnet, you've got a good deal of code issues, much of which I suspect just stems from your not having learned what ANY of the HTML tags are actually FOR.

There is NOTHING being done on your site to warrant the PRESENCE of JavaScript, but if there were, where you're doing this:

<body onload="initElements();">

Code (markup):

Should be attached from your scripting, NOT from the markup. If you loaded the scripting right before you close BODY in most cases you wouldn't even need to screw around with the onload nonsense.

Though again, NOTHING being done here warrants the use of JavaScript, in fact the way you are loading in content via innerHTML has the potential to be inaccessible to many users (since it's content loaded via scripting) and is a very wasteful approach. WORSE, that content may in fact be invisible to search engines limiting your reach.

Now, the rest of the markup? Yeah... we need to talk.

You set your charset meta too far into the document, this can cause the browser to have to start over from the beginning when it hits that if you have too much stuff before it. This is why when possible I reccoment setting your META before any other tags inside HEAD, and setting the charset meta FIRST.

This is 2018, you can stop saying text/css on LINK when REL="stylesheet"... and where's your media target? Since the CSS you are loading is for SCREENS and not print, aural, speech, ttl, etc, etc, you should at LEAST be saying media="screen" on your link tags that are loading CSS.

It's called keywords, not keyphrases, not keysentences, keyWORDS. It should be seven or eight SINGLE WORDS (or proper names) that exist inside the document BODY as plaintext. You don't get to play word jumble with it, so I would suggest adding three more commas to separate all the words.

NOT ONE legitimate user-agent gives a flying purple fish about the author meta. Lose that it's pointless code bloat BULL.

Setting X-UA to "edge" only is pointless since for any new site that should be the default behavior. That META should only be present for outdated/outmoded sites that need modern browsers to be set back to the behavior of OLDER ones. Anyone telling you that you need to set "ie=edge" is talking out their arse.

I'd also suggest losing the XML-style closures on "empty" tags. Aka all the /> nonsense. They're a relic of a now dead branch of development.

Until you have a firm grasp on logical document structure, I would suggest that you pretend the HEADER, NAV, ARTICLE, ASIDE, MAIN, SECTION, and FOOTER tags don't exist. Honestly if you learn proper document structure you'll find that they're idiotically and pointlessly redundant ANYWAYS particularly when not one single legitimate UA treats them as anything more than a DIV... which on top of their being redundant to using H1..H6 and HR proper? Just say no.

Your NAV is broken gibberish. Just because you use NAV -- a tag that means "a UA can skip this section to get to the content" doesn't mean your menu shouldn't be UL/LI. Even the specification says that. What you've created is a menu that screen readers, braille readers, and their ilk will read as a single non-stop run-on sentence since anchors apply no semantic meaning to their content.

NOT that I understand why you would have a menu before your H1, or why you seem to have position:fixed it out of existence since it's not being displayed and is hidden by the glasses image.

Also your lack of text in the social media menu is a middle finger to users with accessibility needs.

On the subject of numbered headings, how is "Designer & Developer" the start of a new MAJOR subsection of the page and/or your primary content. Aka what H2 MEANS semantically? Remember your H1 is under 4 strict/earlier rules THE heading that EVERYTHING on the SITE is a subsection of, which is why it should appear BEFORE any other content-bearing elements... that includes your menu. If you open the (pointless code bloat dumbass) SECTION tag, you are back at H1 depth so the first time you use a heading, it should be a H1. H2 indicate the start of a major subsection of a page, the first H2 inside BODY or a SECTION being the main content of that BODY/SECTION. H3 means the start of a subsection of the H2 preceding it, H4 is the start of a subsection of the H3 before it, and so forth down to H6. Even HR doesn't mean "draw a line across the screen" it means a change in topic or section where heading text is unwanted or unwarranted.

... and if numbered headings divide the page up into sections and subsections, and they're HEADING tags, what possible purpose does HTML 5's ARTICLE, SECTION, NAV, MAIN, ASIDE, HEADER, or FOOTER server? Oh that's right, NONE!

To that end, that H2 is gibberish nonsense. Should probably be SMALL inside the H1 indicating de-emphasis. Remember HTML tags have meanings (semantics) of what things would be in a professionally written document, or would be for grammatical and syntax reasons. SMALL means "would be smaller in a professionally written document such as for de-emphasis" and NOT "show this text smaller". B and I mean "would be bold or italic" for the same reasoning and not "show this text that way".

Once we get into your content things are far, FAR worse. You're not in a form, what's inside it isn't INPUT, SELECT, or TEXTAREA, so how and WHY are you using FIELDSET with DIV to do H2's flipping job?!? That is utter and complete nonsensical misleading incorrect HTML. Same with those two floating anchors wth no block-level semantics around them inside yet another NAV.

A situation only further exacerbated by the ridiculous overuse of tags like HEADER around perfectly good headings. (A heading all by itself is a header? Whoddathunkit?!?), and all the DIV/classes for nothing. You have semantics, LEVERAGE IT.

The double breaks inside a paragraph are also good for a laugh, since they're doing paragraph's flipping JOB.

Then we get to your form. The ONE place that SHOULD have a fieldset, and it doesnt. Where are your labels? PLACEHOLDER IS NOT A FLIPPING LABEL!!!. You're doing nothing with the abuse of placeholder and incomplete form but creating false simplicity and broken accessibility.

... and of course your document has no DOCTYPE declaration so you're in quirks mode in legacy IE, and there ARE quirks triggers on things like JS behaviors as well in other browsers like FF.

So... you've got a ways to go yet.