Skip to content
OverviewSolutions
4
Comments
4
Shaurya Gautam
@SGautam1108

All comments

  • Aayush Juyal•290
    @aj12-houdiniSubmitted almost 3 years ago

    This project took me a long time to complete and while completing the project I always felt the pressure of trying to complete it within a day or within a few hours. I was wondering if anybody could discuss how long it usually takes them to complete a project like this and do you prepare what you are going code or do you just jump in to start writing code. Feel free to contact me on Twitter: https://twitter.com/redpack457

    Responsive landing page using Bootstrap Grid

    1
    Shaurya Gautam•100
    @SGautam1108Posted almost 3 years ago

    Hi @aj12-houdini. For me, I did this project in 3 days, ofc, with breaks and classes in between. To improve the solution, there are few things I recommend-

    1. Try your solution without Submit button, that is what makes it truly a thinking based challenge
    2. Give more attention to details. E.g. The text used in multiple places appear to be bolder in design so use font-weight property. You can keep the designs provided at your side and use Chrome dev tools to open responsive mode (Ctrl+Shift+M in Windows)
    3. You can use <header>, <footer> and <main> tags inside <body> tag as required by FEM. These are the landmark tags and you must have one. It's best practices. Similarly, with each input you must have a <label> tag instead of <h4> you have used.

    For now, these will help you out to get the basics right! All the best!

    Marked as helpful
    0
  • Shaurya Gautam•100
    @SGautam1108Posted almost 3 years ago

    I suggest going to chrome developer settings and go to responsive mode, and set width to 1440 for laptop and 375 for mobile. Then keep the design provided side by side with your attempt. You will clearly notice what differences are there!! All the best!

    2
  • Shaurya Gautam•100
    @SGautam1108Posted almost 3 years ago

    Hey there, that is a close looking solution and great job. There are a few changes that would actually make it better.

    1. You can add border-radius to your image as well.
    2. Try to compare your design, with help of chrome dev tools and setting the width to 1440px, keeping it side by side to the design image provided. That will help you give a better sense of dimensions and font-sizes being used!
    Marked as helpful
    0
  • Shaurya Gautam•100
    @SGautam1108Submitted almost 3 years ago

    Hey Everyone! I am truly delighted to present my first ever mini project (Apart from those I have done in online courses) after learning basic Frontend!!

    For the questions, here are a few which bugged me throughout the working session-

    1. Should I rely on bootstrap completely for basic styling like justify-content, padding etc. instead of doing it with css?? In my project though, I tried to use bootstrap just for it's structure rather than styling.

    2. Is there a way to have all hover elements (clubbing them) to have same properties as they were being repeated in my code a lot, like transitions, visibility, opacity etc.??

    3. And do advice me based on my current work that how should I further improve in this field if I would have worked in a workplace with teammates, be it naming conventions, or using divs around anchors or any other that comes to your mind.

    4. Also in general which units do you prefer when giving margins, padding when compared to fonts etc for better responsiveness.

    5. For the media query I have set up, as the screen get's smaller it was getting worse to display the card, could you suggest something for it like which properties should I be changing

    6. O ya, another one... (LAST I PROMISE) Can someone help me out with keyboard navigation. I have seen a lot of videos stating that website must be compatible with keyboard, but didn't find any one of great help

    Thanks again!!

    NFT preview card component challenge using Bootstrap

    3
    Shaurya Gautam•100
    @SGautam1108Posted almost 3 years ago

    Thanks alot for the suggestion @Sdann26! Great to see such an active community here ;)

    1