London Class 8 - Delroy Gayle - HTML/CSS - Week 3 #274

DelroyGayle · 2021-12-04T08:54:19Z

Done!

What did you find easy?
Cannot say that I found any of it easy.
What did you find hard?
Wrapping my head around the concept of CSS Grids. I kept having to restart & rethink whilst I was coding. Because it became apparent that I had misunderstood the concept.
What do you still not understand?
GITHUB!!! I even struggled to submit my work. I cannot even tell what I did now correctly in order to submit? Beforehand Github kept saying there was nothing to compare.
Any other notes?
Are there any good online tutorials regarding CSS Grids?

Done!

LucyMac

A good start @DelroyGayle, and really not as bad as you let on :)
BUT you didn't use CSS Grid! Please re-work your 4-image section to use grid - see my comments below.
Nice work using some JS in there 👍

LucyMac · 2021-12-06T19:27:36Z

index.html

+    <section class="homepage-container">
+        <section class="hero-box">
+                <section class="hero-flexbox">


What happened to using <header>, <main> and <footer>? Please edit your HTML to use a semantic structure.
Having sections inside main is good to split the main part of the page into logical blocks, but these must all live inside the main tag

LucyMac · 2021-12-06T19:29:51Z

index.html

+                                <div class="hamitems">
+                                    <a href="#">HOME</a>
+                                    <a href="#">CAKES</a>
+                                    <a href="#">ORDERING</a>
+                                    <a href="#">LESSONS</a>
+                                    <a href="#">ABOUT US</a>
+                                </div>


Nice mobile nav 👍

Please use <ul> and <li> tags for lists of items like this. You've done this really well for the desktop version of the nav - this should be no different.

Can you use CSS to make this mobile nav lay on top of the homepage content, rather than pushing everything down when it's open?

LucyMac · 2021-12-06T19:30:09Z

index.html

+                        <!-- <section class="desktop-heading">
+                            <h1 class="mainheading2">ASTERISK ET OBELIX<br/>CAKES!</h1>
+                           <br/>
+                           <div class="thequote2">
+                               <p><em>We Just Do Great Cakes!<br/><br/>The best cakes in town delivered to your door</em></p>
+                           </div>
+                        </section> -->


There's a lot of commented out code in here. Avoid this.
Comments to explain something or make a mental note is fine - but not commenting out actual code that you've decided not to use.

LucyMac · 2021-12-06T19:35:34Z

index.html

+                <p class="mobile-prompt">
+                    We make all types of same-day cakes from Cupcakes,
+                    </br>Celebration Cakes, Birthday Cakes, Chocolate cakes,
+                    </br>Novelty cakes, Bespoke cakes and even same-day Wedding Cakes.
+                    <br/><br/>If you can dream of it we can make it.<br/><br/>
+
+                     <!-- &#8595; is the symbol for a down-pointing arrow-->
+                    &#8595;Hover over the images below for more information&#8595;
+                </p>
+
+                <p class="tablet-prompt">
+                    We make all types of same-day cakes from
+                    </br> Cupcakes, Celebration Cakes, Birthday Cakes,
+                    </br> Chocolate cakes, Novelty cakes, Bespoke cakes and even same-day Wedding Cakes.
+                    <br/><br/>If you can dream of it we can make it.<br/><br/>
+
+                    Hover over the image to the left and the images below for more information
+                </p>
+
+                <p class="desktop-prompt">
+                    We make all types of same-day cakes
+                    </br> from Cupcakes, Celebration Cakes,
+                    </br> Birthday Cakes, Chocolate cakes, Novelty cakes, Bespoke cakes
+                    </br> and even same-day Wedding Cakes.
+                    <br/><br/>If you can dream of it we can make it.<br/><br/>
+
+                    Hover over the image to the left and the images below for more information
+                </p>
+


Why are you repeating all this content 3 times here? You only need it once. If you need to adapt the styling for each device, use media queries to change the style.

Secondly, do not use <br> to force the content onto the next line. Remove all the brs and let the content flow naturally and adapt to the space it has on each screen size.

LucyMac · 2021-12-06T19:38:57Z

index.html

