LoopStudio

Community feedback

• 

  P

  webdevbynight•530

  @webdevbynight

  Posted 3 months ago

  Some feedback:

  • your HTML code is invalid according to the markup validator;
  • you should better organise your projects, grouping your stylesheets into a folder;
  • when translating a design into code, the result should be as close to the original design as possible and your solution is not close to the design in some aspects:
    • the “See all” button does not match the button in the design (all sides should have a border),
    • each card does not have a transparency gradient when hovered,
    • the colour of the copyright text in the footer does not match the colour used by the design;
  • some classes should be refactored: for example, to declare that the whole menu uses the Alata font, you should just select the selector .nav__links (this would help you maintain your stylesheets in an easier way, avoiding useless repetitions);
  • you should learn more about semantics in HTML:
    • you put the header in a nav element, while such a header should be within a header element, the purpose of the nav element being to structure a navigation menu (and only a navigation menu, even if such a menu is within a header);
    • the logo should be within a h1 element, while the “Immersive experiences that deliver” text should be treated like a paragraph;
    • the “See all” button is, in fact, a link, and should be marked up as an a element instead of the button one;
    • each card should be treated like a link and, therefore, the p element could be replaced by an a element;
  • the image of each card should be inserted as an img element, not as a background image in CSS: even if these images are decorative, they can often be changed and using img in such a context should make maintenance easier (in other words, think of the people who will manage the contents of the website and will want to add, update or delete some creations and their images: they should be able to do that without having to know how to deal with your stylesheets);
  • concerning the problem you are facing and for which you ask for help, the problem is the use of opacity, which applies not only to the background, but also to the contents and the children of the element concerned (see MDN): therefore, a better way is to use a background colour with an alpha channel or a background with a gradient if there is a gradient (you can have a look at my solution to have an idea of that);
  • if you want to challenge yourself, try to use CSS without using a framework such as Bootstrap.

  I hope this feedback helps you.

  00