FEED BACK on my portfolio page

Code Feedback
1

Hey all! I’ve posted before, but I really need more advice on what I can do to make my site better… as I am applying for jobs…

https://ainneo.github.io/cyber-ainne/

Thank you!
ann

2 Likes
2

Check the spelling in your description, ok?
Try something like “Creative Web Developer with experience in HTML, CSS, WordPress, and JavaScript.”
Your website looks fine in my opinion. Congrats!

1 Like
3

thanks for the feed back

4

Hello @ainneo,

HTML

  • error

Element “li” not allowed as child of element “nav” in this context. (Suppressing further errors from this subtree.)

From line 22 to line 22:

      <li><a href="#work">work</a></li>

MDN documentation:
<li>: The List Item element - HTML: HyperText Markup Language | MDN

The HTML <li> element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.

Permitted parents: An <ul>, <ol>, or <menu> element. Though not a conforming usage, the obsolete <dir> can also be a parent.

  • error

Element “li” not allowed as child of element “nav” in this context. (Suppressing further errors from this subtree.)

From line 23 to line 23:

      <li><a href="#contact">contact</a></li>

MDN documentation:
<li>: The List Item element - HTML: HyperText Markup Language | MDN

The HTML <li> element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.

Permitted parents: An <ul>, <ol>, or <menu> element. Though not a conforming usage, the obsolete <dir> can also be a parent.

  • error

An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

From line 38 to line 38:

   <img class="project-image" src="mbot.png">alt="project"/> <p class="project-title">Landing Page</p>

MDN documentation:
<img>: The Image Embed element - HTML: HyperText Markup Language | MDN

Authoring meaningful alternate descriptions

An alt attribute’s value should clearly and concisely describe the image’s content. It should not describe the presence of the image itself or the file name of the image. If the alt attribute is purposefully left off because the image has no textual equivalent, consider alternate methods to present what the image is trying to communicate.

Don’t

<img alt="image" src="penguin.jpg">

Do

<img alt="A Rockhopper Penguin standing on a beach." src="penguin.jpg">

When an alt attribute is not present on an image, some screen readers may announce the image’s file name instead. This can be a confusing experience if the file name isn’t representative of the image’s contents.

  • error

An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

From line 52 to line 52:

          <img class="project-image" src="cpunk.gif"/>

MDN documentation:
<img>: The Image Embed element - HTML: HyperText Markup Language | MDN

Authoring meaningful alternate descriptions

An alt attribute’s value should clearly and concisely describe the image’s content. It should not describe the presence of the image itself or the file name of the image. If the alt attribute is purposefully left off because the image has no textual equivalent, consider alternate methods to present what the image is trying to communicate.

Don’t

<img alt="image" src="penguin.jpg">

Do

<img alt="A Rockhopper Penguin standing on a beach." src="penguin.jpg">

When an alt attribute is not present on an image, some screen readers may announce the image’s file name instead. This can be a confusing experience if the file name isn’t representative of the image’s contents.

  • error

No space between attributes.

From line 53 to line 53:

          <p class="project-title">Gaming App Landing Page</p><a class ="overlay" href="https://www.cryptopunk.la/"project project-tile">

The problem is the href url (/“project project-tile”, the space is also a problem).

  • error

Quote “”" in attribute name. Probable cause: Matching quote missing somewhere earlier.

From line 53 to line 53:

          <p class="project-title">Gaming App Landing Page</p><a class ="overlay" href="https://www.cryptopunk.la/"project project-tile">
  • info

Attribute “project-tile”" is not serializable as XML 1.0.

From line 53 to line 53:

          <p class="project-title">Gaming App Landing Page</p><a class ="overlay" href="https://www.cryptopunk.la/"project project-tile">
  • error

Attribute “project” not allowed on element “a” at this point.

From line 53 to line 53:

          <p class="project-title">Gaming App Landing Page</p><a class ="overlay" href="https://www.cryptopunk.la/"project project-tile">
  • error

Attribute “project-tile”" not allowed on element “a” at this point.

From line 53 to line 53:

          <p class="project-title">Gaming App Landing Page</p><a class ="overlay" href="https://www.cryptopunk.la/"project project-tile">
  • error

An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

From line 58 to line 58:

          src="https://scontent-sjc3-1.xx.fbcdn.net/v/t1.0-9/37376141_283698195521599_7173886494438850560_n.jpg?_nc_cat=110&_nc_oc=AQk5-PnpElmsn-lvxZGLm50vQFkHYYpFusaxVCxrW7i0x0M9xFYVEoXIkCODFkb_OJE&_nc_ht=scontent-sjc3-1.xx&oh=4fdaecf4357e13553ddad28e6d95b9db&oe=5DD262F4"/>
  • error

Duplicate attribute “class”.

From line 59 to line 59:

          <p class="project-title">WordPress CMS Site</p><a class="overlay" href="https://twinsy.io" class="project project-tile">
  • error

An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

From line 63 to line 63:

        <img class="project-image" src="https:/uploads/default/optimized/3X/4/1/413b20aecba3fb4c3d260ea96e36b7b221d41227_2_1380x742.jpeg"/>
  • error

No space between attributes.

From line 70 to line 70:

     <div id="contact"class="contact">

cheers and happy codding :slight_smile:

Note:
Tools used:
w3c markdown checker web service

Video:

1 Like
5

This great for HTML check for sure and I bet it can sharpen my HTML skills.

Is there one for CSS and JavaScript?

6

Not sure if you created the assets for the game landing page, but the word challenges was spelled as challanges which is incorrect, it is that way for all the items.

7
  • For CSS:

http://jigsaw.w3.org/css-validator/

lint, or a linter, is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs. The term originates from a Unix utility that examined C language source code.

Lint-like tools are especially useful for interpreted languages like JavaScript and Python. Because such languages lack a compiling phase that displays a list of errors prior to execution, the tools can also be used as simple debuggers for common errors (e.g. syntactic discrepancies) as well as hard-to-find errors such as heisenbugs (drawing attention to suspicious code as “possible errors”).] Lint-like tools generally perform static analysis of source code.

  • something like eslint:

Getting Started with ESLint - ESLint - Pluggable JavaScript Linter

Cheers and happy coding :slight_smile:

1 Like