+                <section class="ColumnFlexBox">
+
+                    <section class="RowFlexBox">
+
+                         <figure class="hoverwrap">
+                                <img id="close" src="img/cheesecakeHW3.jpg" class="display-a-cake" alt="A Cheese Cake">
+                                <!-- THE HOVER TEXT: -->
+                                <div class="hovercap">Our collection includes cakes that also make for delectable desserts, such as our elegant,
+                                                   creamy Strawberry Summer Cheesecake and Apricot Cheesecake
+                                </div>
+                        </figure>
+
+                        <figure class="hoverwrap">
+                            <img src="img/chocolate-cakeHW3.png" class="display-a-cake" alt="A Chocolate Cake">
+                            <!-- THE HOVER TEXT: -->
+                            <div class="hovercap">We are a little health-conscious and like to make sure our cakes are irresistibly delicious
+                                                   without using too much fat and sugar "just as much as needed to make something delicious". 
+                            </div>
+                        </figure>   
+                    </section>


You do not need to group your images 2 by 2 here. Put them all in the same container, and then use CSS Grid to align the items 2 by 2 on mobile, and then all in a row on larger screens. It's be much cleaner and neater HTML, with just one parent and 4 child items, and your CSS should be more straight forward as well.

LucyMac · 2021-12-07T10:14:46Z

style.css

+
+
+/* TABLET: */
+@media screen and (min-width: 481px) {


I'd start tablet at a larger size - somewhere between 600px and 800px

LucyMac · 2021-12-07T10:17:03Z

style.css

+/* THE GRIDS AND MEDIA QUERIES START HERE */
+
+.homepage-container {
+    width: 320px;


I wouldn't set a width on your page like this. Perhaps a min-width in this case?
It needs to fill the space if the phone is 450px wide for example, which a min-width will allow it to do.

LucyMac · 2021-12-07T10:17:51Z

style.css

+            display: grid;
+            grid-template-columns: repeat(4, 1fr);


You don't need to repeat the rules that haven't changed from the mobile version. Only over-write those which have changed.

LucyMac · 2021-12-07T10:18:42Z

style.css

+          }
+
+          .thequote {
+            font-size:300%;


Prefer rem units for font-size.

LucyMac · 2021-12-07T10:34:09Z

style.css

+      .mainheading{
+          font-size:400%;
+          text-align:right;
+          margin-left:12em;


This huge margin is breaking your layout - remove it.
You shouldn't need it - something like setting the header to flex and using space-between should naturally keep the logo to the left and the heading to the right.

Fixed all the issues with the mobile version of the homework. I did write a version which used a grid for the four images putting them all in the same container, one parent and 4 child items. However I could not get the hovertext and size of each image to work properly when using the grid version. It worked fine using a flex within a flex so I have continued with that version. I do not have the expertise to work out how to get the images to size properly when using a grid for the four images.

Homework week 3

a5238b2

Done!

LucyMac added the LDN-8 London class #8 (start Nov 2021) label Dec 4, 2021

LucyMac reviewed Dec 6, 2021

View reviewed changes

LucyMac added the reviewed A mentor has reviewed this PR label Dec 6, 2021

LucyMac reviewed Dec 7, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

London Class 8 - Delroy Gayle - HTML/CSS - Week 3 #274

London Class 8 - Delroy Gayle - HTML/CSS - Week 3 #274

Uh oh!

DelroyGayle commented Dec 4, 2021

Uh oh!

LucyMac left a comment

Uh oh!

LucyMac Dec 6, 2021 •

edited

Loading

Uh oh!

LucyMac Dec 6, 2021 •

edited

Loading

Uh oh!

LucyMac Dec 6, 2021

Uh oh!

LucyMac Dec 6, 2021

Uh oh!

LucyMac Dec 6, 2021

Uh oh!

LucyMac Dec 7, 2021

Uh oh!

LucyMac Dec 7, 2021

Uh oh!

LucyMac Dec 7, 2021

Uh oh!

LucyMac Dec 7, 2021

Uh oh!

LucyMac Dec 7, 2021

Uh oh!

Uh oh!

Uh oh!

London Class 8 - Delroy Gayle - HTML/CSS - Week 3 #274

Are you sure you want to change the base?

London Class 8 - Delroy Gayle - HTML/CSS - Week 3 #274

Uh oh!

Conversation

DelroyGayle commented Dec 4, 2021

Uh oh!

LucyMac left a comment

Choose a reason for hiding this comment

Uh oh!

LucyMac Dec 6, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LucyMac Dec 6, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

LucyMac Dec 6, 2021 •

edited

Loading

LucyMac Dec 6, 2021 •

edited

Loading