Skip to content
OverviewSolutions
9
Comments
9

Muhammad Waleed Ahmed

@WDWaleedPakistan270 points

Hi there! I'm a Frontend Web Developer, proficient in HTML, CSS, JS, React, and TailwindCSS. Right now, I'm in the exciting phase of whipping up some extraordinary projects, all destined for my upcoming Portfolio Website😁 Open to collaborations and team projects.

Latest solutions

View more solutions

Latest comments

  • Muhammad Waleed Ahmed•270
    @WDWaleed

    You could take this approach to read inputs:

    Add an onchange event listener to the input fields which will read the value every time it changes. You can read about this event listener in the MDN web docs

    Marked as helpful
  • Muhammad Waleed Ahmed•270
    @WDWaleed

    Hi there. For images, you should directly specify them in the src attribute of the img tag but for background images you can configure the tailwind config file by extending the theme:

    theme: {
      extend: {
          backgroundImage: {
                TheImg: "url('/images/the-img.png')"
          }
      }
}

    After this, you can use it in your classes like this:

    class="bg-TheImg"

    I hope this helps, but if not then let me know and I'll look for a different approach.

    If you like, here is a real-world example from one of my projects but I use ReactJS so it has a different setup. Just note the extended theme in the tailwind config:

    /** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      screens: {
        custom: "750px",
      },
      colors: {
        Cyan: "hsl(176, 68%, 64%)",
        Blue: "hsl(198, 60%, 50%)",
        LightRed: "hsl(0, 100%, 63%)",
        IntroBack: "hsl(217, 28%, 15%)",
        MainBack: "hsl(218, 28%, 13%)",
        Footer: "hsl(216, 53%, 9%)",
        TestimonialsBack: "hsl(219, 30%, 18%)",
      },
      backgroundImage: {
        Intro: "url('/images/illustration-intro.png')",
        CurvyDesktop: "url('/images/bg-curvy-desktop.svg')",
        CurvyMobile: "url('/images/bg-curvy-mobile.svg')",
        ProductiveIllustration:
          "url('/images/illustration-stay-productive.png')",
        Arrow: "url('/images/icon-arrow.svg')",
        Quotes: "url('/images/bg-quotes.png')",
      },
      fontFamily: {
        Raleway: ["Raleway", "sans-serif"],
        OpenSans: ["'Open Sans'", "sans-serif"],
      },
    },
  },
  plugins: [],
};
  • Muhammad Waleed Ahmed•270
    @WDWaleed

    Hi there!

    I see that you're most concerned about the positioning of elements. Well here are some tips that I believe will be handy: You can center the entire card like this:

    body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    One huge mistake that you've made is by not setting every element's box sizing to border-box. You should do this:

    *, *::before, *::after {
    box-sizing: border-box;
}

/* The * is used to select every element */

    You also said that you couldn't position the elements properly. There is a very simple solution to your problem. Instead of using positioning, you should use padding and margins. for your .benefits-section and your button, instead of positioning, use margins and padding. Something like this:

    .benefits-section {
   margin: 1rem auto;
   /* Maybe some padding here if needed */
}

button {
   max-width: 250px; 
   margin: 1rem auto; 
   /* Specifying an explicit width and then setting the left and right margins
        to auto allows you to automatically center an element. The 1rem is for 
        top and bottom margins.*/
}

    You can tweak the above values as you prefer.

    All in all, I think all your problems with positioning the elements can be solved using margins and padding. You don't need to use positioning because it makes the code complicated and difficult to understand. I hope I could help and If you have any other questions, don't hesitate to ask.

    Marked as helpful
  • Muhammad Waleed Ahmed•270
    @WDWaleed

    For validation, I create a function that is executed when the form is submitted.

    It will set the display of the error message to block if the input is invalid else it shows the success message

    Marked as helpful
  • Muhammad Waleed Ahmed•270
    @WDWaleed

    Nice!

    Since you're looking for feedback, here it is.

    1. Set the font the same as given in the style guide.
    2. Set a background to the body as given in the design.
    3. Use the following code to center the form to the page:
    body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
    Marked as helpful
  • Muhammad Waleed Ahmed•270
    @WDWaleed

    Perfect!

    I have one suggestion that would make it look just a little better. It's subtle but it does have a nice effect:

    box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.2);

    Also change the width of the container to 375px:

    max-width: 375px;
View more comments