Landing Page Project - Feedback appreciated!

[Kgutierrez92]

Hello! I’m VERY new to coding and have just completed project 3/5 for the first course!
Im looking for some feedback on this page:

FCC landing page

***I’ve also noticed that the page isn’t very mobile friendly? any notes on how to fix that is appreciated.

Open to Constructive Criticism

Thank you in Advanced,
Kenia

[bbsmooth]

@Kgutierrez92

I’ve also noticed that the page isn’t very mobile friendly? any notes on how to fix that is appreciated.

In my opinion (and many others) the best way to make sure your page will look good on any device is to use a narrow-first approach (or mobile-first if you prefer that term better). Narrow your browser as far in as it will go and style the page so it looks good at that narrow width. This will be your default CSS. Do not use any media queries. There should be no horizontal scroll bar. Most likely everything on the page will line up in one tall column.

Once you get it looking good at the narrow width then you can widen your browser until you feel you have enough room to start shifting elements around to take advantage of the horizontal real estate. This is where you will add your media query break point. You will use min-width for the break point and I would highly recommend you use em units instead of px. Then start adding all the CSS styling changes inside the break point to get the page to do what you want. Repeat this process as needed.

You might find you need to add additional <div>s and such to help with styling. That’s perfectly fine (that’s what they are there for). Just make sure that you always go back and check the narrow width to make sure it still looks good.

[rajtanuchakravarty]

Your landing page looks good, but requires some work to make it responsive.
Suggestions
-You should use relative units(em, rem, percentages, vh, vw, vmin, vmax) more than absolute units(px, in, cm, pt, pc).
-Instead of using a background image for section(id=“hero”), you could use an image element with (display: block) inside the container and could give the element(id=‘box’) the position of absolute and the parent container the position of relative. So, the element (id=“box”) stays inside the parent when in absolute position and add off-set to place it according to your needs.

• Your navbar could have used space- between to push the elements to the sides and ul element could use flex to put the children in a row(for PC/laptop screens) and could use column with media query(for mobile screen) to have the responsiveness and same with your element(id=“menu”).
  Good luck.