Responsive landing page with HTML and CSS using Bootstrap

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi HaYeong, good job completing this website layout! 🙂 I'll try to answer some of your questions:

  1. About the triangle, I used a pseudo element in my solution, like this:

     nav::before {
         content: "";
         margin-left: auto;
         position: relative;
         top: -1.5rem;
         border-width: 0 0 1.5rem 1.5rem;
         border-style: solid;
         border-color: var(--clr-white) transparent;
         display: block;
         width: 0;
       }
     

  2. About the styles being gone when setting a larger font size, are you referring to going from mobile to desktop view and having the styles overwritten? I tried checking out your code to see where the media queries are, but I couldn't find any; I just see that you have a separate mobile and desktop stylesheet. In any case, I think as long as you specify the desktop styles in the media query (or mobile styles if you had a desktop-first approach), then that should be OK.

  3. About paddings and margins, I notice you have a fairly large padding in the hero section! I generally don't suggest using large paddings as that could produce issues at smaller breakpoints. For me, I used responsive width properties instead to keep the content centered with enough space around the text.

  Feel free to check out my solution here: https://www.frontendmentor.io/solutions/responsive-landing-page-with-cube-css-zJrpzUIQqd

  Marked as helpful

  1

  ---

  

  HaYeong•100

  @hypyeonPosted about 2 years ago

  @elaineleung Thank you so much for taking your time to review my solution! :) I checked your solution & code, it looks amazing. There are so many issues that appear on the report for my solution, here I was thinking I did a great job and invested a long time on this, after seeing the result I lost about 50% of my confidence, lol. But I am proud that I finished this challenge, even though I had many moments where I wanted to quit. Thanks again for your feedbacks, I hope I get better at it soon. I'm off to review your code & solve a new challenge. Cheers!

  1

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @hypyeon Hey HaYeong, no worries, we've all been there, which is why it's important to keep supporting and encouraging one another 🙂. I've made sooo many mistakes before, but these mistakes also help me learn, and every time I see myself improve a bit more, I have a bit more motivation to keep going.

  I had a look at your report just now, and a lot of them look like they're issues due to a repeated id, and this is really easy to fix; I'd probably just look for all the id attributes and then delete them and just change the id to a class instead. Basically, id can only appear in one element in your HTML, and if they appear in more than one element, you'd have a problem because the browser wouldn't know which one to pick out if it needs to pick out one. For instance, if you had id="client-position" on an element, you can't use client-position as an id for another element.

  Generally when you use an id, you may want to see what you are using it for. If it's for CSS, I recommend using classes instead. Personally I don't normally use id unless I need to use it for Javascript because sometimes it's hard to keep track of id, and it's much easier to be consistent in using classes for styling.

  Anyway, I hope to keep encouraging you, and I believe you'd get there one day, so do keep going!

  Marked as helpful

  0