Return to Answer

Commonmark migration

Source Link

edited Jun 10, 2020 at 13:24

Community Bot

edited Jun 10, 2020 at 13:24

Community Bot

###Markup

Markup

###Live Page

Live Page

###Appearance of the Live Page

Appearance of the Live Page

###Markup

###Live Page

###Appearance of the Live Page

Markup

Live Page

Appearance of the Live Page

replaced http://stackoverflow.com/ with https://stackoverflow.com/

Source Link

edited May 23, 2017 at 12:41

Community Bot

edited May 23, 2017 at 12:41

Community Bot

There's an error in the console, because the file favicon.ico is missing.
It's recommended that <meta charset="UTF-8"> is the first child of the head-element. You can see it in all examples on w3.org. This answer answer to "In <head>, which comes first: <meta> or <title>?" "In <head>, which comes first: <meta> or <title>?" has some more insights:

There's an error in the console, because the file favicon.ico is missing.
It's recommended that <meta charset="UTF-8"> is the first child of the head-element. You can see it in all examples on w3.org. This answer to "In <head>, which comes first: <meta> or <title>?" has some more insights:

There's an error in the console, because the file favicon.ico is missing.
It's recommended that <meta charset="UTF-8"> is the first child of the head-element. You can see it in all examples on w3.org. This answer to "In <head>, which comes first: <meta> or <title>?" has some more insights:

Source Link

answered Apr 2, 2017 at 16:08

insertusernamehere

answered Apr 2, 2017 at 16:08

insertusernamehere

2.3k
15
23

I'm only a little familiar with SASS because I work with LESS most of the time, so I'll focus on your markup to get the ball rolling.

###Markup

Outline

Keep in mind, that in HTML5 sectioning elements can start with a h1-element as well.

However, try to create a hierarchic structure. This means, that a h1-element directly followed by a h4-element doesn't make much sense. Especially when you start to use h2 afterwards for other content:

<h1 class="header__textbox--title">EVAN SURNAME</h1>
<h4 class="header__textbox--subtitle">Web Developer</h4>
<!-- [...] -->
<h2 class="section1__title">Portfolio</h2>

Also, this looks like a subheading where w3.org says:

h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

^{From w3.org 4.12.1 Subheadings, subtitles, alternative titles and taglines}

The linked specification suggests different approaches to handle the problem. One possibility is this:

<h1>
 EVAN SURNAME
 <span>Web Developer</span>
</h1>

Links without any text

You have some links like this:

<a href="#page--top"></a>
<a href="#" class="footer--above__btnicon"><span class="footer--above__btnicon--fb"></span></a>

Of course, most people will see the icon and understand the link's meaning. But visitors using a screenreader or search bots don't have a clue, what the link is about. Simply spend them a title-attribute:

<a href="#page--top" title="Scroll back to top"></a>
<a href="#" class="footer--above__btnicon" title="Follow me on Facebook"><span class="footer--above__btnicon--fb"></span></a>

Some goes for the project listing.

Empty p-elements

In your form you have empty elements:

<p class="help-block text-danger"></p>

I think you'll fill these, if an error for the input occurs. I would say, insert these elements when they are really needed and remove the empty paragraphs in the beginning.

###Live Page

A few things I've noticed in the live demo:

There's an error in the console, because the file favicon.ico is missing.
It's recommended that <meta charset="UTF-8"> is the first child of the head-element. You can see it in all examples on w3.org. This answer to "In <head>, which comes first: <meta> or <title>?" has some more insights:

[...] if your title came before that, it has already been interpreted as ASCII, which could be wrong, depending on what was in the title.

You include font-awesome.css and font-awesome.min.css, which seems redundant.

###Appearance of the Live Page

A few more things on the live demo regarding the design*:

The header's blue background image doesn't fill the container for screen sizes over ~1200px width.
The header seems broken on mobile. Only on a few screen widths name and subtitle are visible. Sometimes the image is larger than the blue background.
In the mobile view the projects are aligned left. It might look better, if they are centered as the rest of the page as well.
There's a white area below the red footer.
It seems that one or multiple containers/elements are wider than the screen. You can always scroll horizontal a few pixels.

^{^* Seen in Safari 9.1 on macOS.}

lang-css