Skip to content
OverviewSolutions
6
Comments
11
Pierre ||| per.net
@finkenmann

All comments

  • Snehamoy Bagโ€ข600
    @snehamoybagSubmitted almost 2 years ago

    Good Evening Mentors ๐Ÿ™‹โ€โ™‚๏ธ

    Here is my solution to the Insure Landing Page challenge.

    I've used HTML, SASS and Vanilla JavaScript to complete the challenge. The design is pretty simple, so didn't took me long to finish.

    I came across some specificity issues trying to style the anchor tags correclty. And in some places had to use the css :not() psuedo selector to make the style work. ๐Ÿ˜…

    Also this my first project where I build a mobile Hamburger Menu, I tried to make it as accessible as I could and I am happy with the results.

    Didn't use any scroll animation or transition effect on this project, kept it simple.. might add it later when i get some free time ๐Ÿ˜ญ๐Ÿ˜ฌ

    Please let me know your thoughts about this and help me improve ๐Ÿ™‡

    Thankyou in advance โค๏ธ

    Insure Landing Page using HTML SCSS JS

    1
    Pierre ||| per.netโ€ข180
    @finkenmannPosted almost 2 years ago

    Wow! I had so much troubles to find solutions with the background files, placed to the correct container and you did all so well. Your code is the perfect inspiration and answerd all my questions i had. Like the solutions you did between mobile and desktop design. I didnโ€™t came to the clue, to build a .main container around the hero, features and cta section. But afterwards, if I see a good solution, it all looks so easy ;-)

    1
  • Pierre ||| per.netโ€ข180
    @finkenmannSubmitted almost 2 years ago

    This Challenge has been very challenging for me. I have not found a solution how to correctly map the Hero area "Humanizing your insurance" for mobile and desktop. Problem 1: How do I place the containers correctly so that the same code works for mobile and desktop. Problem 2: The white space below the dark background. Do I need another empty container? Problem 3: How to set the background images correctly? One is above the image, the left one is growing to the second page element? I couldn't found a html structure to build this in my project. The transition from two-column to one-column does not work correctly either. What I also have trouble with is writing consistent CSS code. Many elements do not react identically. One time a title has a line, then it doesn't. Once the line is only there in the mobile design, then again not. I wonder if that's how it's supposed to be, or just not consistent designed? Here many questions remain open with me. I hope, by publishing this work, to look at some solutions or to get some help that will bring me further.

    Insure landing page

    1
    Pierre ||| per.netโ€ข180
    @finkenmannPosted almost 2 years ago

    First update: Fixed all report issues.

    0
  • Jero Journade ๐Ÿ’ปโ€ข30
    @ArtoriasDelAbismoSubmitted almost 2 years ago

    Hello everybody! ๐Ÿ‘‹๐Ÿผ Here it is my second proyect! There most be tons of things to improve but i would like to start by asking if anyone can tell me if it is a bad practice to place items with position absolut/relative and then using top/right/left, etc. It kind of feels like cheating, is there a better way? Any other feedback is always welcome. Thank you very much ๐Ÿ’™

    My solution to the Card Component challenge using responsive design

    1
    Pierre ||| per.netโ€ข180
    @finkenmannPosted almost 2 years ago

    Try to avoid pixel specifications in general. Use % to keep your elements dynamic. Your layout won't work below 620px, but should shrink further to display mobile views correctly. Use a max-width to stop growing your container. Or even better width: min(90vw, 800px). More about: https://www.youtube.com/watch?v=U9VF-4euyRo .main is somehow superfluous. Use the main tag for .main-container. Never use fixed heights. If an element needs more space in height, it must be able to grow. Set your img to min-width: 100% and leave out the height. Define the width the image should take in its parent element. .text does not need display flex. The normal behavior of the block elements already does what it should. Add flex only at your mediaquery for the two-column layout. Try to make your design mobile first. There are many sources on the internet that explain this.

    Translated with www.DeepL.com/Translator (free version)

    1
  • MercatorPoeiโ€ข10
    @MercatorPoeiSubmitted almost 2 years ago

    Hello All !,

    I am unsure of the moethod to center the div qrcode, i wait for your review concern this.

    Thanks.

    Css Flex

    1
    Pierre ||| per.netโ€ข180
    @finkenmannPosted almost 2 years ago

    Your code has a few redundant elements. You can specify the centering directly in the body. flex and align-item: center is enough. Your .container doesn't need it anymore. The @media are completely unnecessary in this application. Just define your .qrcode with a width: min(90vw, 375px) and margin-inline: auto. This will center your element horizontally and your align-items in the body will be responsible for the vertical alignment. width:min(90vw, 375) means that depending on the viewport the smaller of the two values is used. On a narrow screen the width will be 90% of the viewport width, but with more space the element will grow to a maximum of 375px (or if you want to go bigger here, of course to a larger value). This way you need very little code and don't have to use unnecessary @mediaqueries.

    Of course you have to pay attention to the warnings of the accessibility report.

    Translated with www.DeepL.com/Translator (free version)

    Marked as helpful
    0
  • Pierre ||| per.netโ€ข180
    @finkenmannPosted almost 2 years ago

    Start with mobile first. That is, design the simple mobile design first and then add the more complex formatting for desktop. If you go the other way, there is often a lot of code that you have to reset. Most of the mobile design is already responsive if you don't use fixed pixel values. Then find the right breakpoint where the design doesn't work properly anymore or "falls apart" and add the more complex flex or grid formatting there. Don't need background images, because they are not readable for screen readers and alt-texts are not possible. Create two images and hide one or the other depending on media-query, or use img srcset. (I have to learn this better... but it is surely the best way).

    .product-component must not have a fixed width. Tip: .product-component: width: min(90vw, 800px); margin-inline: auto. With this you have a nice flowing container, which takes 90vw (viewport width) on a small screen and is centered by margin auto. In addition, the margin grows a bit when you zoom in. At 800px the element doesn't grow any more. With this you can achieve a lot without defining a media query.

    Where do you want to use sr-only? This class is needed if you want to hide something with visibility hidden, but it should remain readable for a screen reader.

    Translated with www.DeepL.com/Translator (free version)

    0
  • Pierre ||| per.netโ€ข180
    @finkenmannPosted almost 2 years ago

    you should check your breakpoints. A lot of mobile devices going down to 320px. At this point your layout is broken. Also the value for the desktop version. Make it bigger or use flexible values for your container and the child elements to be more flexible.

    Marked as helpful
    0
  • ๐—ธ๐—ต๐—ฎ๐—น๐—ถ๐˜€๐—ต๐—ฎ. โ™กโ€ข120
    @stkhalishaSubmitted almost 2 years ago

    Hello!! This is my second project ๐Ÿซฃ

    This project is almost the same as previous project which the product preview card component. I'm quite happy for the result. Let me know which part I should improve, I would love to hear any suggestions from you all and it will means a lot to me!

    Have a good day all. ๐Ÿ˜Š๐Ÿ’˜

    CSS Flex - Stats preview card component

    3
    Pierre ||| per.netโ€ข180
    @finkenmannPosted almost 2 years ago

    I like your approach to implementing responsive behavior. I had to think about how to implement that as well, but came up with a different solution.

    What I like is that you don't make the width before the breakpoint grow even more, which just makes the page fall apart. (That's why I chose my breakpoint earlier, but got other problems ;-) Also nice is the solution for the desktop, where you let the elements grow in height. In real life you could use a higher resolution photo, so that it can grow in size.

    Hmm... let's see if I should rebuild my version. But I'll wait and see if there is any feedback.

    Translated with www.DeepL.com/Translator (free version)

    Marked as helpful
    0
  • Pierre ||| per.netโ€ข180
    @finkenmannPosted almost 2 years ago

    My first tip to solve many problems in your project: Go mobile first. Create the page for the single-column mobile version first and then add @media (min-width: xxxpx) for the customizations for the desktop.

    Give your container a width of e.g. 90vw (viewport width) and margin 5vw (this gives you the same gap on top). This way the container is nicely centered and your content doesn't stick to the edge... and its already responsive, because it grows nicly.

    For the mobile layout you don't need flex at all. Just arrange the block elements one below the other and everything fits.

    For desktop only a little code for flex elements is needed. One for the main elements and one for the stats list.

    My last tip... Make sure that you have a live server running in your working environment, where you can immediately see every change in your code. Use vs code as editor and install the extension live server, if don't use this editor already ;-) . This also helps you to keep track of your work. If you do a lot of work before you look at the result in the browser, debugging is much harder. Use FireFox for development. The responsive preview is better and clearer than Chrome's dev tools (my opinion ;-). I like the responsive preview in FireFox because it shows up without the whole develpment windows, which often use too much room on my screen. But if you need it, you easily can open them. Shortcut is alt ctrl m to open the responsive view.

    Marked as helpful
    0
  • Pierre ||| per.netโ€ข180
    @finkenmannPosted almost 2 years ago

    Do not give your images a fixed height. This will warp them, which is very unattractive. height: auto keeps the correct aspect ratio when zooming in/out. And yes ;-) I see that this correction breaks the layout. But I also made a compromise with my solution here, which I think is ok from my point of view.

    0
  • Gonzalo Palmaโ€ข250
    @Gonzalop0210Submitted almost 2 years ago

    Me genera duda sobre el tamaรฑo porque estoy haciรฉndolo en Laptop lo cual tiene la pantalla mรกs chica

    Sexto Diseรฑo

    2
    Pierre ||| per.netโ€ข180
    @finkenmannPosted almost 2 years ago

    I would give your container a max-width so the layout doesn't grow endlessly and the page falls apart. ... and you forgot the rounded corners ;-)

    0
  • Pierre ||| per.netโ€ข180
    @finkenmannPosted almost 2 years ago

    Nice and minimalistic code. But from my point of view a bit too reduced.

    I miss the responsive behavior for older mobiles down to 320px. On this width the layout doesn't work correctly anymore.

    perfume you shouldโ€™n do with spaces, but with letter-spacing: 0.5.rem.

    From my point of view, the layout is too static, but I don't know if that's intentional.

    I would use mobile first approach. The main code mobile and for bigger screen @media (min-width: xxx).

    In mobile version the image will be squeezed, if you squish the browser, because you defined a height at .main. If you view the page in landscape mode, content will be cut off. Scrolling would be the correct behavior.

    Translated with www.DeepL.com/Translator (free version)

    Marked as helpful
    1