Responsive product preview using CSS Grid and Flexbox

Community feedback

• 

  KapteynUniverse•2,170

  @KapteynUniversePosted 13 days ago

  I think the problem caused by the naming and paths. Your css folder is uppercased but you used lowercased in the css and html

  Try this

  <link rel="stylesheet" href="./CSS/style.css">

  @import url("/CSS/global/fonts.css");
  @import url("/CSS/global/boilerplate.css");
  

  With these changes i can see your page without an error.

  Also:

  Good job for using picture tag, css variables and uppercase for the "perfume" text instead of hard coded it.

  Wrapping the content with a main landmark (and use others when necessary) is a good practise. Landmarks are essential for accesibility.

  For the <div class="main_Container"> i think you can use article tag aswell.

  Image alt texts needs to be meaningful, unless decorative. So you can leave it empty for the shopping cart icon.

  Don't know if it is a design choice but sticking one type of class naming might be better. They are changing everywhere like; main_Container, container-Left, container-right,

  I still couldn't get used to it but if you are getting hard time naming classes you can use class naming styles like BEM

  Also i recommend a modern css reset or this one

  1

  ---

  

  KapteynUniverse•2,170

  @KapteynUniversePosted 13 days ago

  Oh also like @YacoubDweik said, for static pages like this one you can use Github too. Go settings on the repo, select pages, change branch to the branch you want to use (main) and save. After 30 secs or so it will give you the live link on top of the same page like https://wpittman06.github.io/repo-name/

  1
• 

  Yacoub AlDweik•990

  @YacoubDweikPosted 13 days ago

  Hey!

  Why don't u use GitHub Pages instead?

  1