Skip to content
OverviewSolutions
10
Comments
8
Plinsinga
@codedforfree

All comments

  • Plinsinga•310
    @codedforfree

    The background is quite simple if you’re just using two separate shapes. One to be positioned left top en the other one right bottom. Off course you have to play a bit with some negative margin or transforms. But by using to elements it makes it quite easy.

    HTML wise I think this is a really good project to use the BEM writing method for classes. This will make everything easy to write and easier to write your css.

    Keep up the good work and good luck with your next challenges!

  • Plinsinga•310
    @codedforfree

    Good start at using tailwind. With tailwind it’s just a bit getting used to. You would be surprised how easy and logic all classes are. What can help is using a tailwind afdoen for visual studio code. But only if you’re using that as you’re code editor.

    I did this challenge with tailwind only so you can always take a peak 😉.

    Keep it up and looking forward to your next project.

    Marked as helpful
  • Plinsinga•310
    @codedforfree

    Hey Lisa,

    Good try. Indeed you could set Html, body {height:100%} or body {height: 100vh:}. Furthermore, I would read a bit about the picture element. Here.

    Another thing I would do is make the 'perfume' text uppercase and add some letter spacing to it. Next to that, I would check my overall widths a bit better.

    But this is a good start to learning and working on your front-end skills, so keep it up.

    Marked as helpful
  • Plinsinga•310
    @codedforfree

    Looks really awesome again! I like to look at your code I don't really work with angular. Maybe you can only extend your here intro a bit so it really looks pixel perfect ;)

    Furthermore, what do you think about the HTML issues? I got them when I use something like alphine.js Are these really issues or should we ignore these in real projects?

    Last thing. I noticed a z-index issue on your location map. Probably you need to increase the z-index on your navigation to keep it from sliding under your map.

    Curious about your opinions and thanks for keeping me inspired!

    Marked as helpful
  • Plinsinga•310
    @codedforfree

    What do you mean by Having a difficulty making the sidebar full screen? I don't think that's necessary. I should start by aligning your headline. This will free up some space on the right side.

    If you are referring to the mobile nav. This can be made full screen by positioning it to fixed instead of absolute.

    Hope this can help you a bit. Good luck with this and future challenges.

    Marked as helpful
  • Plinsinga•310
    @codedforfree

    Hee @vanderms,

    Looks good. I'm a strong believer in tailwind and was peaking in your solution to make the skill boxes pixel-perfect. In my opinion, the design was just a bit off ;). But what do you think? Would you do this

    <ul class="grid grid-cols-2 gap-6 grid-rows-[22.75rem_11.375rem_9.875rem_11.375rem_11.375rem]
      md:grid-cols-4 md:grid-rows-[11.375rem_9.875rem_11.375rem]
      xl:grid-cols-6 xl:grid-rows-[11.375rem_9.875rem]
      [&>li]:rounded-lg [&_span]:headline-sm [&>li]:text-neutral
      [&>li]:p-6 [&>li]:grid [&>li]:grid-cols-1 [&>li]:content-between [&_img]:justify-self-end
      ">

    in a real-world project? Or would you just make them a logical size? I made them a logical size, but of course only if the designs are only off by a few pixels.

    P.s. Love the way you make use of the new tailwind options for child items!

    Marked as helpful
  • Plinsinga•310
    @codedforfree

    Look pretty good indeed. Some things i would change, besides the points of @DavidMorgade

    First off all when i see your code on github. All html is above the opening body ;). Next to that i would try to turn the images in your card__header into a picture element with srcset and give then. both the same class.

    I would probably also get rid of the card__body div in HTML and in CSS. There is no need to add flexbox to get the content inside this div stacked. This is standard behaviour.

    But some thing are also just a personal preference ;) So keep up the good work and enjoy your projects!

    Marked as helpful
  • Plinsinga•310
    @codedforfree

    I think it looks quite good if you’re new to this. If I where you I would start by using some css variables for some of the basics like the fonts and colors.

    Also take a look at mobile styles. Maybe you can remove the grid styles and set it to block. Now you’re using grid to set a default behaviour.

    Keep up the good work 👍

    Marked as helpful