}
it'll be great if you provide some comments for the better understanding of the code.
34 Matching Annotations
- Nov 2022
-
github.com github.com
-
-
.hero > h1
it can be formatted as " .hero h1", Most developers use this format. it'll be great for the other developer if you use this format .
-
-
github.com github.com
-
<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>
i think it'll be good to have more content here, so that we as the team members review the code and can provide some valuable feedback.
-
<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>
you can use the "main" tag here for the web content. It'll be good to have both header and footer too.
-
"Jims Clothes Closet
it's good to provide the link of the website in href, so that anyone can acess the website you are analysing.
-
<h1>Assignment E</h1>
You can use this h1 tag in header section.
-
-
github.com github.com
-
nav ul li{ list-style-type: none; float: left; }
As aran said, the code looks incomplete, make sure you commit the code in the git regularly.
-
nav img{ width: 100px; margin-top: 20px; }
you can add comments for better readibility to the code.
-
-
github.com github.com
-
<h3>About Us</h3> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ipsam dolor incidunt nam, sint similique laborum repellat ex recusandae voluptate laudantium cupiditate ut ad ipsum minus magnam asperiores cum delectus odit hic. Maiores veritatis suscipit inventore, quo reiciendis harum eius.</p> <button>Get in touch</button> </div>
you can refer the last week content in the brightspace for how to make this footer as like in 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>
In order to create the container as article, you can refer the assignment C. It's the same flow we follow while creaating this articles block.
-
<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>
If you are unable to get right position of the block, you can refer the videos from "Week 8 --> page Layout Basic --> Float property".
-
</footer>
The copy right footer is missing. You can check the given refference image.
-
-
github.com github.com
-
<div class="allcards"> <h2>Check out our recent projects</h2> <article class="cards"> <img src="images/greyscale.jpg" alt="grey image" style="width: 100%; height: 250px" /> <div> <h3>Lorem ipsum dolor sit amet</h3> <p> Lorem ipsum dolor sit amet, consectetur arol adipiscing elit. Nunc eu suscipit lectus. Mauris malesuada dolor ut. </p> <button class="btn2">Learn more</button> </div> </article> <article class="cards"> <img src="images/greyscale.jpg" alt="grey image" style="width: 100%; height: 250px" /> <div> <h3>Lorem ipsum dolor sit amet</h3> <p> Lorem ipsum dolor sit amet, consectetur arol adipiscing elit. Nunc eu suscipit lectus. Mauris malesuada dolor ut. </p>
can add one space line between two different blocks or articles to avoid clumsy in the code for better readibility, apart from that everything looks fine. Good work.
-
-
github.com github.com
-
.footerdiv2 { float: left; width: calc(52% - 130px); margin: 50px 80px 50px 50px; } .btn3 { margin-top: 30px; } .footerdiv3 { width: calc(20% - 80px); float: left; margin: 50px 0px 50px 80px; }
can add one space line between two different properties to avoid clumsy in the code for better readibility, apart from that everything looks fine. Good work.
-
-
github.com github.com
-
<figure> <img src="images/home.png" alt="" width="900" height="500" /> <figcaption> The Home page of the phiarchitecture website. </figcaption> </figure> <figure> <img src="images/About.png" alt="" width="900" height="500" /> <figcaption> The About page of the phiarchitecture website. </figcaption> </figure> <figure> <img src="images/Project.png" alt="" width="900" height="500" /> <figcaption> The Projrct page of the phiarchitecture website. </figcaption> </figure>
It's better to have some space between each tag in order to understand the code easy(i.e., visibility must be good).
-
alt=""
Image alt text is missing
-
class="q1"
it's better to have a meaningful class name.
-
-
github.com github.com
-
html { font-size: 62.5%; }
Comments are missing in the entire code, it's better to have comments.
-
main{ margin-top: 50px; text-align: left;}
It's best to have css code hierarchy like in html.
- html
2.body
3.Header
- main
5.Footer
etc.,
Then it will be very easy to understand the code.
-
{color: #D10062; margin: 20px auto ; font-family: 'Open Sans', sans-serif;} ol{color: #D10062; font-family: 'Open Sans', sans-serif;}
intendation is not good.
-
color: #007780; font-family: 'Roboto Serif', serif;
Intendation is not good.
-
- Oct 2022
-
github.com github.com
-
<a style="color: black" href="contact.html" >Contact us today to book an appointment!</a >
need some better format at different places
-
<a href="index.html" >
Can be intended as together like
<a href ="index.html">
-
-
github.com github.com
-
style="color:rgb(67, 67, 67) ;
you can put this in css file by using class.
-
-
github.com github.com
-
position:relative; top:310px; left: 150px; width:25%;
you can format this as
position
top left widthfont-family etc.,
because those are depends on the position, it would be better for readability for other developers without confusing.
-
margin-top: 50px; margin-bottom: 50px; margin-right: 50px; margin-left: 50px;
You can use
margin: 50px;
like this when all values are equal.
-
-
github.com github.com
-
html { font-size: 62.5%; /*Setting the root font size on all pages to 62.5%*/ }
for better readability you can follow the hierarchy format like
html
header
body
footer
it will be very useful other devellopers.
-
-
github.com github.com
-
<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>
The individual element tags can be formatted as
opening tag
contentclosing tag
for better readability.
-
h1> Welcome to Hairpins Boutique Salon </h1>
you can use <main> element for the middlle content between <header> and <footer> elements
-
-
github.com github.com
-
<a href="index.html" >
The closing tags need to be as one for better readability. Except that everything seems good.
-
</a >
This closing tag can be together for better readability.
-
-
github.com github.com
-
<h1>Assignment b</h1>
Header tag can be used here. ex: <Header><h1>Assignment b</h1></Header>
-
- Sep 2022
-
github.com github.com
-
<h1>Assignment b</h1
i think you forgot to use the header tag.
-
-
github.com github.com
-
This webpage was created by Janelle as part of DGL 103 Class Assignmnent
This one is good but you can use " ©" (copyright symbol) inside the element. i think this line has to be in
element.
-