- Nov 2022
-
github.com github.com
-
margin: 0px 10px 0px 10px;
When using margin shorthand where the top/bottom margins are the same and the left/right margins are the same, you only need to list 2 values. This can make your code more succinct.
-
Consider using comments to break up and provide context to your CSS. It's hard (for me) to parse why some lines are doing what they're doing, and the sorting is only vaguely similar to the HTML's structure.
-
.top ul{ color:black; }
Instead of having to define colour all throughout your CSS, (I've noticed this
color: black;describing text in multiple places) you could include one body selector at the top that sets a default colour for all text on the page, then override that as needed.
-
-
github.com github.com
-
</footer> </body>
You are missing the copyright footer section. See the original reference image.
-
<li>Facebook</li> <li>Instagram</li> <li>You Tube</li>
These should have anchor elements inside them. This section is intended to be for offsite links to social media pages. You don't really need to make them go anywhere, but you should still include them.
-
ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Vivamus vehicula erat in tortor vestibulum accumsan.</li>l <li>Etiam sagittis pulvinar ligula. </li> </ul>
This should be a regular paragraph, not a list.
-
<header> <nav>
There is no
<main>element defined anywhere underneath your header. Semantically and for accessibility purposes, a page should have a<main>element. -
<div class="left-one"> <img src="images/image1.jpg"> <h3><b>Aliquam et iaculis sapien</b></h3> <p> ipsum dolor sit amet consectetur adipisicing elit. Aenean nisl nisl</p> <button class="learn">Learn more</button> </div>
Use
<article>tags instead of<div>here, they would be more semantically correct in this context. -
<ul> <li>Vestibulum vitae posuere tellus. Donec vestibulum tortor quis dui congue</li> <li>eget eleifend augue dictum. Aliquam nisl sapien, varius sit amet lorem eu,</li> <li>mattis condimentum nulla.</li> <li>fermentum ut metus. Sed hendrerit arcu et libero sagittis molestie.</li> <li>Suspendisse libero erat, varius ut ullamcorper sollicitudin, malesuada</li> <li>enim.</li> </ul>
This should be a regular paragraph, not a list.
-
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap" rel="stylesheet">
You've linked a Google webfont but haven't used it anywhere in your CSS. On most browsers, your page will display in Times New Roman, a serif font that can have less readability.
-
-
github.com github.com
-
<span class="btn"> Find out how we can help! </span>
A span with an appropriate class works here (and everywhere else you used it), but there is a
<button>element. I'm sure you had your reasons. -
Designn
Should be "Design". Can you tell I'm grasping at straws for comments to make?
-
-
github.com github.com
-
.btn:hover { background-color: var(--hover, #888); /* color: var(--white, black); left in case it was needed later*/ cursor: pointer; }
Including hover styles is nice attention to detail.
-
:root { --main: rgb(102, 102, 102); --secondary: rgb(237, 237, 237); --highlight: rgb(255, 88, 15); --hover: rgb(255, 126, 38); --white: rgb(255, 255, 255); --black: rgb(0, 0, 0); --mainText: rgb(51, 51, 51); }
Didn't know you could do variables in CSS. Stealing this.
-
/* DOESN'T SCALE, WOULD NEED @MEDIA QUERY TO PLACE ONE OVER THE OTHER, AND IM TOO LAZY */
I don't blame you. It was not worth it.
-
/* DOING FLOATS GIVES ME PTSD */
God, doesn't it?
-
- Oct 2022
-
github.com github.com
-
<p>All heading tags are working well but the hierarchy in the webpage is missing which is making the page unstructured. This is somehow missleading the viewers as they will not get the difference between headings and links.So, the mixure of headings and links seems irrelevant here. Instead, the headings could be managed either side of the page and links towards the oposite side. This will be east for the people to scroll the page to get information easily. Most importantly, the align attrribute in h3 tag is a wrong use. </p>
Because there is no maximum width specified, paragraph elements that are very long like this one show up as very long on the user's browser. This is not very readable.
-
<span>Comox Valley Lifeline Society</span> <p>Span tag is not necessary to use here. Instead simple heading tag could work here</p>
When you use <span> tags here as an example, they do not render on the user's browser. Character entities must be used if you want to display reserved characters like < and >. See this for more information.
-
<head> <meta charset="UTF-8"> <title>correction</title> </head>
You don't have a stylesheet embedded for your HTML to use. Styling the content is required for this assignment.
-
<!--<p align="justify" class="plain">The Comox Valley Lifeline Society offers a variety of medical alert services designed specifically for older adults that provide fast, 24/7 access to expert help in an emergency. These services range from the standard HomeSafe service to the fall detection capability of the HomeSafe with AutoAlert and the freedom of the new GoSafe mobile service. </p>--> <ol> <li>There is again wrong use of align attribute in the paragraph tag</li>
When you talk about how they use the align attribute wrong, they can't see the code you're talking about.
-
-
github.com github.com
-
#sk_centering { padding-left: 40px; padding-bottom: 0px; padding-right: 40px; } /* padding for the top is not mentioned which does not give the page a required layout */ /* Shorthand for padding properties could be used here*/ body{ font-family: Helvetica, Arial, Sans-serif; } /* the firs font-style is to be given in "Helvetica" that is preferred */ #sk_centering { padding-top: 0px; padding-left: 0px; padding-bottom: 0px; padding-right: 0px; } /* it is not necessary to mention padding with 0 as it is the deafult value for this property */ .alert, .clearformat, .plain, .plainfixedwidth, .plainlarge, .plainsmall { text-decoration: none; } /* this will not cause any change in the html program.So,this seems irrelevant*/
You should use your style.css file to style your page, not to critique the other website's CSS. Your points are good, but they should be their own section in the index.html and be readable to the user.
-
body{ font-family: Helvetica, Arial, Sans-serif; } /* the firs font-style is to be given in "Helvetica" that is preferred */
Quotations are only required for font-family if the font being used has spaces in the name, like "Times New Roman". Helvetica without quotes works fine here.
-
-
github.com github.com
-
/* 3rem = 3 *16px= 48px */
You have changed your root font size to 62.5% of its original with the html declaration on line 1. This will equal 30px.
The root font size in most browsers is 16. 62.5% will change it to 10px, which is a trick that allows to easily convert px amounts to rem.
-
-
github.com github.com
-
Hairpins-ContactPage
Spaces could be added for formatting purposes.
-
-
github.com github.com
-
<p> $47.00 = 45 Minute Clipper Cuts and Short Fine Hair<br/> $61.00 = 60 Minute Cut for Fine to Medium Hair<br/> $76.00 = 75 Minute Cut for Medium to Thick Hair<br/> $90.00 = 90 Minute Cut for THICK THICK Hair, you know who are :) cuts include shampoo, scalp massage, blowdry, and style.<br/> </p>
Paragraph elements work here, but for semantic purposes an unordered list element may work better.
-
-
github.com github.com
-
<address> <b>Hairpins Boutique Salon </b> <br/> #4 - 224 6th Street<br/> Courtenay, BC V9N 1M1<br/> </address>
Had no idea there was an address tag. Good use of proper semantic labelling.
-
Contact -Hairpins Salon
Space after hyphen could be added.
-
-
github.com github.com
-
<h4><a id="live">Live</a> <a id="breaking"><b>Breaking</b></a> <a id="uk">UK</a></h4>
I don't know if these tags are significant enough to count as a header.
-
<a id="dot1">.</a><a id="dot2">.</a><a id="dot3">.</a></p>
This solution works as well, but look into using empty spans.
-
<h2 id="card-two-heading">
Instead of ID selectors, descendant selectors (ex:
.card-two h2 {}and.card-two p {}could be used for simplicity.
-
-
github.com github.com
-
id="head_one"
This instance, among others, seems like excessive ID use. Consider using descendant selectors like
.card-three h1 {}to make your code more concise. -
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@1,700&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital@1&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap" rel="stylesheet">
On Google Fonts, when picking your font families, pick everything you plan on using at once. It'll save you from having to do this many
<link>elements. -
<p style="color:rgb(67, 67, 67) ;">
I do not see the need for an inline style in this case.
-
<div class="card-four"> <!-- Used <div> instead of <article> since there is no heading. -->
There is a heading, it's just below the "Live", "Breaking", and "UK" tags. This would still be an article, as its an independent, self-contained piece of content.
-
<p> <img class="a" src="images/Red-Circle-Small.png" width="12" height="12" alt="red-circle"> <img class="b" src="images/Teal_Blue_Circle.png" width="10" height="10" alt="blue-circle"> <img class="c" src="images/Teal_Blue_Circle.png" width="10" height="10" alt="blue-circle"> </p>
This is a creative solution to the circle problem. I do not think it needs to be wrapped in a
<p>, however.
-
-
github.com github.com
-
{ padding-left: 50px; font-family: 'Lato', sans-serif; font-size: 25px; }
Your use of curly braces (
{}) is inconsistent throughout the document. This can make it harder to read. Pick one style and use it consistently. -
margin-top: 50px; margin-bottom: 50px; margin-right: 50px; margin-left: 50px;
When all values are equivalent like this, the
margin: 50px;shorthand can be used.
-
-
github.com github.com
-
button { background-color: aqua; border: 0px; font-family: "Poppins", sans-serif; font-style: italic; }
Consider using a descendant selector like
.card-three button {}, in this case it's fine because it's the only one on the page, but in an actual use case this may become an issue.
-
-
github.com github.com
-
103-html-css-f22-cvs1
This href will similarly not work.
-
mmomi@northislandcollege.ca
This href is missing the "mailto:" prefix, the link will not work.
-
-
github.com github.com
-
<title>My Webpage</title></head>
Consider adding newlines for readability.
-
- Sep 2022
-
github.com github.com
-
<!-- F22 DGL 103 DLU1 - Claire Guiot - Assignment B -->
Make sure to update this to have your name and class instead of the example text. For you, it would say
<!-- F22 DGL 103 CVS1 - Shyam Rachchh - Assignment B --> -
<a href="">
This is missing the data to make it a functional anchor element.
<a href="mailto:Srachchh@northislandcollege.ca</a> -
<p>My name is Shyam Rachchh. I am from India. I came here in Canada 4 months back. Some of my hobbies are <i>watching web series</i> and <i>Playing cricket</i>. I am a person with positive mindset and I always like learning new stuffs. </p>
Long lines like the ones found on 13 and 20 can be hard to read without word wrapping. Consider using newlines to improve readability.
-