- Nov 2022
-
github.com github.com
-
.list-style { list-style-type: circle
can use direct class name here.
-
margin-left: 50px; margin-top: 50px; margin-right: 50px; margin-bottom: 50px;
you can use shorthand property for this margin as you can add in the same line.
-
-
github.com github.com
-
<br style="clear: left;">
i don;t know how it works.
-
<br>
Without using the <br> tag you can achive the new line by adjusting the width of the block.
-
</div> <br> <br>
uneven spaces Those can be removed can add indentation correctly
-
-
github.com github.com
-
position: relative; top: 50px;
The common properties will be written once when you call all class elements in one section like.
.footer-content1, .footer-content2, .footer-content3{ }
-
.footer-content1
it will be called directly with out div in front of it. as you know.
-
/*.article { float: left; position: relative; left: 250px; width:25%; box-sizing: border-box; }*/
You can remove it. if it is unused.
-
font-family: 'Poppins', sans-serif;
Nice to see the fonts.
-
-
github.com github.com
-
<main> <h1>Analyzing the Design of Glass Expressions Website</h1> <section> <h3>Home Page Analysis:</h3> <p>The content on the home page of this website is organized into blocks. It has a header, body, and footer. In the header, navigations to other pages and a logo is included. The navigations are working and users can easily move around the website. The logo is in the top-left and the navigation menus are in the center of the page which seems okay. But they have included an image slideshow in the header, which is not recommended. They can provide this slideshow anywhere in the body part. The logo is inside the navigation elements div. It is not visually appealing and doesn’t make the design attractive to the viewers. </p> <p>The purpose of this page is clearly mentioned. The business mentioned in the website sells glass working tools and supplies. There is unnecessary white space between images and content, which could be avoided. They could have included CTA's to service and contact pages on the home page, which would have achieved business easily.</p> <p> On this page, they have included the opening and closing times and days, which could be removed and added to the contact page. The heading "Latest Project" is given after the images of projects they have done. The heading should be first, so the website visitors get a clear understanding of what the images are about. Change the position of the link to the Facebook page to the footer. </p> <h4>Screenshot of Areas of Concern</h4> <figure class="fig-1"><img src="image/logo-slideshow-nav.png" width="500" height="200" alt="change-position-logo"> </figure> <figure class="fig-1"><img src="image/heading-project.png" width="500" height="200" alt="change-heading"> </figure> <figure class="fig-1"><img src="image/unwanted-space-body.png" width="500" height="200" alt="change-space"> </figure> <figure class="fig-1"><img src="image/open-close-contactus.png" width="500" height="200" alt="change-timing"> </figure>
Very good explanation and analysis. image are good.
-
<p>On this page they provide a contact form through which people can contact the business directly to enquire. They also included their location details and a contact number. They can include a Google Map on this page. It helps customers find your business on Google Maps. They can include an email address too. Add the opening and closing days and time details on this page. Make the contact number clickable, and if they add the email address, make it clickable too. The link to Facebook page can be added to the footer, remove it from the body part.</p>
lines are too long to read / scroll the code you can use window size lines.
-
<header></header>
you can add any h1 here rather than in main. just suggition.
-
- Oct 2022
-
github.com github.com
-
<footer> <ul> <li>Monday ~ Closed</li> <li>Tuesday 9:00am ~ 5:00pm</li> <li>Wednesday 9:00am ~ 8:00pm</li> <li>Thursday 9:00am ~ 8:00pm</li> <li>Friday 9:00am ~ 5:00pm</li> <li>Saturday 9:00am ~ 4:00pm</li> <li>Sunday ~ Closed</li> </ul>
You could remove same information as contained in the main body part.
-
<body
didn't used small key word any where.
-
-
github.com github.com
-
<img src="images/the-hairpins-salon.jpeg" alt="The hairpins hairdressing salon in Courtenay,BC,Canada"> <figcaption>The hairpins hairdressing salon in Courtenay,BC,Canada</figcaption>
Expected "figure" block when you use "figcaption".
-
<body>
No usage of small keyword
-
Assignment-C
it's not assignment-c its home or actual page name
-
-
github.com github.com
-
</header>
its better to add main block in between header and footer
-
<body
No usage of small key word
-
#
is it works?, I will try. good new content
-
style="list-style-type: none;
inline style uses good understanding
-
-
github.com github.com
-
nav li
you can use "li" directly.
-
footer ul li a:hover
Good to see new things
-
h3, h4,h6
good usage of space
-
/* using class selector*/
comments helps to understand which type is used
-
-
github.com github.com
-
.card-four > .span
You can use direct ".span" class instead of "card-four .span" .
-
span > span{
It's confusing if you use keyword as class name, better to make another word.
-
0,0%,100%
if you add spaces, it is easy to read and understand the code.
-
.card-one > p
I don't know about this. I will try next. new point.
-
-
github.com github.com
-
<div class="circles"> <div class="div-red"></div> <div class="div-blue"></div> <div class="div-blue"></div>
good research for dots.
-
<img src ="images/kevin-dowling-MMWsEvNK3YQ-unsplash.jpg">
image needs "alt" text.
-
<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 href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@1,300&display=swap" rel="stylesheet">
Used similar font style as actual.
-
-
github.com github.com
-
<title>Hairpins General Information</title>
it's not actual title of the home page.
-
<a href="contact.html"> Contact us today to book an appointment! </a>
it may be written in the in the footer section
-
<main> <h3> 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. </h3> </main>
whole part should contain main because we are using footer at bottom it clearly states that content divided from main to footer.
-
<style> h2 { background-color:black; color:white; } </style>
Used embedded type of style in the head section as for the instructions.
-
-
github.com github.com
-
<title>Hairpins Offered Services</title
it's not actual title of the source page
-
. Used for educational purposes only.
I think it should be highlighted like bold or strong because to know it is for reference only
-
<p> <a href="contact.html"> Contact us today to book an appointment! </a> </p>
It's better to add in footer because it is common to every page and displayed bottom of the page.
-
style="list-style: none;
inline styles written in ul list
-
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!-- google font--> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
Added 3 different google fonts in the head section by the tag LINK
-
-
github.com github.com
-
<title>Hairpins Contact Information</ti
it's not actual title of the original page
-
l class="background"> <li> Monday ~ Closed </li> <li> Tuesday 9:00am ~ 5:00pm </li> <li> Wednesday 9:00am ~ 8:00pm </li> <li> Thursday 9:00am ~ 8:00pm </li> <li> Friday 9:00am ~ 5:00pm </li> <li> Saturday 9:00am ~ 4:00pm </li> <li> Sunday ~ Closed </li>
used inline style in the unordered list.
-
Hairpins Boutique Salon #4 - 224 6th Street Courtenay, BC V9N 1M1
It may be in the list that appears good.
-
-
github.com github.com
-
/* sa 48 px */
used comments for the indication that what he has used in the for the styling.
-
h1 { font-size: revert;
good usage of styles and key words and added one identifier. written all required steps that instructor asked
-
-
github.com github.com
-
margin-left: -2px; margin-right: -2px;
Best use of CSS styles.
-
-
github.com github.com
-
<article class="card-three"> <h3> SILKTRICKY </H3> <p> What is SlickTricky? </p> <h2> A NEW KIND OF BEAST </h2> <p id ="watch-video"> Watch Video </p> </article>
I think you have to add dots after watch video.
-
<h3 id="Live"> Live </h3> <h3 id="Breaking"> Breaking </h3> <h3 id="UK"> UK </h3>
Good use of h3 elements for highlight.
-
<p> What is SlickTricky? </p>
Check spelling a common mistake.
-
</H3>
used capital letter in closing tag
-
- Sep 2022
-
github.com github.com
-
<h1>Hello World</h1> <p>This is *Aran Arora* speaking.</p> <img src="images/earth.jpeg" width="600" alt="earth">
Nice works all good.
-
-
github.com github.com
-
<h1>Hello World</h1> <p>This is Josmi speaking.</p> <img src="images/Josmi.jpg" width="600" alt="Josmi Jose">
good it all perfect.
-
-
github.com github.com
-
<link rel="stylesheet" href="style.css">
I think you have added extra link tag for css file. gone through all code and i felt it you have added extra tags .
-
-
github.com github.com
-
>ASSIGNMENT
I have read all code and you have written all required elements that assigned in instructions.
-