Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
38
Raja Junaid Farooq
@Raja-Junaid

All comments

  • Saurav50•40
    @Saurav50
    Submitted almost 3 years ago

    html5,css custom properties and flexbox

    2
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hi Saurav! Congratulation on completing this beautiful challenge. Great Job! Welcome to our front-end mentor community. You put so much hard work into your solution. I really like this solution.

    There is 0 HTML ISSUE. And your code is also neat and clean.

    I have some other tips for you to improve your coding skills:

    1- Make your work as decent as possible.

    2- Use comments in your code so this help what's going on.

    3- Make your websites neat and clean.

    4- Use div. main-container for Accessibility in your code.

    5- Also use em and rem in your code.

    I hope this helps you!

    Keep Practicing.

    Happy Coding!

  • vid.szabi•20
    @vid-szabi
    Submitted almost 3 years ago

    QR code component 2nd attempt

    2
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hello Vid! How are you?

    Congratulation on completing this challenge. Great Job!

    I have some other tips for you to improve your coding skills:

    1- Use div. main-container for Accessibility in your code.

    2- Make your websites neat and clean.

    3- Use comments in your code so this help what's going on.

    4- Also use em and rem.

    5- Decrease your divs during code.

    I hope this helps you!

  • David•80
    @DavetOluwapelumi
    Submitted almost 3 years ago

    Responsive landing page using CSS grid

    #axios#bem
    1
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hi David! Congratulation on completing this beautiful challenge. Great Job! You put so much hard work into your solution. I really like this solution.

    There is 0 HTML ISSUE. And your code is also neat and clean.

    I have some other tips for you to improve your coding skills:

    1- Make your work as decent as possible.

    2- Use comments in your code so this help what's going on.

    3- Make your websites neat and clean.

    4- Use div. main-container for Accessibility in your code.

    I hope this helps you!

    Keep Practicing.

    Happy Coding!

  • ken•60
    @skywalk128
    Submitted almost 3 years ago

    NFT preview card component

    1
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hi Ken! how are you?

    Congratulation on completing this challenge. I really like your solution. I have some tips and tricks to improve your coding skills:

    1- Keep your work decent.

    2- Never forget to place comments in your code, it's beneficial to understand your code and what's going on.

    3- Keep your webpage neat and clean.

    4- Use div. main-container for Accessibility in your code.

    5- Never Give Up (this tip is very helpful)

    I hope this helps you

    Keep Practicing!

  • Naveen•70
    @naveen011
    Submitted almost 3 years ago

    NFT

    1
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hi Naveen! Congratulation on completing this challenge. Welcome to our front-end mentor community Great job. I really like it.

    I have some other tips for you to improve your coding skills:

    1- Use comments in your code so this help what's going on.

    2- Make your work as decent as possible.

    3- Use nice-looking fonts.

    4- Use attractive colors.

    5- Make your websites neat and clean.

    6- Use div. main-container for Accessibility in your code.

    I hope this helps you!

    Keep Practicing.

    Happy Coding!

  • wavy•30
    @wavylmao
    Submitted almost 3 years ago

    QR Code Component built with React, Tailwind, setup with Vite

    #react#tailwind-css#vite
    4
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hi Wavy! Congratulation on completing this challenge. Welcome to our front-end community.

    Great job to complete this challenge. I really like your solution.

    I have a solution for your question when I make this challenge I also struggle with this problem so I do that I center my full card with position layout. Just add the main container in your full code and then add position: absolute; then top:100px; left:100px: set the position as you want and add position:relative; in body.

    I hope this helps you

    Marked as helpful
  • huzaifa•430
    @HuzaifaMateen
    Submitted almost 3 years ago

    Product-preview-card

    2
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hello Huzaifa! Congratulation on completing this challenge. I have some tips for you:

    (1)- Keep the webpage neat and clean

    (2)- Keep your work as decent as possible when creating a webpage.

    (3)- Never forget to place comments in your code.

    (4)- First make the main container have full access to your code.

    (5)- Never Give Up (this tip very helpful)

    I hope this helps you

    Keep Coding and Keep Practicing.

    HAPPY CODING!

    Marked as helpful
  • ZweHtetPaing•90
    @zwehtetpaing098
    Submitted almost 3 years ago

    Product preview card component using Bootstrap and Sass/Scss

    #bootstrap#sass/scss
    1
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hi ZWEHTETPAING’S! Congratulation on completing this challenge. Great! You use the framework to speed up your coding.

    I have some other tips for you to improve your coding skills:

    1- Use comments in your code so this help what's going on.

    2- Use attractive colors.

    3- Make your websites neat and clean.

    4- Use div. main-container for Accessibility in your code.

    I hope this helps you!

    Keep Practicing.

    Happy Coding!

    Marked as helpful
  • Muhammad-Afnan-Siddiqui•50
    @Muhammad-Afnan-Siddiqui
    Submitted almost 3 years ago

    Responsive Cards using Bootstrap Grid

    #bootstrap
    1
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hi Muhammad! Congratulation on completing this challenge. Great job. I really like it.

    I have some other tips for you to improve your coding skills:

    1- Use comments in your code so this help what's going on.

    2- Make your work as decent as possible.

    3- Use nice-looking fonts.

    4- Use attractive colors.

    5- Make your websites neat and clean.

    6- Use div.main-container for Accessibility in your code.

    I hope this helps you!

    Keep Practicing.

    Happy Coding!

    Marked as helpful
  • Huamao•30
    @wyang97
    Submitted almost 3 years ago

    Responsive product preview card

    #material-ui
    2
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hi HUAMAO’S. Congratulation on completing this challenge. I really like your solution.

    You said that your SVG image does not work. so you can also select your image in CSS. You just write div { background-image: url("image.svg"); and this will show the image inside your webpage.

    I hope this helps you

    Happy coding

    Marked as helpful
  • Sagar Pariyar•90
    @Goku216
    Submitted almost 3 years ago

    Product-Preview_card

    #accessibility
    3
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hi Sagar! Congratulations on completing this challenge. I really like your solution and it's very nice. I want to share some tips and tricks that may improve your coding skills:

    1- Use comments in your code so this help what's going on.

    2- Make your work as decent as possible.

    3- Make a neat and clean website.

    I hope this helps you

    Marked as helpful
  • Cdric2Leroy•30
    @C2dricLeroy
    Submitted almost 3 years ago

    3 column Card component

    1
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hi CDRIC2LEROY’S. Congratulation on completing this challenge. I really like your solution.

    You can use whatever you want in your code. You can also use the framework and other technology that you know. It doesn't matter what you use. CSS Grid is also an excellent choice

    I hope this helps you

    Happy coding

  • jalil•10
    @Jalilcrypto
    Submitted almost 3 years ago

    A Qr code page using HTML and CSS.

    3
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hi Jalil! Congratulation on completing this challenge. Welcome to our front-end community. I really like your solution.

    Jalil uses media query's to make a responsive design. First, you want to set your media screen as you want and then apply all properties as you want but first, you add margin:0 and padding:0 in the main container.

    I hope this helps you

    Marked as helpful
  • Lucas 👾•104,160
    @correlucas
    Submitted almost 3 years ago

    4 Card Feature Section (Vanilla CSS + Custom Design + Glassmorphism)

    13
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hi Lucas! Congratulation on completing this beautiful and unexpected challenge. I clap for you 🙌. You put so much hard work and time as seen in your design section. I really like this solution.

    There is 0 ACCESSIBILITY ISSUES and 0 HTML ISSUE. It opened my eye's when I see your solution. And your code is also neat and clean.

    VERY APPRECIATED!

  • Mr. G•50
    @igitonga
    Submitted almost 3 years ago

    Desktop design

    #sass/scss
    2
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hi Mr.G! Congralutaion on completing this challenge. I really like it.

    I have some other tips for you to improve your coding skills:

    1- Use comments in your code so this help what's going on.

    2- Make your work as decent as possible.

    3- Use nice-looking fonts.

    4- Use attractive colors.

    5- Make your websites neat and clean.

    I hope this helps you!

    Keep Practicing.

    Happy Coding!

  • Jakub Wróbel•50
    @jakubwrobel2003
    Submitted almost 3 years ago

    NFT preview card component

    #accessibility
    1
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    **Hi JAKUB! Congratulation on completing this challenge!

    Your HTML tags are perfectly correct. There is a little issue in your code that you left to add the alt="" attribute in your image tag. It's very helpful when your website is not correctly opened.

    I have some other tips and tricks for your that improve your coding skills:

    1- Use comments in your code so this help what's going on.

    2- Make your work as decent as possible.

    3- Make your websites neat and clean.

    I hope this helps you!

    Keep Coding!

  • ken•60
    @skywalk128
    Submitted almost 3 years ago

    Product preview card component-solution

    1
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hi Ken! Congratulation on completing this challenge! Welcome to our front-end mentor community. I have some tips and tricks for your that improve your coding skills:

    1- Use comments in your code so this help what's going on.

    2- Make your work as decent as possible.

    3- Make your websites neat and clean.

    I hope this helps you!

    Keep Practicing.

    Happy Coding!

    Marked as helpful
  • Ismael Barea Insua•40
    @quantosh
    Submitted almost 3 years ago

    HTML5 CSS Vanilla component

    1
    Raja Junaid Farooq•390
    @Raja-Junaid
    Posted almost 3 years ago

    Hi Ismael! First congratulations on completing this challenge.

    I have some tips and tricks and improve your coding skills.

    There are two ways to center the content. First is to text-align: center;. This helps when you want to only align text to the center.

    The second way is when you are using Flexbox or CSS Grid then you have a good choice to center the webpage or align the webpage using align-items: center, it is used when you are centering from the cross axis and justify-content: center; used when you are centering from the main axis. These properties are only possible when you are aligning the parent element.

    When you are using a child element and you want to align the item using flexbox or grid then these properties are used align-self: center; or justify self: center. These properties are only possible when you used these properties in the child element. There are also ways to center the webpage. Just Google it or use stack overflow.

    I have some other tips for you to improve your coding skills:

    1- Use comments in your code so this help what's going on.

    2- Make your work as decent as possible.

    3- Use nice-looking fonts.

    4- Use attractive colors.

    5- Make your websites neat and clean.

    I hope this helps you!

    Keep Practicing.

    Happy Coding!

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub