Skip to content
OverviewSolutions
10
Comments
8

Plinsinga

@codedforfreeNetherlands 🇳🇱310 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest 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
View more comments