Write to communicate
they also can use clear descriptive language to make reader to easily digest the things(this is a comment for the website you reviewed).
and it is better if you add that the thing which is good like use of headings are good or something like that.
Evaluation
I am unable to find this class name in the CSS, or where it use. I think you forgot to add this in CSS
if there is no use of it. It is better to remove this class name because it is not creating any difference and also creating confusion.
The content of the index page used only one type of font style. It's better to use 2 different fonts to differentiate the page's heading and body, which will easily catch the user's attention and differentiate the content's importance. The font weight of the paragraphs is very light which is hard for the user to read. The font-size is small which is hard for the user to read.
i don't think this divided lines making any difference in the webpage. it is better to not add space like this, so the code can easily readable with the content.
<p>Copyright <span>©</span> 2022 Sai Srinivas Alahari.</p>
it is more better if you add this is for educational purpose only with this.
contact form are not clickable.
good observation
<h2>Colors</h2> <p>The usage of the colors on the website is hard. The 60-30-10 rule was not used. Compared to monochromatic visuals, color helps the user process and store images more quickly. It can be utilized to elicit a response from your website's visitors or to a call to action. The color contrast of the paragraph's text is very light which is hard for the user to perceive the information. </p>
good point with good explanation.
<h3>Solution</h3>
This is good way to represent the problems with their solution.
<div>
you can add real grey image to make or any element to make it looks like image as it shown in the reference image as the instruction provided to make it same as the give image.
<div> <h3>Latest News</h3> <b>October 1:</b> <p>Lorem ipsum dolor sit.</p> <b>September 15th:</b> <p>Lorem ipsum dolor sit amet.</p> <b>september 10th:</b> <p>Lorem ipsum dolor sit amet.</p> </div>
These also cover in last week content. it is same as the upper one so you can take help from given notes by professor to make it same as the reference image.
<div class="container"> <div></div> <h2>Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, libero tempora. Ipsam, aliquid recusandae! Eius inventore soluta dolorem? Accusantium similique aliquam dicta, commodi reiciendis praesentium quas nulla mollitia excepturi laboriosam?</p> <button>Learn more</button> </div>
Their are reading links available in last three weeks from which you can read and get learn how to create the the content side by side with equal area and equal space around it.
<div> <h1>Lorem ipsum dolor sit amet.</h1> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, expedita eum harum quo itaque quam quibusdam ab pariatur nihil. Dolore quae aperiam id labore placeat fugiat? Error tempora eaque eligendi ipsum! Deleniti nisi aspernatur sint, vero harum cupiditate. Quia quasi, veritatis dicta ab ipsam maiores nam. Quae architecto provident exercitationem reiciendis repellendus accusamus sunt tempore. Ut veritatis quisquam illo quos totam error dolor sequi corporis libero minus provident, et accusantium vel natus minima vitae. Esse praesentium accusamus, nemo nulla eos fuga modi obcaecati harum debitis id earum deserunt corrupti cupiditate veritatis nisi aliquam explicabo, fugiat adipisci recusandae labore eligendi. Libero.</p> <button>Find out how we can help you</button> <img src="images/distance-and-inclass-students.png"> </div>
you can add float in css to make it same as the image.
</body>
I believe that you already completed it but you forgot to push your last work. Please push the final work. So i can get some ideas from it and give my comments on your work as a team member.
Thank you.
<article class="box-1"> <div> <h1>Write to Communicate</h1> <p>While analyzing this site the first thing I observed was how messy the content was. The content is not grouped in the blocks. It is hard to find headings as the color does not have enough contrast. The language used is not descriptive and accurate enough. For example, in the main headline it just says “Trending???” which doesn’t make any sense. It should be like “Looking for Trending fits?” The size should be a bit large and there should be a button for call-to-action. </p> </div> <img src="images/Screenshot (73).png"> </article> </body> </html>
The good observation. All points are cover as it mentioned in web design checklist.
The example also explains the way how the heading can improve.
That is good point cover in analyzation.
nav ul li a:hover{ color:orange; border-bottom: 1px solid orange; transform: scale(1.2); }
This is good way to make the page real look. nice use of it.
body{ font-family: sans-serif; margin: 0; }
I think you forgot to push the final, because it looks incomplete. you improve the page by using CSS. it also helps you to make it looks similar as the referance image is.
}
other things are good.
/*-------- For articles---------*/
i think after commenting about header CSS, you forgot to mention in comment which part is in "Main" to show case it in CSS.
<!DOCTYPE html>
other than all these things, which i mentioned down.You use all other things in very good way.
<ul> <li><h3>Latest News</h3></li> <li>Octtober 1:<br/>Lorem ipsum dolor sit</li><br /> <li>September 15th:<br/>Lorem ipsum dolor sit</li><br /> <li>September 10th:<br/>Lorem ipsum dolor sit</li> </ul>
i believe there should be more space between the heading tag and the content use after it. and the text size need to bigger for the content like month names, as i see in reference image.
<p>
i think p is in grey colour in reference image.
<li>Octtober 1:<br/>Lorem ipsum dolor sit</li><br />
its not look same as image reference its better if you use heading tag to make month name as heading.
<li><h3>Follow us</h3></li>
its even better if you make it little right
to make it same as reference image.
<li>Facebook</li><br /> <li>Instagram</li><br /> <li>Youtube</li>
I think its better if you use link on it.
<br
I think brakes are not needed we just need to make it same thats it not exact same.
padding-right: 100px;
Position of this can be same with the image by adding same value or as you like.
this thing makes it different from the picture which "Mam" provide us for reference.
left: 6%;
Position can be improve my using same on both side.
<!DOCTYPE html>
500 - 700 words needed for this assignment. i think you forgot to push the final work.
<h1>Welcome to Hairpins Boutique Salon</h1>
yes, it is important to put it in the main or you can put it in header. so it look nice.
<main>
it is better if you use multiple fonts, because the same fonts for every thing make some of the small thing, difficult to read.
<img src="images/the-hairpins-team.jpeg" alt="hairpins team" width="50" height="50" />
same over here image need to make them big.
<img src="images/the-hairpins-salon.jpeg" alt="The hairpins salon" width="50" height="50" />
yes, the images are two small to see. you need to make it big.
<main> At Hairpins, we care about the environment and recognize the impact we all have on it. We are continually making strides to reduce where we can and have only aligned ourselves with companies and products we believe in. We are proud to be a <span class="hexaDecimalColor">CERTIFIED GREEN CIRCLE SALON</span> and through that partnership are able to divert 95% of our salon waste from landfills. Get in touch if you have any questions or want to learn more about the programs and charities we are focusing our efforts on. </main>
for this page only the fonts need to be more clear, other things are good.
<h2>Meet the Team</h2>
if the headings are bolder that it would be more good. other than this the page looks fine.
<span style="background-color: rgb(132, 210, 156)" >Time for a new do?<b ><br><a href="services.html">Check out our services</a></b ></span
it is good if it show in a line.
<ul> <li>45 Minute Clipper Cuts and Short Fine Hair = $47</li> <li>60 Minute Cut for Fine to Medium Hair = $61</li> <li>75 Minute Cut for Medium to Thick Hair = $76</li> <li> 90 Minute Cut for THICK THICK Hair (you know who you are!) = $90 </li> </ul>
you miss the step:- the bullets need to remove in service page by styling as per the instruction its not over there.
<main>
you forgot to add background image. its not in style sheet and not in other pages.
.navbar ul nav { background: #3474acb1 }
unable to see any changes with this.
html { font-size: 62.5%; text-align: center; } nav ul { list-style-type: none; } nav li { display: inline-block; padding: 20px; } .navbar ul nav { background: #3474acb1 } h1 { font-size: 3rem; /* 3rem = 48px */ font-family: "Raleway", sans-serif; } body { font-size: 1.6rem; font-family: "Roboto", sans-serif; } p .special-magic { text-align: center; color: #3474acb1 } p .bookappointment { text-align: center; }
Rather than putting every element in the align them Center of the page. it is better to make body in Center.
p .bookappointment { text-align: center; } Copy lines Copy permalink View git blame Reference in new issue Go Footer
Yes, i think you forgot about footer:- there is no back ground colour of the footer, no padding and no colour change for the links in the footer.
nav ul {
i think you forgot to background colour of the nav on every page and Change the colour of the links in the nav on every page.
<nav class="nav-navbar">
i don't able to see any change happens with adding class over here.
nav ul { list-style-type: none; } nav li { display: inline-block; padding: 20px; }
it is better to add this at top, so it becomes easy for the reader to read. other than this i think every thing is cover as instructions.
strong
yes, no need of strong its better if you use something normal to bold because strong is use to tell the browser it is important thing in the web page.
function myMap() { var mapProp= { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); }
i think it is not working. it is better to add link rather than this.
<span>UK</span>
i feel this should be in blue colour.
.card-three
in card three there should be three fonts.
.imageStreet { height: 500px;
i think image covering more than half space of card which is not as same as instructions, so try to change it little.
height: 500px;
if the height is more greater than width like 200 greater than it, it make it as the instructions.
background-image: linear-gradient(180deg, rgb(123 124 119) 0%, rgb(198 65 1 / 0%) 50%), url(images/Lion.jpg);
I don't think so this making it similar to the instructions.
no need of gradient in this card.
background-image: linear-gradient(356deg, rgb(110 119 65) 0%, rgba(253, 187, 45, 0.022846638655462215) 100%),
I think this step was just for fun, only.
i think you misunderstood the instructions
background-size: 100% 100%;
if you don't use this your image looks good because it making the image squishy which not looking nice try to remove these two you will get good result.
background-position: 100%;
i don't think this is doing something. over here.
p { color: rgb(232, 221, 221); } h2 { color: rgb(78, 212, 232); }
This changes all cards font colours in these elements. You have to be more specific about it while changing the font colour in the elements.
.card-three { background:rgb(223, 200, 166); color: hsl(180, 100%, 100%);
I don't think it will work you have to add image to make it same as instructions.
img
You must be more specific while selecting tag because it affects all images in the page.
.card-three
You also have to add some fonts to make it similar to the instruction. And I think there are three different fonts in the reference image, so you have to add three different fonts, in my opinion.
card-three
I think you forgot to do card four. please follow the instructions. Please do it. The image is provided with instructions on how to do it.
Hi. I am Narendra Chowdary and student of North Island College in Digital Design + Development (Web development) Stream. I am from Andhra Pradesh which is located at southern part of India I have completed my Bachlores in Electronics and Communication Engineering in 2020 later i have attracted to Software Industry for bright future and my cousine instructed me to go with web designing which is ever lastning industry so, i am here to pursue my Post Graduation. Contact Me
I think you forgot to use three or more different inline-level text elements in your assignment, as mentioned in the instructions.
</form>
And you can add some elements to create space after your content and before footer, so it looks appealing.
<h1>Do i know any coding languages?</h1>
One webpage should contain one h1 so the browser algorithm can easily detect the essential things on the web page, as Claire Guiot explains in class.
Hello Digital Design And Development
You can put this line in heading which makes it easy to read other than that every thing seems good.
<p>This is Josmi speaking.</p>
i went through the assignment A everything looks fine.