13 Matching Annotations
  1. Nov 2022
    1. <header > <div class="header-div"><a href="index.html"><img src="/images/logo.webp" width="150" height="120" alt="LOGO"></a></div> <div class="header-div"> <ul> <li><a class="hovera" href="index.html">Home</a></li> <li><a class="hovera" href="news.html">News</a></li> <li><a class="hovera" href="store.html">Store</a> </li> <li><a class="hovera" href="gallery.html">Gallery</a></li> <li><a class="hovera" href="courses.html">Courses</a></li> <li><a class="hovera" href="contact.html">Contact</a></li> </ul> </div> </header> <h1>Welcome to Glass Expressions!</h1> <div class="main"> <div class="main-div"> <p class="main-text">Glass Expressions is proudly veteran owned and the "go to" place for glass working tools and supplies on Northern Vancouver Island. The store is located in the beautiful Comox Valley, British Columbia, Canada, home of the prestigious Filberg Festival of the Arts.</p> <p class="main-text">Brenda has been owner and operator for sixteen years now....Time flies when you're having fun!! She and her sister Donna work together to provide the exceptional customer care that Glass Expressions is known for.</p> <p class="main-text"> If you are close to our store please feel free to drop in and talk with us.​</p> <p class="main-text">Jan Lindstrom's gallery and studio, Jan's Glass by the Sea, is open right across the street. Jan gladly accepts custom glass art orders or she will teach you the skills to create your own.</p> </div> <div class="main-div"> <img class="img" src="/images/img6.webp" alt="images of glass work" width="500"> </div> <div class="main-div"> <img class="img1" src="/images/img7.webp" alt="images of glass work" width="500"> <img class="img1" src="/images/img8.webp" alt="images of glass work" width="500"> </div> </div> <!--shoptimings--> <div class="main2"> <div class="shoptimings"> <p class="shop-opentext">The shop is OPEN: <br>Tuesday to Saturday, 10a to 2p <br><br> The shop is CLOSED:<br> Sundays, Mondays, all Statutory Holidays <br>AND all Tuesdays after a holiday Monday.</p> </div> <div class="shoptimings"> <img class="images" src="/images/img1.webp" alt="images of store" width="490"> <img class="images" src="/images/img2.webp" alt="images of store" width="490"> </div> <div class="shoptimings"> <img class="images" src="/images/img3.webp" alt="images of store" width="500"> <img class="images" src="/images/img4.webp" alt="images of store" width="500"> </div> </div> <br> <!--latest projects--> <p class="latestp">Our Latest projects includes:</p> <div class="mainlpi"> <div class="lpi"> <img src="/images/img9.webp" alt="Latest projects images"> <img src="/images/img10.webp" alt="Latest projects images"> <img src="/images/img11.webp" alt="Latest projects images"> </div> <div class="lpi"> <img src="/images/img12.webp" alt="Latest projects images"> <img src="/images/img13.webp" alt="Latest projects images"> <img src="/images/img14.webp" alt="Latest projects images"> </div> <div class="lpi"> <img src="/images/img15.webp" alt="Latest projects images"> <img src="/images/img16.webp" alt="Latest projects images"> <img src="/images/img17.webp" alt="Latest projects images"> </div> </div> <!--footer--> <div class="footermain"> <div class="column"> <p class="footerheading">About us:</p> <p>-High quality Glass Working Tools and Supplies.</p> <img class="fimg" src="/images/BuyAchetonsVeteranCA_colour.webp" alt="VeteranCA image"> </div> <div class="column"> <p class="footerheading">Services:</p> <p>- Glassworking tools & Supplies<br> - Stained glass repairs<br> - Stained glass artworka</p> </div> <div class="column"> <p class="footerheading">Store hours:</p> <p><a href="tel:+2503397739">+ (250) 339-7739</a><br> -2925 Comox Road<br> -Courtenay, B.C. <br> -Tuesday to Saturday,10:00a to 2:00p</p> </div> </div>

      I did not mention the changes that I made here in the code. But, I have uploaded all that in the brighspace assignment part. Maybe Claire guiot will only be able to see it.

    2. /images/logo.webp

      I have made an images folder and have put all the images into it but my folder does not in the folder. It shows me a sequence of images.

    1. <div class="evaluation"> <a id="communicate-2"></a> <h3><em>Problem: </em>These webpages don’t have appropriate headings. For example, there is no h1 in “Home” webpage.</h3> <figure> <img src="images/Home.PNG" alt="Home page of Ascent Physiotherapy"> <figcaption>There is no h1 tag. </figcaption> </figure> <h3><em>Solution: </em>Put appropriate headings on each page.</h3> </div> <div class="evaluation"> <a id="communicate-3"></a> <h3><em>Problem: </em><br> There are some difficult words and long sentences in some webpages.</h3> <p>In “Products & Services” page, although there are links to explain the difficult words, but not all words have links.</p> <p>In “Our team” page, some long sentences make users give up reading.</p> <figure> <img src="images/Products&Services.PNG" alt="Difficult_words in Ascent Physiotherapy"> <figcaption>For example, TMJ is an abbreviation. </figcaption> </figure> <figure> <img src="images/Our_team.PNG" alt="Long sentences in Our team page"> <figcaption>For example, TMJ is an abbreviation. </figcaption> </figure>

      looks and nice and you have mentioned nicely

    2. <h2>Write to communicate</h2> <div class="evaluation"> <a id="communicate-1"></a> <h3><em>Problem: </em>Each content is not grouped into blocks, so it’s not easy for users to understand what the clinic to want to do</h3> <figure> <img src="images/Contact_us.png" alt="Contact us page of Ascent Physiotherapy"> <figcaption>There is no grouped blocks. </figcaption> </figure> <h3><em>Solution: </em>Group information into blocks to understand the contents easily.</h3> </div>

      nicely mentioned throughout

    1. <article class="card">

      most of the time I use the "Div" tag instead of "article". I feel it gets easy to work with "Divs". "article " is not the issue still

    2. <article class="card"> <h2>Is there good visual hierarchy?</h2> <h3>The larger font size is not used for the heading</h3> <p>The largest font size should be for headings but on this page the prices are larger. I would use larger fonts for headings which helps give the user an idea of what is important</p> <h3>The most noticeable areas are not the most important.</h3> <p>When the squint test is done the elements that are visible should be the areas that the designer wants the user to focus on. When doing a squint test on these pages, the header stands out the most and not the content, so I would group more important content into blocks and place them under headings.</p> </article> <article class="card"> <h2>Are the styles right?</h2> <h3>There are too many sizes of font.</h3> The recommended number of font sizes is three, the body text and two levels of headings. This website has several different font styles and sizes, on the reservations page alone there are six. I would definitely reduce the number of styles and sizes used to give a simpler, more attractive page. <figure> <img src="images/ScreenshotReservationsStyles.jpg"> <figcaption>Fig.3 - Screenshot of Reservations showing different font styles and sizes</figcaption> </figure> <h3>The most noticeable areas are not the most important.</h3> When the squint test is done the elements that are visible should be the areas that the designer wants the user to focus on. When doing a squint test on these pages, the header stands out the most and not the content, so I would group more important content into blocks and place them under headings. </article>

      explained nicely and the code looks nice

    1. <header> <img src="images/dgl-logo.png" alt="DGL Logo" width="75" /> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="services.html">Services</a></li> <li><a href="services.html">Portfolio</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <main> <article> <div class="first-panel"> <h1>Lorem ipsum dolor sit amet</h1> <div class="topwrapper"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac diam dui. Sed ultricies dui erat, in tristique augue imperdiet id. Aenean varius in metus nec aliquam. Morbi nec sapien efficitur, semper quam vel, cursus erat. Phasellus odio neque, condimentum at purus a, fringilla euismod ante. Curabitur id neque ultrices, ornare nunc ac, pellentesque lectus. Morbi bibendum quam velit, ut iaculis nibh varius ac. In sit amet gravida turpis. Aliquam vel leo ut purus feugiat viverra sit amet vitae tellus. Mauris leo massa, pulvinar sit amet sem vitae, eleifend maximus lectus. Pellentesque non orci non sapien maximus finibus eu id ligula. Mauris tincidunt dui et arcu feugiat eleifend. Pellentesque eu sodales augue. Etiam eu dignissim eros. Maecenas erat risus, scelerisque sed malesuada vel, consequat in turpis. Aliquam ultrices porttitor sollicitudin. </p> <button>Find out how we can help you</button> </div> <!--end div for content in first panel--> <div> <img class="topwrapper" src="images/distance-and-inclass-students.png" alt="Students in face-to-face and onine class" /> </div> <!--end div for image in first panel--> </div> </article> <!--end of first panel--> <article> <!--start of second panel--> <div class="second-panel"> <h2>Check out our recent projects</h2> <div class="wrapper"> <button class="square"></button> <h2>Aliquam vel leo ut purus</h2> <p> Aliquam vel leo ut purus feugiat viverra sit amet vitae tellus. Mauris leo massa, pulvinar sit amet sem vitae, eleifend maximus lectus. Pellentesque non orci non sapien maximus finibus eu id ligula. Mauris tincidunt dui et arcu feugiat eleifend. Pellentesque eu sodales augue. Etiam eu dignissim eros. Maecenas erat risus, scelerisque sed malesuada vel, consequat in turpis. Aliquam ultrices porttitor sollicitudin. </p> <button>Learn More</button> </div> <div class="wrapper"> <button class="square"></button> <h2>Aliquam vel leo ut purus</h2> <p> Aliquam vel leo ut purus feugiat viverra sit amet vitae tellus. Mauris leo massa, pulvinar sit amet sem vitae, eleifend maximus lectus. Pellentesque non orci non sapien maximus finibus eu id ligula. Mauris tincidunt dui et arcu feugiat eleifend. Pellentesque eu sodales augue. Etiam eu dignissim eros. Maecenas erat risus, scelerisque sed malesuada vel, consequat in turpis. Aliquam ultrices porttitor sollicitudin. </p> <button>Learn More</button> </div> <div class="wrapper"> <button class="square"></button> <h2>Aliquam vel leo ut purus</h2> <p> Aliquam vel leo ut purus feugiat viverra sit amet vitae tellus. Mauris leo massa, pulvinar sit amet sem vitae, eleifend maximus lectus. Pellentesque non orci non sapien maximus finibus eu id ligula. Mauris tincidunt dui et arcu feugiat eleifend. Pellentesque eu sodales augue. Etiam eu dignissim eros. Maecenas erat risus, scelerisque sed malesuada vel, consequat in turpis. Aliquam ultrices porttitor sollicitudin. </p> <button>Learn More</button> </div> </div> <!--close div of second panel--> </article> <!--end of second panel--> <article> <!--start of third panel--> <div class="third-panel"> <div class="wrapper"> <h3>Latest News</h3> <h4>October 1:</h4> <p>In sit amet gravida turpis.</p> <h4>September 15th:</h4> <p>In sit amet gravida turpis.</p> <h4>September 10th:</h4> <p>In sit amet gravida turpis.</p> </div> <div class="wrapper"> <h3>About Us</h3> <p> In sit amet gravida turpis. Aliquam vel leo ut purus feugiat viverra sit amet vitae tellus. Mauris leo massa, pulvinar sit amet sem vitae, eleifend maximus lectus. Pellentesque non orci non sapien maximus finibus eu id ligula. Mauris tincidunt dui et arcu feugiat eleifend. Pellentesque eu sodales augue. Etiam eu dignissim eros. Maecenas erat risus, scelerisque sed malesuada vel, consequat in turpis. Aliquam ultrices porttitor sollicitudin. </p> <button>Get in touch</button> </div> <div class="wrapper"> <h3>Follow Us</h3> <ul> <li>Facebook</li> <li>Instagram</li> <li>YouTube</li> </ul> </div> </div> <!--close div for third panel--> </article> <!--end of third panel--> </main> <footer> <small >Copyright &copy; 2022 All Rights Reserved North Island College Digital Design and Development</small > </footer>

      rest of the code looks really nice

    2. <button>Find out how we can help you</button>

      I got that you gave style to the button directly in your CSS. But it may be tricky sometimes when dealing with bit complex things. So, I prefer using "class".

  2. Oct 2022
    1. <article class="card-one"> <img src="images/claireguiot.jpeg" width="80" alt="Claire Guiot" /> <h2>Claire Guiot</h2> <p> Faculty, DIGITAL Design + Development <br /> North Island College </p> </article> <article class="card-two"> <h2>Top facts about Elephants</h2> <p>Ten incredible facts that will blow your mind</p> </article> <article class="card-three"> <p class="logo">SILKTRICKY</p> <div class="text-container"> <p class="question">What is SilkTricky?</p> <h2>A NEW KIND OF BEAST</h2> </div> <div class="button-wrapper"> <!-- example video link, just cause i wanted to make the button functional --> <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Watch Video</a> </div> <div class="dot-container"> <span class="dot active"></span> <span class="dot"></span> <span class="dot"></span> </div> </article> <article class="card-four"> <!-- image from Ben Garratt on Unsplash --> <img src="images/covidlatest.jpeg" alt="London Underground COVID warning" width="370" /> <div class="tags"> <span class="live">Live</span> <span class="breaking">Breaking</span> <span class="country">UK</span> </div> <h2> 'Plan C' rumours grow;<br /> Downing Street Christmas<br /> party cancelled; warning<br /> Scotland's R number<br /> could rise above 2 | COVID<br /> latest </h2> </article>

      it looks nicely managed

    1. <h1>Our Services</h1> <p> Below is a list of services we proudly offer. 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 CERTIFIED GREEN CIRCLE SALON 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. </p> <h2>Cuts</h2> <p>Range from 45 minutes to 90 minutes</p> <p> Please call us at <a href="tel:250-338-7467">250-338-7467</a> (PINS) to book a shorter appointment for Kid's Cuts, Dry Cuts, Fringe Trims, Neck trims, or Clipper Cut maintenance. </p> <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 THICK THICK Hair, you know who are :)</li> <li>All cuts include shampoo, scalp massage, blowdry, and style</li> </ul> <h2>Colours</h2> <ul> <li>FULL FOIL: $188/$219 with cut</li> <li>3/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> </ul> <h2>Styling</h2> <ul> <li>BLOWOUTS ~ 30 mins: $40 - $45</li> <li>BLOWOUTS ~ 45 mins: $47 - $52</li> <li>BLOWOUTS ~ 1 hour: $60 - $67</li> </ul> <h3>* * 48 Hour Cancellation Required * *</h3> <p> We require 48 hours' notice for any cancellations. If you are a “no show”, you will be required to pay for your missed service in full in order to rebook. If you cancel with less than 48 hours' notice, you will be required to pay for 1/2 of the service you canceled in order to rebook. We understand that last-minute things happen! We will address each situation on a case-by-case basis. Please communicate with us and we will try our best to help. We appreciate your understanding. </p> <p> <a href="contact.html">Contact us today to book an appointment!</a> </p>

      nicely done

    1. <h1> Our Services </h1> Below is a list of services we proudly offer. <p> 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.<br> We are proud to be a CERTIFIED GREEN CIRCLE SALON 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.</p> Cuts Range from 45 minutes to 90 minutes<br> Please call us at 250-338-7467 (PINS) to book a shorter appointment for Kid's Cuts, Dry Cuts, Fringe Trims, Neck trims, or Clipper Cut maintenance.<br> <ul type="bullets"> <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 THICK THICK Hair, you know who are :)</li> <li>All cuts include shampoo, scalp massage, blowdry, and style</li> </ul> <ul type="none"> Colours <li>FULL FOIL: $188/$219 with cut</li> <li>3/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> </ul> <ul type="none"> Styling <li>BLOWOUTS ~ 30 mins: $40 - $45</li> <li>BLOWOUTS ~ 45 mins: $47 - $52</li> <li>BLOWOUTS ~ 1 hour: $60 - $67</li>

      You can use classes into 'li' to add a line after every 'li' which was asked in the assignment as a seperator

    1. <ul type="square"> If you're looking to make an appointment online, please do so here. <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> <h2>Hairpins Boutique Salon</h2> #4 - 224 6th Street<br> Courtenay, BC V9N 1M1<br> Check us out on Google Maps <a href="http://www.cariboucreative.ca/">http://www.cariboucreative.ca/</a><br> Tel: (250) 338-7467 (add telephone link)<br> Email: <a href="salon.hairpins@gmail.com">salon.hairpins@gmail.com</a> Contact us today to book an appointment!<a href="https://www.hairpins.ca/contact">https://www.hairpins.ca/contact</a></footer>

      You can use div tag as well