Hello! I am finishing Dasmoto’s Arts and Crafts from Front End Engineer career path (9%). I am based in California, USA (PST) and currently learning Front End Eng to better collaborate with engineers as a product designer.
If you have a moment, the below html and css files are up for code review. Many thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paper and Pencil</title>
<link rel="stylesheet" href="./resources/css/index.css">
</head>
<body>
<!-- Banner section -->
<div class="banner">
<h1>Paper and Pencil banner</h1>
<img id="small-paperpencil" src="./resources/images/envelope-card-top-view.png" alt="paper and pencil">
<p>Paper and pencil are essential</p>
<button>Subscribe now</button>
</div>
<!-- Paper and Pencil section -->
<div>
<span id="paperpencil" class="bold">Paper and Pencil</span>
<p class="bold">Social media dedicated to writing</p>
<form action="">
<input type="text">
<input type="submit" value="Submit">
</form>
<div>
<ul>
<li>
<div></div><span>Hey there, it's paper and pencil</span>
</li>
<li>
<div></div><span>I haven't written recently</span>
</li>
<li><div></div><span>But's that's totally fine</span>
</li>
</ul>
</div>
</div>
</body>
</html>
Unlike logical code, we cannot envision an HTML page just from the markup. Until we see the page ‘in the flesh’ there is nothing to do but pick at hairs in the markup. Please show us a screen shot of the rendered page.
On what we can see above, it is evident that order is a criteria and it describes nesting of child elements. We can also see that the need for horizontal scrolling is increased proportionately to indentation of the markup. This can become tedious and is best to be avoided.
How do we do that? Use two space indents, rather than four and cut it in half, instantly. The tabs are merely decoration for the reader. HTML doesn’t need them or even see them. HTML is not capable of parsing more than one whitespace character in a row. All others up to the next non-whitespace character are ignored by the parsing engine.
The reason for indenting markup is moot, by now, but what of the unexplained empty elements we see strewn throughout the markup? What are they intended to hold? There is no clear indication of that intent, so why bother decorating the markup? It’s supposed to help explain the structure, after all.
Hello! I am also a newbie going through the front-end developer course. One thing I saw in your HTML was that the form element had an empty action property.
The other thing I would say would be to switch out the span with an h2 heading. This would give your page more semantic structure unless you wanted things to keep inline! Hope this helps! First code review!
Which is, as we learn, a requirement, even when there is no action. An empty attribute tells the user agent that the form will be handled by the local script environment and likely has listeners on the form inputs, including Submit.
In other words, don’t be quick to judge. First lesson learned when giving reviews, especially in our zeal to share what we’ve learned. A post that gives advice must needs be backed by experience, we would hope. A review that asks questions is no less a review: It is an introspective review that lets us learn from what we’re reviewing. Report that in your next review and we’ll be your humble reader.