- Oct 2022
-
github.com github.com
-
<span class="dot"></span> <!--how can i center these dots and turn the one red? (in css of course)-->
Delete your button , replace it with an anchor within a div like
div a class = 'watch' href = https://www.youtube.com/watch?v=6u1Ps6ZlDxA> Watch Video /a-/div----------------------------------------------then place the span next then put a closing div to close out the div with class group!
then we gotta work some css magic which i will show you on css side!
-
class="dot"
apply id="dot" instead of class
-
<!--how to make the picture scale to fit?-->
I used an external image resizer and then from there sized it down. It does not distort nearly as much!
-
overall looks good just needs some formatting. I tried to highlight the worst offenders and loved the slick rick
-
<button onclick="window.location.href='https://www.youtube.com/watch?v=6u1Ps6ZlDxA';">
Lol slick rick
-
</article> <article class="card-four"> <img src="images/covid-christmas.jpg" width="320" height="250" alt="Street at Christmas"> <!--how to make the picture scale to fit?--> <a class="btn btn-Live"> Live </a> <a class="btn btn-Breaking"> Breaking</a> <a class="btn btn-UK"> UK</a> <p>'Plan C' rumors grow; Downing Street Christmas party cancelled; warning Scotland's R number could rise above 2| Covid latest</p> </article> </body> </html>
Formatting
-
<div class="group"> <br> <p>What is SilkTricky?</p> <h3>A NEW KIND OF BEAST</h3> <button onclick="window.location.href='https://www.youtube.com/watch?v=6u1Ps6ZlDxA';"> <!--linked this to a slick rick video for humour's sake. I used the same video for the links in card 4 as well just for conveniece--> Watch Video </button> </div>
formatting
-
<link 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"> <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=Montserrat:wght@300&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:wght@500&display=swap" rel="stylesheet"> </head>
Needs to be formatted
-
-
github.com github.com
-
.dot { height: 10px; width: 10px; background-color: aqua; border-radius: 50%; display:inline-block; text-align: center; /*can anyone help me understand why these dots wont center? */ margin-bottom: 10px;
Change .dot margin-bottom:10px; to margin-top:20px;---------then copy and paste it and make one an id named dot
-
}
Make a class named watch----------------------------------- .watch{ background-color:aqua; padding:1.5px; font-size:1.2rem; }
-
/*Does anyone know how to get a black border around the letters here?*/
just as you did for the btn live, but are you trying to make a border or the text black? to make the text black its just color:black;
-
-
github.com github.com
-
{background-color: rgb(43, 150, 226);}
Needs to be formatted
-
background-color: bisque
Missing semi colon
-
font-family: 'Source Code Pro', monospace; text-align: center; background-image: url(Images/salon-background.jpeg);
indent
-
-
github.com github.com
-
<li>FULL FOIL: $188/$219 with cut</li> <li>/4 FOIL: $172/$203 with cut</li> <li>1/2 FOIL: $158/$189 with cut</li> <li>1/4 FOIL: $144/$175 with cut</li>
Indent each li item to show they are child of the ul element, also making it much easier to read.
-
<p> <h1>Cuts</h1> Range from 45 minutes to 90 minutes</p>
the opening p tag needs to be brought down to where it begins
-
<h1>Cuts</h1>
something smaller then the h1 would have been more appropriate for the following services
-
<nav> <a href="contact.html">Contact Us</a> </nav>|
No need for nav
-
<p>Content taken from https://www.hairpins.ca/ <a href="url">https://www.hairpins.ca/</a>
Nothing between anchor tags (a) so therefore nothing to click so your link is currently unreachable.
-
-
github.com github.com
-
<p>Content taken from https://www.hairpins.ca/ <a href="url">https://www.hairpins.ca/</a>. Used for educational purposes only.</p>
You have nothing between the anchor tags therefore you have no clickable link on your actual site
-
<p>Content taken from https://www.hairpins.ca/ <a href="url">https://www.hairpins.ca/</a>. Used for educational purposes only.</p>
Also its easier to read if you start the p on new line showing that it is truly a child elements of the footer.
-
<p> If you're looking to make an appointment online, please do so here. <p>
Where is the link to make an appointment?
-
<ul> <li><a href="index.html">Home</a></li>
whitespace unrequired
-
</p>
What paragraph is this closing tag for?
-
<p>Hairpins Boutique Salon #4 - 224 6th Street Courtenay, BC V9N 1M1 </p> <!--this link needs to be more simple, I need to figure out how to name it--> Check us out on Google Maps <a href="url">https://www.google.com/maps/place/Hairpins+Boutique+Salon/@49.6904218,-124.9971279,15z/data=!4m5!3m4!1s0x0:0x859b2cfce3bc31ea!8m2!3d49.6904117!4d-124.9971261</a> <h1> contact </h1> <!--added email and telephone links here--> <p><a href="tel:2503387467">Tel: 250-338-7467</a></p> <a href="mailto: salon.hairpins@gmail.com">Email: salon.hairpins@gmail.com</a> </p> <!--added contact us link--> <p> Contact us today to book an appointment! <a href="contact.html">Contact Us</a> </p>
this would have been better off as an entire being instead of being split up multiple times
-
<h1>Location</h1>
I feel something smaller then an h1 would have been of better use here
-
<h1> Hours </h1>
I feel something smaller then an h1 would have been of better use here
-
-
github.com github.com
-
<img class="the-hairpins-team.jpeg" src="Images/the-hairpins-team.jpeg" alt" a group photo of the hair pins salons 11 staff members ">
This is missing the proper close at the end. The backslash.
-
<nav><a href="services.html">Services</a></nav>
No need for nav ! youre totally fine with just the anchor :)
-
<figcaption> The Hairpins hairdressing salon in Courtenay, BC, Canada. </figcaption>
This should be one line
-
A bit much whitespace but besides that looks great!
-
<p> Contact us today to book an appointment! <nav> <a href="contact.html">Contact Us</a></nav>|
The p element is not closed, and thereis no need for the nav, nav is used for a large chunk of navigational links. Youre only using one in this part so no point.
-
-
github.com github.com
-
h1{font-size:initial\ }
because of the slash nothing is happening here
-
#h1{ color: brown; }
using id selector without declaring or giving name to it.
h1 on its own is an identifier for all h1 elements
-
#h1 { background-color: dimgrey; }
Possibly because your using an id but without using a name for said id. No way to invoke it.
h1 on its own is an identifier for all h1 elements
-
-
github.com github.com
-
<h2>Hairpins Boutique Salon</h2> <h2>#4 - 224 6th Street Courtenay, BC V9N 1M1</h2> </section> <h2> Check us out on Google Maps:</h2> <a href="https://www.google.com/maps/place/Hairpins+Boutique+Salon/@49.6904218,-124.9971279,15z/data=!4m2!3m1!1s0x0:0x859b2cfce3bc31ea?sa=X&ved=2ahUKEwiYi_2Ex6T6AhXNMjQIHYkoCUUQ_BJ6BAhSEAc"> Hairpin Salon</a> <br> <h2> <a href="250-338-7467"> Tel: 250-338-7467 </a></h2>
It would have made more sense to have this together then to have half of it inside of an unrelated section
-
<a href="index.html">https://www.hairpin.ca/.</a>
Linking to wrong site shouldnt be your own
-
Pretty good syntax wise, just excessive white space and needs a bit of formatting! good work besides that :)!
-
</head>
lots of unnecessary white space, It wont affect the overall look of the site but it makes reading and debugging difficult
-
<section>
For Code readability i would have put a blank line above this section just to be able to discern.
-
-
github.com github.com
-
<br> <br> </section> <br>
Im not entirely sure what the idea here is
-
excessive whitespace couple syntax errors but great work otherwise!!
-
> <a href="index.html">https://www.hairpin.ca/.</a
This is linking to the wrong site, it should link to the hairpin website not your own
-
</h3>
This should be at the end of the h3 not on new line
-
</ul>
This should be on its own line for readability
-
<ul> <li>$47.00 = 45 Minute Clipper Cuts and Short Fine Hair</li> <li>$61.00 = 60 Minute Cut for Fine to Medium Hair</li> <li>$76.00 = 75 Minute Cut for Medium to Thick Hair</li> <li>$90.00 = 90 Minute Cut for<em>THICK THICK</em> Hair, you know who are :)</li
It would be best to not have spaces between the li elements
-
-
github.com github.com
-
Syntax is good for most part, just excessive whitespace ! Great work !!
-
<h2> Contact us today to book an appointment!</h2>
Should be one line
-
/>
This should be put up were it belongs next to the 100
-
<img src="images/the-hairpins-salon.jpeg" alt="a photo of hairpin salon">
It could possibly be that you are not being specific enough with the photo path. Try right clicking on the image in vsc and clicking copy relative path.
-
- Sep 2022
-
github.com github.com
-
dont forget to use body tags to enclose all of your stuff you want to be an actual viewable part of your website!
besides that looks great!!
-
<p> assignment A</p>
you dont need to put the title within p tags. you can just simply write whatever the title of your page is inbetween title tags.. EX title assigment A /title no need for p tags
-
-
github.com github.com
-
</li></ul>
Besides this everything else looks great syntax wise.
I would put the ul on its own line and in line with the opening ul. Improves organization and readability .
-
-
github.com github.com
-
<!DOCTYPE html> <html lang="en"
I really dont see any issues in your syntax! Great work!
-
-
github.com github.com
-
<h1>Hello World</h1> <p>This is *Roberta Joehle* speaking.</p>
Everything looks great, Im not sure if this is a hard rule but it does look much more neat if you start the paragraph on the line below your header I also probably would have included the Comment F22 DGL 103 DLU1 – Roberta Joehle - Assignment A on a new line aswell<br /> overall great job!
-