Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions14Comments20

All comments

  • P
    Joyal James• 265

    @silkcoder

    Posted

    Congrats for completing the task.

    I noticed one thing, You applied the style height:100vh to the container element. Its good but min-height:100vh is more suitable here.

    To see why, open your site on google chrome, then open developer tools, then click on mobile view, then choose Iphone 12 pro, the site looks good but if you change the orientation, you will see some white colored space at bottom. You can fix this by applyingmin-height:100vh instead of height:100vh to the element with class 'contianer'.

    Good luck with your future tasks.

    Marked as helpful

    1
  • mohammed qabbari• 120

    @mohamedqabbari

    Submitted

    I've just completed a front-end coding challenge from @frontendmentor! 🎉

    You can see my solution here: https://www.frontendmentor.io/solutions/blog-preview-card-challenge-by-sass-WDgxOYxpoM

    Any suggestions on how I can improve are welcome!

    Blog Preview Card Challenge by Sass

    #sass/scss

    1

  • P
    Joyal James• 265

    @silkcoder

    Posted

    Good attempt.

    You can place your container in the center of the screen vertically by changing the height property of the .container class

    change min height:600px to min-height:100vh

    .container {
   min-height:100vh
}

    Now the container get placed vertically centered on the screen.

    Good luck.

    0
  • P
    Joyal James• 265

    @silkcoder

    Posted

    Hello there,

    Your solution looks very good, I have a few suggestions.

    The container is not centered vertically, to place the container vertically center, just add the following style to your .container class

    .container {
   //add this property to your existing styles
   min-height: 100vh;
}

    Now you can remove margin-top property from .box class

    .box {
   //remove this style
   margin-top: 50px;
}

    I checeked the repo and I think its good to place your assets in separate folders, like images goes to 'images' folder and css files to you a 'css' folder.

    It is not a good practice to add inline styles to an HTML element (you added inline styles to a div with class box)

    Good luck with your future tasks

    Good day

    0
  • P
    Joyal James• 265

    @silkcoder

    Posted

    Congrats for completing the task.

    I have two points to make this layout better.

    I am using a wide monitor and the background image looks broken. You can make it better by adding following styles to your body tag

    body {
   //your exisitng styles
    background-repeat: repeat-x;
}

    Once you add this styles, the background image will cover the entire screen.

    When I open your page, I can see a scroll bar in the layout, its because body tag has default margin. As a quick fix, you can add margin:0px to your body tag

    body {
   //Your existing styles
   margin:0px;
}

    Now you will see the layout without a scroll bar

    Its recommended to have a reset.css file in the project to reset all the default styles. You can find sample reset file at https://meyerweb.com/eric/tools/css/reset/

    Good luck with your future tasks

    0
  • P
    Joyal James• 265

    @silkcoder

    Posted

    Hello there,

    Congrats for completing your task, It looks good, however I have a few suggestions that can make your layout better

    First thing you have to keep in mind is that your layout get viewed in different sized devices. so is not a wise decision to set width for body tag. so you can remove width property from body tag

    body {
   //remove this
    width: 1440px
}

    Next, you can remove margin property you give to container div (we have a better method to center the container :) )

    .container {
   //remove following line
   margin: 200px 250px 150px 580px;
}

    Now the container get aliged to top left, that is not good :) we have to place the container centered in all sized devices. so apply the following propertiese to the body tag in addition to the existing styles

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

    Now the container get aligned to centered horzontally and vertically. Good job

    you can read more about flex box propertise at https://www.geeksforgeeks.org/introduction-to-css-flexbox/

    Now if you notice, you may see a scroll bar in the window, its because there is a margin property get added to body tag by default. so a recommended method to fix this is to use a reset css file

    [this is a sample reset css file] (https://meyerweb.com/eric/tools/css/reset/)

    you can download and load this css before loading your styles.css, this file reset all default styles get added to the HTML document

    As a quick fix (without using a reset file) you can add 'margin:0px' to your body tag to remove the scroll bar

    body {
   //all your styles in body tag goes here
   margin:0px;
}

    Now your layout look better.

    I noticed that on your repo, all files (images, css) are scattered, Its good to keep them on separate folders, so that all your images will stay on images folder and your styles to a styles folder

    Good luck with y our future tasks

    Good day

    0
  • P
    Joyal James• 265

    @silkcoder

    Posted

    Your solution looks good

    I have a suggestion about the max-width property you given to body tag.

    If your solution opened in a screen with width greater than 1440px, the content not get centered. So you can remove the max-width property of body tag

    body {
   //remove
   max-width: 1440px;
}

    Once you remove this property, your content remains on cener for all sized devices.

    Another point

    To center the container its wise to use Flexbox properties, read more about it on the page https://www.geeksforgeeks.org/introduction-to-css-flexbox/

    Marked as helpful

    0
  • P
    Joyal James• 265

    @silkcoder

    Posted

    Congrats for completing the task

    I noticed a few things

    • It would be great if you can keep the first item opened on page load
    • When you open an item, it would be great if it automatically closes already opened item
    • Your link to codebase is broken (GitHub repo link)

    Good luck with your future challenges. Have a good day

    0
  • P
    Joyal James• 265

    @silkcoder

    Posted

    Congrats for completing the task, it looks good.

    However, I have a suggestion to place the main tag content in the center of the screen horizontally and vertically.

    In your style.css file, add the following styles to body tag

    body {
    //add following styles to your existing styles
    display: flex;
    justify-content: center;
    align-items: center;
}

    remove 'margin-left: 35%;' and 'margin-top: 13.5%;' from your main tag styles

    main {
   //remove the following styles
   margin-left: 35%;
   margin-top: 13.5%;
}

    Now the main content get centered in all sized devices.

    You can read more about flex box styles in the following page Introduction to CSS Flexbox

    Good luck with your future challenges. Have a good day.

    Marked as helpful

    1
  • Melvin Aguilar 🧑🏻‍💻• 61,460

    @MelvinAguilar

    Submitted

    🎁 Features:

    • Achieved 98% in Lighthouse score for performance, accessibility, best practices, and SEO. 📊
    • Simplifying form management using react-hook-form. 📝
    • TypeScript-first schema declaration and validation usin zod library. ✅.
    • Resemblance with the original design. 🎨
    • Small animations with Framer motion. 🎬
    • Ensuring a delightful experience for users who prefer reduced motion. 🚫🎉
    • No errors or warnings using ESLint (Airbnb style guide). ✔️
    • Custom hooks. 🎣
    • Progressive Web App (PWA) support. 📱🌐
    • Utilized TailwindCSS for responsive styling. 🎨
    • Codebase is well-maintained and formatted using Prettier. 💻
    • Tested with the TalkBack screen reader on mobile. 📱🔊
    • Toast Component with Sonner. 🍞🔔

    🛠️ Built With:

    • Next.js 14. ⚡
    • TypeScript 🚀
    • TailwindCSS. 🎨
    • react-hook-form and zod. 📝
    • ESLint (Airbnb style guide). 📦
    • Framer-motion. 🎬
    • npm - prettier - prettier-plugin-tailwindcss. 💻

    Any suggestions on how I can enhance this solution or achieve even better performance are welcome!

    Thank you. 😊✌️

    PayAPI multi-page website (Next.js + TypeScript + Tailwind + ESLint)

    #backbone#next#tailwind-css#typescript#lighthouse

    12

    P
    Joyal James• 265

    @silkcoder

    Posted

    Congrats, good job

    2
  • P
    Joyal James• 265

    @silkcoder

    Posted

    Good work.

    1
  • Walter Sosa• 20

    @swapuruguay

    Submitted

    Frontend Mentor - Product preview card component solution

    Technologies:

    • CSS Grid
    • Flexbox
    • HTML
    • Media queries range syntax.

    Product Preview Card Solution

    1

    P
    Joyal James• 265

    @silkcoder

    Posted

    Congrats for completing the task.

    I am adding a few points to improve your layout

    1. Mobile view need a different image.
    2. If you change mobile view orientation (rotate) then the layout breaks.
    3. Elements need position adjustments
    4. Text part need better width control on desktop view

    I also completed the same task today, have a look and let me know your comments, thanks

    All the best

    Marked as helpful

    0
  • 👾 Ekaterine Mitagvaria 👾• 7,640

    @catherineisonline

    Submitted

    Hello, Frontend Mentor community! This is my solution to the Profile card component.

    I have read all the feedback on this project and improved my code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are still free to download or use the code for reference in your projects but I longer update it or accept any feedback.

    Thank you

    Profile Card Component

    2

    P
    Joyal James• 265

    @silkcoder

    Posted

    Good work. but not sure why you have empty header and nav sections at the top.

    0
  • P
    Fluffy Kas• 7,735

    @FluffyKas

    Submitted

    Hey guys,

    This was a trickier challenge than it looked like. Much trickier, actually. I know it's not a pixel perfect copy of the design but that even intentional in some places ^^ Please feel free to roast me, I'm sure I made some errors!

    Have a great day!

    edit: I couldn't figure out what's up with the fonts! They just look different than shown on the design. Any idea why?

    Loopstudios with Sass, JS, Parcel

    4

    P
    Joyal James• 265

    @silkcoder

    Posted

    Nice work.

    0
  • P
    Joyal James• 265

    @silkcoder

    Posted

    Good work but the image on the right side is not visible. Please fix it.

    0
  • P
    Joyal James• 265

    @silkcoder

    Posted

    Good job. I think you forgot to add body background color. It will look better if you add a mouseover effect to the buttons on bottom.

    1
  • Milan• 260

    @milanjelic92

    Submitted

    Hello to everyone...This is my first challenge and first solution i add here. Hope you like it and if you see something i can change or do it in another way, be free to give your advice.

    3-Column Preview Card using HTML and CSS Flex

    1

    P
    Joyal James• 265

    @silkcoder

    Posted

    Good job, but when I previewed the site, I see the images on top are overlapping with the titles also the height is little different from the original design.

    0
  • P
    Joyal James• 265

    @silkcoder

    Posted

    Looks good, but I think it would be great if you can add the body background color too.

    1
  • P
    Joyal James• 265

    @silkcoder

    Posted

    Looks good. It would be great if you can add mouse over effect to the buttons on bottom. For the 'Learn More' text, I recommend to use anchor tag instead of Button tag, so we can add a link to another page.

    1
  • okogikam• 30

    @okogikam

    Submitted

    what is font-family that use for title?

    card-cars

    1

    P
    Joyal James• 265

    @silkcoder

    Posted

    The font used are Big Shoulders and Lexend Deca

    You can include these fonts from google font service using link tag

    https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;700&family=Lexend+Deca&display=swap

    0