CodePen Project #1 - Tribute - Critique of style please

I Built This
1

Salutations community. I’m delighted to be a part of this group because I feel like it was something missing in my personal and career development for both communicartion and practice in development and design.

That being said, with regard to the first project, the Trubute project, I would like to hear some thoughts on my design. I spent a while fiddling with CSS and layout, but got tired of it and decided that since I technically fulfilled the requirements I would submit it as completed. However I would still like to improve it over time and would love to hear feedback and suggestions about the design.

Sincerely,

Ryan

2

Not sure if I can/how to edit the post, but I just realized I neglected to link the CodePen. Here it is: https://codepen.io/codewrangler/details/yPbRvq/

Thanks again.

Sincerely,

Ryan

3

Hi @psiryan,

CSS inspector:

  • Unknown property “-width”
 .img-inset{
 ...
 -width:50%;
}

HTML:

  • Do not use <br> to increase a gap:
<h1 class="red-spectacle">Mamoru Oshii</h1>
<br/>

MDN documentation:
<br>: The Line Break element - HTML: HyperText Markup Language | MDN

Do not use <br> to increase the gap between lines of text; use the CSS margin property or the <p> element.

  • Do not use lower levels to decrease heading font size:
<h1 class="red-spectacle">Mamoru Oshii</h1>
<br/>
<h3 class="red-spectacle">Influential Creator of Contemporary Multimedia</h3>

MDN documentation:
<h1>–<h6>: The HTML Section Heading elements - HTML: HyperText Markup Language | MDN

Do not use lower levels to decrease heading font size: use the CSS font-size property instead.Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

HTML Standard

h2–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. Instead use the markup patterns in the §4.13 Common idioms without dedicated elements section of the specification.

Common Idioms
HTML Standard

Cheers and happy coding :slight_smile:

4

Hello @Diego_Perez!

Thanks for taking a look at my project. I would like to invite you and everyone else in the community for a second (or first) look and critique.

5

Respect the fact you’ve had a go at using the css grid!

6

Hi @psiryan,

  • A paragraph cannot contain a list:
    ( <p> accepts Phrasing content, <ol> is Flow content )
<p>
 <ol start="0">
  <li class="ul-header">Sources</li>
  <li id="src-1"><a href="http://webmirror.kobran.org/matrixgits/page1.html">http://webmirror.kobran.org/matrixgits/page1.html</a></li>
  <li id="src-2"><a href="https://en.wikipedia.org/wiki/Kerberos_saga">https://en.wikipedia.org/wiki/Kerberos_saga</a></li>
  <li id="src-3"><a href="https://en.wikipedia.org/wiki/Mamoru_Oshii">https://en.wikipedia.org/wiki/Mamoru_Oshii</a></li>
  <li id="src-4"><a href="http://sensesofcinema.com/2004/great-directors/oshii/">http://sensesofcinema.com/2004/great-directors/oshii/</a></li>
  </ol>
</p>

MDN documentation:
<p>: The Paragraph element - HTML: HyperText Markup Language | MDN

The HTML <p> element represents a paragraph of text. Paragraphs are usually represented in visual media as blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation. Paragraphs are block-level elements.

Permitted content: Phrasing content.

MDN documentation:
<ol>: The Ordered List element - HTML: HyperText Markup Language | MDN

The HTML <ol> element represents an ordered list of items, typically rendered as a numbered list.

Content categories: Flow content, and if the <ol> element’s children include at least one <li> element, palpable content.

Permitted parents: Any element that accepts Flow content.

  • Phrasing content:

MDN documentation:
Content categories - HTML: HyperText Markup Language | MDN

Phrasing content defines the text and the mark-up it contains. Runs of phrasing content make up paragraphs.

Elements belonging to this category are:
<abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).

A few other elements belong to this category, but only if a specific condition is fulfilled:

<a> , if it contains only phrasing content
<area>, if it is a descendat of a <map> element
<del>, if it contains only phrasing content
<ins>, if it contains only phrasing content
<link>, if the itemprop attribute is present
<map>, if it contains only phrasing content
<meta>, if the itemprop attribute is present

Cheers and happy coding :slight_smile:

7

Thanks. To be completley honest, I’ve been out of the front-end web dev scene for some time and pretty much missed the whole Bootstrap thing. I learned about Grid from a conference presentation on YouTube. I’m glad that the functionality is built directly in to the CSS standard now as I tend to be a minimalist when it comes to dependencies. Curiously, however, it seems that w3schools does not explain using CSS Grid in this way, so I ended up having to leverage other tutorials to understand what was going on.

8

Awesome @Diego_Perez! I love how critical you are! Honestly, I thought I fixed this, but I guess I only changed the unordered list.

Let me know if you see anything else. Also, is there a tool you use to analyze the syntax for issues like this? That would be most helpful.

9

Hi @psiryan,

Thanks :smiley:

  • In codepen (html inspector):

  • You can use the W3C Markup Validation Service:

wikipedia article

Markup validation is an important step towards ensuring the technical quality of web pages. However, it is not a complete measure of web standards conformance.
…
Mark-up validators cannot see the “big picture” on a web page,[5][6] but they excel at picking up missed closing tags and other technicalities.

  • Before using an element, is a good idea read the documentation on MDN:

MDN Web Docs

Cheers and happy coding :slight_smile: