header, article, aside, footer
What a convenient way to apply the same padding to multiple elements!
31 Matching Annotations
- Nov 2022
-
github.com github.com
-
-
list-style-type: none;
If you are making a list inline, then you will not need to specify the list style as 'none' since making a list horizontal gets rid of the bullet points.
-
-
github.com github.com
-
<span></span><!--Gray Squares-->
Great job using span elements for the grey squares, just keep in mind that they are place holders for pictures and you'll need to add them later.
-
<html lang="en">
I ended up getting an error when I went to check my html file for having "en" as the language for using latin text. Try using lang="zxx".
-
- Oct 2022
-
github.com github.com
-
padding: 30px 30px;
This can be shortened to padding: 30px
-
font-size: 1.5rem;
If you are using the 62.5% rule, then to convert the font size back to 16px, the value needs to be 1.6rem.
-
the elder
In the context of the sentence, "elderly" would be more appropriate.
-
<html lang="en">
I like how the content is well organized and easy to read.
-
-
github.com github.com
-
.card-four { border-radius: 15px; background-color: white; width: 365px; height: 410px; margin: 40px; padding: 20px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } .card-four a{ background-color: red; color: white; margin: 1px; font-style: normal; }
These elements should not be indented in CSS. They should be inline with the rest of the CSS properties.
-
('images/R.jpg')
It is best practice to use descriptive file names, that way future programmers can know what the file contains without having to go directly to the file. "R.jpeg" can be a picture of anything.
-
<section class="card-three"> <div class="card"> <h2> SILKTRICKY</h2> <p> <i> What is Silktricky? <br/> A NEW KIND OF BEAST </p> <p1><i>Watch Video</p1> </div> </section>
<section> and </section> should have the same indentation; they mark the beginning and end of an element.
-
<p> 'PLAN C'rumours grow; <br/> Dowing Street Christmas<br/> party cancelled;warning<br/> Scotland's R number<br/> could rise above 2 | COVID<br/> latest</p>
Paragraph should be indented inside the div element for better readability. The way the HTML is displayed on a webpage will remain the same, but it will make coding easier.
-
-
github.com github.com
-
/*DGL 103 CRS1C - Isiah Dyck - Assignment D*/ html { font-size: 62.5%; } body { font-size: 1.5rem; font-family: "Poppins", sans-serif; background-color: hsl(0, 0%, 95%); } h2 { color: hsl(234, 12%, 34%); font-weight: 600; } p { color: hsl(229, 6%, 66%); } .card-two { box-sizing: border-box; width: 560px; background-color: hsl(234, 12%, 34%); margin: 50px; padding: 30px; border-radius: 30px; background: rgb(164, 163, 177); /*https://cssgradient.io/*/ background-image: linear-gradient(0deg, rgba(164, 163, 177, 0.8743872549019608) 0%, rgba(133, 133, 133, 0.938813025210084) 35%, rgba(37, 39, 40, 0.15730042016806722) 100%), url("images/elephants.jpeg"); /*https://cssgradient.io/*/ background-size: cover; filter: grayscale(100%); } .card-two h2, .card-two p { color: white; } .card-one { background-color: hsl(0, 0%, 100%); width: 500px; margin: 50px; padding: 30px; border-radius: 5px; border-top: 3px solid hsl(180, 62%, 55%); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; /*https://getcssscan.com/css-box-shadow-examples*/ } .card-one img { border-radius: 50%; } .card-three { box-sizing: border-box; background-color: hsl(250, 1%, 34%); width: 500px; height: 500px; margin: 50px; padding: 30px; background: rgb(251, 251, 251); background-image: linear-gradient(225deg, rgba(251,251,251,1) 0%, rgba(194,194,194,1) 2%, rgba(251,251,251,0.7847514005602241) 3%, rgba(37,39,40,0) 100%), url("images/wolves.jpg"); background-size: cover; color: white; } .card-three h1 { font-family: 'Poppins', sans-serif; position: relative; top: -25px; left: 1px; color: rgb(50, 241, 216); } .card-three p, .card-three h2 { color: white; text-align: center; line-height: 0em; position: relative; top: 275px; } .card-three h2 { font-family: 'Poppins', sans-serif; } .card-three .box { box-sizing: border-box; background: rgb(50, 241, 216); margin: auto; width: 100px; height: 25px; color: black; line-height: 25px; } .card-three .dot { height: 10px; width: 10px; border-radius: 50%; display: inline-block; position: relative; top: 280px; left: 45%; } .red { background-color: rgb(247, 58, 45); } .green { background-color: rgb(50, 241, 216); } .card-four { box-sizing: border-box; background-color: hsl(250, 1%, 34%); width: 500px; height: 500px; margin: 50px; padding: 5px; background: rgb(251, 251, 251); color: white; } .card-four div { margin: 40px 0px 5px 30px; } .card-four div h1 { margin: 0px; padding: 5px; display: inline-block; font-size: medium; } .whiteword { color: white; } .breaking { color: black; background-color: rgb(233, 217, 0); } .card-four .new { color: black; margin: 5px 0px 10px 30px; } .darkblue { color: darkblue; }
Good job on the CSS!
-
/*https://getcssscan.com/css-box-shadow-examples*/
Good job using comments to source code!
-
<span class="dot red"></span> <span class="dot green"></span> <span class="dot green"></span>
Class names should not include the colour of the element, that way you can change the colour of the element without causing confusion. Using "first dot", "dot" accomplishes the same thing without indicating the styling of the element.
-
<h1 class="darkblue">
Class names should not include the elements colour; you might need to change the colour of the element later on. A more appropriate class name, in this instance, would be "nation" or "country" or even "uk".
-
-
github.com github.com
-
<a href="mailto:salon.hairpins@gmail.com">Salon.hairpins@gmail.com</a>
All letters in the email should be lowercase.
-
-
github.com github.com
-
<br />
The correct syntax is br without the "/".
-
<section class="meetteam">
Class names with multiple words should have a non blank separator between each word to make the class name obvious to programmers. I recommend using a "-".
-
-
github.com github.com
-
.linkcolorblack a { color: black; } #spacedletters{ letter-spacing: 0.5rem; }
Classes and IDs should not be named after their style.
-
<footer class="linkcolorblack">
Class names should not have styling in their names. That way if you decide to change the colour in the future, you are not stuck with an element with "-colorblack" in it's name.
-
<!DOCTYPE html> <html lang="en"> <head> <!--DGL 103 // CRS1 // Jacob Kennedy // 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 rel="stylesheet" href="style.css"> <link rel="icon" type="image/x-icon" href="images/favicon.ico"> <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@300&family=Open+Sans:wght@300&family=Oswald&display=swap" rel="stylesheet"> <style> footer p{ color: #613030;} </style> </head> <body class="open_sans"> <header> <a href="index.html" ><img src="images/hairpins-salon-logo.png" alt="hairpins Logo" width="300" ></a> <nav > <ul> <li><a href="index.html">Home</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </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 and a warm, welcoming atmosphere. </p> <!--(include image of salon with the caption: The Hairpins hairdressing salon in Courtenay, BC, Canada.)--> <figure> <img src="images/the-hairpins-salon.jpeg" alt="The hairpins salon" width="500" > <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 Comox Valley community for all the support. With over a decade of industry experience, Staysea has the knowledge and drive to run a successful business that's hard to forget. Pop on by! </p> <p class="oswald" style="background-color: gray;"> <strong>Time for a new do?</strong> <a href="services.html">Check out our services</a> <!--(add link to services page)--> </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 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 filled with its own special brand of magic. Come in and sit down, the Hairpins' Girls are waiting for you! </p> <!--(include image of team with caption: We are incredibly proud of our diverse team of stylists who greet each client with a smile. We prioritize inclusivity, community, and sustainability, and make sure that everyone who walks through our door feels welcome.)--> <figure> <img src="images/the-hairpins-team.jpeg" alt="The Hairpins team" width="500" > <figcaption> We are incredibly proud of our diverse team of stylists who greet each client with a smile. <br> We prioritize inclusivity, community, and sustainability, and make sure that everyone who walks through our door feels welcome. </figcaption> </figure> <p> <a href="contact.html" >Contact us today to book an appointment! <!--(add link to contact page)--></a > </p> <footer class="linkcolorblack"> <p>Content taken from <a href=https://www.hairpins.ca>www.hairpins.ca.</a><!--(add link to website).--> Used for educational purposes only.</p> </footer> </body> </html>
Feel free to remove comments telling you to add elements to the page after you have added the elements. Other than that, good job.
-
- Sep 2022
-
github.com github.com
-
<!--I used an HTML comment to emphasise this header -->
Use the comment to state WHY the header is empathized.
-
<li> digital media</li>
The list element does not need an extra space in front.
-
Use indentation when creating child block elements for better readability and organization.
-
-
github.com github.com
-
To make the text more readable, I recommend adding lines between different content to better organize the code.
-
-
github.com github.com
-
<h2>What web experience do I have?</h2> <p>Unfortunately I have a very small knowledge and experience in the web. Prior to this course, the most learning i've done regarding the web was in a highschool digital media class. </p> <h2>What coding languages do I know?</h2> <p>In addition to my low knowledge in web experience, my coding experience is slim to none. Although I have taken multiple courses which reviewed certain coding languages, my choice to retain <strong>all</strong> of this information did not occur.</p> <p>The coding languages I learned about included:</p> <ol> <li>Python</li> <li>Java</li> </ol> <h2>What I would like from this course</h2> <p>I would like to be able to complete this course with a greater understanding of the implementation and application of HTML and CSS.<br><br><br><br></p> <footer>Copyright © Declan Hoeflich</footer>
The descendent elements of the body element should be displayed visually. Preceding whitespace between the parent and child block elements makes allows for programmers to visually organize the code.
-
<li>Python</li> <li>Java</li>
Different list items should be on different lines to make reading the code easier.
-
-
github.com github.com
-
<h1>Hello World</h1> <p>This is Ezra speaking.</p>
The heading and the paragraph should be written on different lines for better readability. While this is a simple web page with only two elements, on a more complicated website, having multiple elements on the same line makes code editing harder.
-
<title>Assignment A</title>
Title should be relevant to content of the page. 'Assignment A' while it works for in class assignments does not say anything about the content of the page to a third party who is not apart of the class. An appropriate title would be 'fried chicken', 'Hello World', 'Ezra Introduction', etc.
-
-
github.com github.com
-
<title>assignment A</title>
Title should be relevant to the content of the webpage. While in class environment 'assignment' is an appropriate title, it says nothing about the content of page to a potential third party. An appropriate title would be 'dog' or 'Hello World' or 'Declan introduction', etc.
-