Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
9
P
Grid-World
@LiJunXiang1234

All comments

  • P
    turtlewords•500
    @Turtlewords
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the smooth flow of the site. With practice, my eye for design is slowly improving.

    What challenges did you encounter, and how did you overcome them?

    Creating and positioning the circled number graph was one of my first experiences with absolute positioning. A little time in the documentation showed me how to get the results I wanted. Layering the footer image with the background color took a few different approaches to figure out.

    What specific areas of your project would you like help with?

    Please assess the responsiveness and appearance of the page. Thank you.

    Meet Page using Grid/Flexbox

    1
    P
    Grid-World•170
    @LiJunXiang1234
    Posted 4 months ago

    It looks like the two buttons in your hero section are not arranged correctly (they should be aligned horizontally on the tablet and desktop versions).

    There are also many other detailed issues: the font color, alignment, and other aspects have not been properly restored.

    I understand that meticulously refining details can be tedious, but isn’t that exactly the professionalism and quality that define us as designers? Keep going—let’s improve together!

    Marked as helpful
  • MoeinGhasemi•110
    @moein-creator-ops
    Submitted 4 months ago

    just a simple website section using css grid

    1
    P
    Grid-World•170
    @LiJunXiang1234
    Posted 4 months ago

    Great results! It looks like you missed the responsive layout for the tablet version. The spacing between the username and the verification is a bit too large. Other than that, everything looks great!

    Marked as helpful
  • P
    Toshihito ENDO•200
    @GentleHorse
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Sometimes I used CSS grid via Tailwind CSS, but never dive into it since this project. Building this app without Tailwind CSS gave me a chance to understand CSS grid deeply and made me realize how useful and handly it is as well as flex box. Definetly I'm gonna use it more often from now on!

    What challenges did you encounter, and how did you overcome them?

    Understanding CSS grid took me a bit of time, but now I feel like much familiar with it. I totally missed the useful tool til now :)

    Four Card Feature Section with CSS Grid & Flex Box

    1
    P
    Grid-World•170
    @LiJunXiang1234
    Posted 4 months ago

    Excellent work!

  • Ruben Condori Cosme•10
    @Nocturnnn32
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    orgullosos de aver recordado y aprender nuevamente

    What challenges did you encounter, and how did you overcome them?

    un poco batalle con el ingles en el css pero al final se pudo y conocer algunnos atributos que usa el css pero como dije l final se pudo

    What specific areas of your project would you like help with?

    un poco mas de manejo de css y mejorar

    htmlCss

    1
    P
    Grid-World•170
    @LiJunXiang1234
    Posted 4 months ago

    Amigo, parece que has encontrado algunos problemas con el idioma. Yo soy de China y también me siento frustrado con el inglés, pero utilizo ChatGPT para ayudarme a traducir y entender. Tal vez podrías pedirle más ayuda a GPT. Además, parece que aún no estás muy familiarizado con CSS y HTML, y tampoco has entendido el propósito de este ejercicio: necesitamos construir un diseño responsivo. Cuando cambio el tamaño de la página o se detecta que se está abriendo en un móvil, el estilo de la página debe cambiar. Además, solo necesitamos un archivo HTML, no dos como lo has hecho tú. Si no lo entiendes, puedes descargar mi código y echarle un vistazo. Tu CSS y HTML también necesitan más práctica. ¡Ánimo! ¡Tu esfuerzo dará frutos! Si tienes algo que no entiendes, también puedes preguntarme.

    Friend, it looks like you've encountered some language issues. I'm from China and also struggle with English, but I use ChatGPT to help me translate and understand. Maybe you can ask GPT for more help. Additionally, it seems like you're not very familiar with CSS and HTML, and you haven't understood the purpose of this exercise: we need to build a responsive layout. When I resize the webpage or detect that it's being opened on a mobile device, the webpage style should change. Also, we only need one HTML file, not two like you made. If you don't understand, you can download my code and take a look. Your CSS and HTML also need more practice. Keep it up! Your effort will pay off! If you have any questions or don't understand something, feel free to ask me.

  • Giovani Oliveira•110
    @Giodosvani
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I used device breakpoints on CSS to make it bigger and easier to read.

    What challenges did you encounter, and how did you overcome them?

    I was facing a trouble that my border-bottom for the table had little breaks on the middle. searching for solutions, i found a rule to the table tag on CSS that resolves the problem:

    border-collapse: collapse;

    Responsive recipe page using device breakpoints

    1
    P
    Grid-World•170
    @LiJunXiang1234
    Posted 4 months ago

    Great practice! By zooming in on the entire page to improve readability, it shows that you are still maintaining your thought process during practice and always considering the user's needs.

    There are some details to pay attention to, such as adjusting the font weight of the main title; a value of 400 or 500 would be less heavy. The card itself also needs some padding at both the top and bottom, so adjusting the margin values for the top and bottom of the card is necessary.

    For the final content, the text paragraphs do not need to be placed inside a table. Set the table width to 100%, so it will be as wide as the card.

    Marked as helpful
  • isarojodev•70
    @isarojodev
    Submitted 4 months ago

    Social Links Profile

    1
    P
    Grid-World•170
    @LiJunXiang1234
    Posted 4 months ago

    very nice work!

  • T23harms•540
    @T23harms
    Submitted 4 months ago

    VS Code

    1
    P
    Grid-World•170
    @LiJunXiang1234
    Posted 4 months ago

    You did an excellent job, very close to perfect! However, there are a few minor issues.
    It seems that you forgot to add the hover effect to the card. When the mouse hovers over the card, the shadow should move. You've already successfully implemented the font color change, and I'm sure the shadow movement won't be a big issue for you.

    Also, please pay attention to the bottom spacing. You can add margin to the bottom div, or set padding for the card. Currently, the bottom text and the bottom border are too close together.

    Marked as helpful
  • R-nees•30
    @R-nees
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    finishing the project, search different ways of solving the problem and chose one that fits best

    What challenges did you encounter, and how did you overcome them?

    i mistakenly deleted my first solution while trying to upload, i had to rewrite the whole code again

    What specific areas of your project would you like help with?

    uploading the project via vs code terminal

    My QR Code Card – Frontend Mentor Challenge

    4
    P
    Grid-World•170
    @LiJunXiang1234
    Posted 4 months ago

    From the visual effect, it seems that you haven't centered the card, the background color is different from the design, and the font size needs adjustment.

    I thought these were just simple value adjustments, but when I looked at your code, to be honest, I was quite shocked. I sincerely apologize, but I can't understand your code and am unable to provide specific modification suggestions.

    If you need help or have any questions, feel free to ask me! (Although I'm also a beginner, I'll do my best to respond!)

  • Akiza•30
    @NagatsuAkiza
    Submitted 4 months ago

    im using link import font Outfit from google lapis, and simple styling

    1
    P
    Grid-World•170
    @LiJunXiang1234
    Posted 4 months ago

    Great work! The page does a great job replicating the target, and the code is very concise and readable. I’m learning from you!
    However, there are a few things to adjust in terms of styling:

    1. After reviewing your code, I noticed you’re using CSS’s built-in color identifiers. You might want to try assigning your own values and refer to the style guide provided in the exercise. Your background color is too light and does not match the color provided in the example.
    2. You haven’t added a shadow to the card. You can add a shadow under your card code:
    .card {
        background: white;
        padding: 8px;
        border-radius: 10px;
        box-shadow: h-offset v-offset blur-radius spread-radius color inset;
    }
    
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