- Nov 2022
-
github.com github.com
-
.class { float: right; }
The class name should be more descriptive, It's unclear to me what this selector applies to strictly from the CSS. (Also I think a class named "class" is confusing)
-
.topnav { line-height: 2em; padding: 1.5em 5em; }
This isn't used in the HTML
-
body {
You could try organizing the CSS, by adding comments and controlling the order of each rule. (the highlighted code isn't relevant, just needed to select something)
-
.info { padding: 20px; float: left; width: calc(25% - 30px); box-sizing: border-box; margin: 15px; } .about { width: calc(50% - 30px); padding-right: 5%; }
I like how you implemented this. Very clean
-
-
github.com github.com
-
<title>Document</title>
A more descriptive title would be nice
-
<div class="top"> <header> <img class="logo-img" src="images/dgl-logo.png" alt="DGL logo" width="80"> </header> <nav> <ul> <li>Home</li> <li>Services</li> <li>Portafolio</li> <li>Contact</li> </ul> </nav> </div>
To replicate the target design, you might want to think about employing the semantic element with container child structure, where the parent element extends to the edge of the page, and the container element sits centered in the parent. (using margin: 0 auto and a width)
-
<footer> <p>Copyright @ 2022. All rights reserved North Island College DIGITAL Design + Development</p> </footer>
After looking at a couple of other sites, It seems that the copyright notice tends to be in a section. I'm sure it's not a hard rule though.
-
<section> <div class="wrapper"> <div class="info"> <h4>Latest News</h4> <h4>October 1:</h4> <p>Maecenas ornare.</p> <h4>September 15th:</h4> <p>Etiam eget ligula vitae sapien.</p> <h4>September 10th:</h4> <p>Nam id mi dapibus, condimentum.</p> </div> <div class="info about"> <h4>About Us</h4> <p>Quisque eget turpis a odio tristique feugiat. Vivamus placerat fermentum velit ac posuere. Cras sollicitudin ex nec neque malesuada, id facilisis nibh cursus. Phasellus euismod justo sed neque pretium finibus. Mauris dapibus, leo quis venenatis fringilla, erat quam mollis tortor, quis sodales quam nibh quis turpis.</p> <button class="button">Get in touch</button> </div> <div class="info"> <h4>Follow us</h4> <p>Facebook</p> <p>Instagram</p> <p>Youtube</p> </div> </div> </section>
I think a footer would be more appropriate used here, than in the copyright notice below.
-
<button class="button">Learn more</button>
I think giving this a class of button is unnecessary, given it can be styled with a type selector.
-
<div class="wrapper2 clearfix"> <img class="class" src="images/distance-and-inclass-students.png" alt="In class students" width="450"> <h1>Lorem ipsum dolor sit amet</h1> <p>Vestibulum faucibus sit amet erat et fermentum. Sed consectetur ultricies nulla, vitae commodo enim luctus sed.Nunc sagittis sapien vel risus bibendum, nec tempor felis pulvinar.</p> <p> Duis suscipit viverra ultricies. Aliquam in quam nec urna scelerisque imperdiet ut vitae arcu. Suspendisse potenti. </p> <button class="button">Find out how we can help you</button> </div>
Using a section here would be correct semantic HTML
-
<img class="logo-img" src="images/dgl-logo.png" alt="DGL logo" width="80">
I agree with Sahil. I think creating a link to the homepage by placing the img inside an anchor tag would be ideal .
-
-
github.com github.com
-
width: 180px;
Using a pixel width does not adapt to the width of the parent element
-
width: 330px; display: inline-block;
The issue with using inline block is that if the size of the viewport changes the cards won't adapt and thus will break out of line. In the context of the assignment, floating each card and using calc to set the value of width to 33.33% + the margin is correct. I think
-
.one {
I don't understand the function of this class on its own. Try and make it more descriptive
-
-
github.com github.com
-
article1
A hyphen between the words would be more constant with how you named your other classes
-
<article class="aligning"> <h1> Lorem ipsum dolor sit amet</h1> <p>Vestibulum pulvinar tincidunt placerat. Nulla porta porttitor sem, a ultrices magna feugiat quis. Nam ac diam ac libero posuere lacinia eget et libero.</p> <p>Cras pretium odio eget felis consequat, ut adipiscing enim suscioit. Suspendisse hendrerit sapien blandit nisi sagittis dictum</p> <button class="button1" onclick="window.location.href='services.html';">Find out how we can help you</button> </article>
I don't think an article is appropriate here, because the content is dependent on rest of the site for context. A section would be correct
-
<div class="one"> <article class="aligning"> <h1> Lorem ipsum dolor sit amet</h1> <p>Vestibulum pulvinar tincidunt placerat. Nulla porta porttitor sem, a ultrices magna feugiat quis. Nam ac diam ac libero posuere lacinia eget et libero.</p> <p>Cras pretium odio eget felis consequat, ut adipiscing enim suscioit. Suspendisse hendrerit sapien blandit nisi sagittis dictum</p> <button class="button1" onclick="window.location.href='services.html';">Find out how we can help you</button> </article> <figure> <img src="images/distance-and-inclass-students.png" alt=" inclass and online discussion among tutor and students." width="600"> </figure> </div>
A section would provide more semantic context
-
<p class="rights1">Copyright © 2022. All rights reserved North Island College DIGITAL Design + Development </p>
A small tag would give more context to the function of the element
-
card-1
Maybe use a more descriptive class name
-
<p class="image-set"></p>
This should be a div (or an image if you assume it you will set a source later). using p is not semantically correct
-
;
This semi-colon isn't correct
-
- Oct 2022
-
github.com github.com
-
height: 350px; width: 500px;
setting the width and height warps the image if the aspect ratio differs. Use max-width and max height
-
-
github.com github.com
-
<hr> <div class="container"> <a class="button" href="contact.html"><b>Book an appointment</b></a> <hr> </div>
This should be a section
-
<div class="logo"><a href="index.html"><img src="images/iconlogo.jpg" alt="Icon Logo" width="58"></a> </div>
The logo should sit inside the nav element. It also removes the need to use absolute positioning on the image.
-
<article> <h2>Our team</h2> <div class="team"> <img src="images/iconlogo.jpg" alt="Team member 1" width="350"> <h3>Team member 1</h3> </div> <div class="member2"> <h4>Team member 2</h4> <img src="images/iconlogo.jpg" alt="Team member 2" width="350"> </div> </article>
I think a section would be more appropriate than a article as the content relates contained relates to the other content on the page
-
-
github.com github.com
-
<img src="images/web_screenshot.png" alt="This is the screenshot of the webpage">
A width or height attribute is good practice and acts as a fallback if the CSS is not supported
-
name="about"
The "id" attribute is more appropriate here. The name attribute is used in forms.
-
<nav> <ul> <li><a href="#about">About </a></li> <li><a href="#purpose">Purpose</a></li> <li><a href="#communication">Communication</a></li> <li><a href="#content">Content</a></li> <li><a href="#quality">Quality Images</a></li> </ul> </nav>
Great idea adding navigation
-
-
github.com github.com
-
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; /* This code by https://getcssscan.com/css-box-shadow-examples*/
Linked a source, nice!
-
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
Cool implementation using absolute. I feel like there must be a cleaner way of doing it, maybe just using relative positioning
-
-
github.com github.com
-
<button type="button" class="live">Live</button> <button type="button" class="breaking">Breaking</button>
Not sure if these are buttons... span might be a better fit
-
<span class="dot" style="background-color: #D26047 ;"></span> <span class="dot" style="background-color: #1ce1e2 ;"></span> <span class="dot" style="background-color: #1ce1e2 ;"></span>
I like your use of span here
-
<img src="images/lion.jpg" width="250" alt="lion">
A background image on the article element, would simplify a lot of work, especially in positioning the elements within the article
-
<br>
"br" isn't ideal here, I think letting the text wrap organically would be better
-
style="color: white"
Avoid inline styles?
-
-
github.com github.com
-
.card-three{ border-radius: 5px; box-sizing: border-box; background-color: hsl(0, 0%, 100%); background-image: url("images/ex1.jpg"); background-size: cover; width: 550px; height: 300px; margin: 50px; padding: 30px; border-top: 3px thick; border-top: solid; border-top-color: hsl(327, 62%, 55%); box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; } .card-four{ border-radius: 5px; background-color: hsl(0, 0%, 100%); background-image: url("images/ex.jpg"); background-size: cover; width: 500px; margin: 50px; height: 250px; padding: 30px; border-top: 3px thick; border-top: solid; border-top-color: hsl(128, 62%, 55%); box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; }
Not what the assignment asked for, but whatever this is, it does function
-
background-image: url("images/ex1.jpg");
The file name should be more descriptive
-
background-color: hsl(234, 12%, 34%);
This doesn't seem necessary
-
background-size: cover; background-image: linear-gradient(356deg, rgb(179, 195, 34) 0%, rgba(253,187,45,0.022846638655462215) 100%), url(images/elephants.jpeg)
would love these to be indented
-
h2 { color: hsl(234, 12%, 34%); font-weight: 600; }
You may want to restrain the scope of this rule to just one of of the h2s as the different cards may be styled differently
-
-
github.com github.com
-
<article class="card-three"> <h2>Arts</h2> </article> <article class="card-four"> <h2>Technology</h2> </article>
Where's your content?
-
-
github.com github.com
-
<br>
I get what you're trying to do here with the "br", but it falls apart when the window is resized. I think wrapping the content in an element and styling it with a max-width property would be better, as this would prevent it from become really long on wide displays while letting it resize dynamically on small displays
-
<footer id="end">
same issue I had with the body. I don't think the assigning a class is necessary given you can just use an element selector
-
<main class="image"> <h1>Welcome to Hairpins Boutique Salon</h1> <p>Located in the heart of the Comox Valley, Hairpins Boutique Salon offers a high-end experience with competitive prices, top of the line products<br> and a warm, welcoming atmosphere.</p> <br> <figure> <img src="images/the-hairpins-salon.jpeg" alt="hairpins salon" width="800" height="700"> <figcaption> The Hairpins hairdressing salon in Courtenay, BC, Canada.</figcaption> </figure> <p>Stylist and owner, Staysea Brown has been overwhelmed by the success Hairpins has received over the past 10 years and is ever grateful to the<br> Comox Valley community for all the support. With over a decade of industry experience, Staysea has the knowledge and drive to run a successful <br>business that's hard to forget. Pop on by!</p> <div><a href="services.html" style="color:palevioletred"> check out our services</a></div> <h2>Meet the Team</h2> <p> Offering talented stylists with varied personalities, outgoing customer service, and an eclectic, fun atmosphere, Hairpins is striving to be one of a <br> kind.</p> <br> <p>By evolving with their clientele and constantly offering the latest trends and services, they are ensuring every visit is a unique one. Hairpins is <br> filled with its own special brand of magic. Come in and sit down, the Hairpins' Girls are waiting for you!</p> <figure> <img src="images/the-hairpins-team.jpeg" alt="the hairpins team photo" width="800"> <figcaption>We are incredibly proud of our diverse team of stylists who greet each client with a smile. We prioritize inclusivity, community, and <br> sustainability, and make sure that everyone who walks through our door feels welcome.</figcaption> </figure> </main>
I like that you used a semantic element here .
-
<body class="first">
Not sure why you would use a class. I think just using a element selector to style the body would be more concise
-
-
github.com github.com
-
<br>
I get what you're trying to do here with the "br" tag, but it falls apart when the window is resized. I think wrapping the content in an element and styling it with a max-width property would be better, as this would prevent it from become really long on wide displays while letting it resize dynamically on small displays
-
<!DOCTYPE html> <html lang="en"> <head> <!-- DGL 103 CVS2 - Tatiana Suarez - Assignment C --> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hairpins Salon</title> <link href="style.css" rel="stylesheet"> <link rel="icon" type="image/x-icon" href="images/favicon.ico"> </head> <body> <header> <a href="index.html"><img src="images/hairpins-salon-logo.png" alt="hairpins Logo" width="300"></a> <nav> <a class="navlink" href="index.html">Home</a> <a href="services.html">Services</a> <a href="contact.html">Contact Us</a> </nav> </header> <h1>Welcome to Hairpins Boutique Salon</h1> <p>Located in the heart of the Comox Valley, Hairpins Boutique Salon offers a high-end experience with competitive prices, top of the line products<br>and a warm, welcoming atmosphere.</p> <figure> <img src="images/the-hairpins-salon.jpeg" alt="Harpins hairdressing" width="600"> <figcaption>The Hairpins hairdressing salon in Courtenay, BC, Canada.</figcaption> </figure> <p>Stylist and owner, Staysea Brown has been overwhelmed by the success Hairpins has received over the past 10 years and is ever grateful to the<br>Comox Valley community for all the support. With over a decade of industry experience, Staysea has the knowledge and drive to run a successful<br> business that's hard to forget. Pop on by! </p> <p id="call-to-action" style="background-color: #ACBBA6; padding: 1.5rem;"><a href="services.html">“Time for a new do? Check out our services.</a></p> <h2>Meet the Team</h2> <p>Offering talented stylists with varied personalities, outgoing customer service, and an eclectic, fun atmosphere,Hairpins is striving to be one of a<br>kind.</p> <p> By evolving with their clientele and constantly offering the latest trends and services, they are ensuring every visit is a unique one. Hairpins is<br> filled with its own special brand of magic. Come in and sit down, the Hairpins'Girls are waiting for you! </p> <figure> <img src="images/the-hairpins-team.jpeg" alt="Hairpins team" width="600"> <figcaption>We are incredibly proud of our diverse team of stylists who greet each client with a<br> smile.We prioritize inclusivity, community, and sustainability, and make sure that<br>everyone who walks through our door feels welcome.</figcaption> </figure> <p class="booking"><a href="contact.html">Contact us today to book an appointment!</a></p> <footer> <p class="copyright"> Content taken from <a href="https://www.hairpins.ca/" target="_blank">https://www.hairpins.ca/.</a> Used for educational purposes only.</p> </footer> </body> </html>
The way you spaced out the elements is great, very readable
-
<h1>Welcome to Hairpins Boutique Salon</h1> <p>Located in the heart of the Comox Valley, Hairpins Boutique Salon offers a high-end experience with competitive prices, top of the line products<br>and a warm, welcoming atmosphere.</p> <figure> <img src="images/the-hairpins-salon.jpeg" alt="Harpins hairdressing" width="600"> <figcaption>The Hairpins hairdressing salon in Courtenay, BC, Canada.</figcaption> </figure> <p>Stylist and owner, Staysea Brown has been overwhelmed by the success Hairpins has received over the past 10 years and is ever grateful to the<br>Comox Valley community for all the support. With over a decade of industry experience, Staysea has the knowledge and drive to run a successful<br> business that's hard to forget. Pop on by! </p> <p id="call-to-action" style="background-color: #ACBBA6; padding: 1.5rem;"><a href="services.html">“Time for a new do? Check out our services.</a></p> <h2>Meet the Team</h2> <p>Offering talented stylists with varied personalities, outgoing customer service, and an eclectic, fun atmosphere,Hairpins is striving to be one of a<br>kind.</p> <p> By evolving with their clientele and constantly offering the latest trends and services, they are ensuring every visit is a unique one. Hairpins is<br> filled with its own special brand of magic. Come in and sit down, the Hairpins'Girls are waiting for you! </p> <figure> <img src="images/the-hairpins-team.jpeg" alt="Hairpins team" width="600"> <figcaption>We are incredibly proud of our diverse team of stylists who greet each client with a<br> smile.We prioritize inclusivity, community, and sustainability, and make sure that<br>everyone who walks through our door feels welcome.</figcaption> </figure> <p class="booking"><a href="contact.html">Contact us today to book an appointment!</a></p>
You could use semantic elements like main or section to structure this content
-
id="call-to-action"
I like how you named this id. It describes the function while remaining concise.
-
-
github.com github.com
-
Questions, comments, ready for a new do? We look forward to hearing from you!<br> If you're looking to make an appointment online, please do so here.
Missing p tags
-
-
github.com github.com
-
Range from 45 minutes to 90 minutes
again just missing the tags
-
Below is a list of services we proudly offer.
Missing "p" opening and closing tags
-
-
github.com github.com
-
#require
maybe you could use more descriptive class and id names. Just reading the CSS, I'm not sure what the function of the element with this id might be
-
-
github.com github.com
-
.copyright { font-style: oblique;
I've never seen this before. Tt looks very similar to italics, so I guess it works
-
- Sep 2022
-
github.com github.com
-
<h1>Who am i?</h1> <P>My name is ashutosh bhardwaj. I am 18 years old. I am from punjab. I am pursuing web and mobile application development program from North Island College. Right now I am living in comox.</P>
this looks pretty good
-
<ul><li>contact me on email: <a href="http://aashuu00454@gmail.com">aashuu0045@gmail.com</a> </ul>
More minor nit-picking, the 'li' element is missing its closing tag
-
<h2>How much web experience do I have?</h2> I do not have any experience with web. <h2>Do I know any coding languages</h2> No, i do not know any programming language. <h2>What I would like from this course?</h2> At the end i want to see myself having good knowledge about languages and able to do programming things.
This needs opening and closing 'p' tags around the paragraphs
-
-
github.com github.com
-
<br> <br> <br> <br> <hr><footer>Copyright © 2022 Arshdeep Singh </footer>
This is good! I like the extra breathing room the 'br' tags create
-
<ul><li>By email <a href="https://mail.google.com/mail/u/0/#inbox">singharshdeep4980@gmail.com</a> <!-- I used the a tag to link the gmailaddress --> </li><li> DM me on instagram <a href="https://www.instagram.com/">arshdeep_7428</a></li></ul>
This looks good! Only improvement could be to format the elements in such a away that would communicate the hierarchy. For example each 'li' element could be on its own line and further indented from the 'ul' tag.
-
My name is Arshdeep Singh.I was born in NEW DELHI,INDIA and currently I am living in Comox,British Columbia.I wanted to a professional web developer .Currently, I am enrolled in <b>Associate Science Degree</b> at NIC.<!-- I used the b tag to bold the text -->
again just needs opening and closing 'p' tags
-
<h2>What's my experience in web development?</h2> Since I am interested in creating websites, I have been learning a little bit about it with the help of <b> YOUTUBE </b>. However, I do not have any expertise in this area. <h2>Do i know any coding language?</h2> Although I have no coding experience, I will learn everything there is to know about creating websites this academic year. <h2>What is my expectations while this academic year?</h2> I want support and assistance from my tutor and pals. I'll develop my abilities during this course.</div>
This is good, it just need opening and closing 'p' tags around the paragraphs
-
-
github.com github.com
-
<!-- F22 DGL 103 CVS2 - Ashutosh Bhardwaj - Assignment A -->
Minor point, as this code works perfectly. But putting this comment on its own line will make it more readable
-
<p>This is *Ashutosh Bhardwaj* speaking <p></p>
Make sure every element has one opening and closing tag. (with the exception of some elements don't require closing tags).
So in this case, the middle "p" tag isn't doing anything.
-
-
github.com github.com
-
p {color: blue;}
Looks good!
-