Skip to content
OverviewSolutions
8
Comments
12
P

Ivo

@ijerkovCroatia, EU150 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    Andrey•4,300
    @dar-ju
    What are you most proud of, and what would you do differently next time?

    I saw this task, where it is proposed to use a headless CMS, especially since I had already worked with Wordpress before, but I learned about headless for the first time. I decided to give it a try. In my opinion, the main disadvantage of Wordpress is that it is very difficult to make a rocket out of it, it is unrealistic to bring Page Speed ​​Insights close to 100. So it turns out that if you take the backend and admin panel of Wordpress, and write your own front, then this is really cool. The site flies fast! At the same time, it is possible to change / add content and products without any problems.

    If you are interested, you can see a demo of what the admin panel looks like from the inside

    https://audiophile.darju.ru/wp-login.php

    login: demoUser

    password: 123

    I can provide full access upon request.

    At the same time, the load on the hosting and the database during the development process is minimal. In short, I recommend this approach.

    Orders are actually sent and displayed in the admin panel, you can send them to email quite quickly. For full operation, this store only lacks payment acceptance and protection from bots. I specifically reduced the number of required fields so that it would be easier to check.

    P.S. Only during my work I learned about Strapi, I want to try it next.

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

    In terms of layout, the main difficulty was how to synchronize the sizes of the loaded blocks with the skeleton blocks and control their changes when the screen width changes. At the same time, it is necessary to achieve a minimum displacement of these blocks, otherwise Page Speed ​​greatly reduces the indicators. This took a lot of time.

    In general, the project is really complex, my code time shows 71 hours and about 10 hours to configure WordPress.

    Also, Github pages categorically refused to receive data from a domain without SSL, and on the test domain I could not make HTTPS, I had to register a new domain ((

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

    Maybe there are some automatic means of adjusting skeletons? I'm really tired of doing this.

    Audiophile website using Headless Wordpress

    #pinia#vite#vue#wordpress#sass/scss
    1
    P
    Ivo•150
    @ijerkov

    Awesome work Andrey! I never tried headless WordPress before and I was wondering how would you process orders? Using WooCommerce API?

  • P
    Christian•210
    @ChrisFloresM
    What are you most proud of, and what would you do differently next time?

    Making the site responsive

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

    Making the site responsive

    Meet landing page

    #pure-css
    1
    P
    Ivo•150
    @ijerkov

    Looks good but some reason background image in the footer is not loading so the text isn't visible.

  • keftajnr•220
    @keftajnr
    What are you most proud of, and what would you do differently next time?

    I am glad about the work and effort I put into building this project. It may not be perfect or exactly how the design site is, but I am content about my work.

    This particular project helped me to learn more about CSS Grid and its diverse functionalities. I was open to this through Youtube videos, and I saw easy yet efficient ways of building various layouts.

    Next time, I would result to much greater research and study, and put all I know into the upcoming challenges.

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

    I had issues with the layout of the site, how to place specific containers, which videos and research on them helped make them even more better than I had imagined.

    I sort of went about the responsiveness of the site in a different way than I use to, as I had some little hiccups on them. In resolving them, I had major help from tutors and guides.

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

    Definitely, with the accurate placing of the containers in the site.

    I feel I got the sizes including the fonts wrong and well greater than it should be, which can be attributed to my non accessibility to the design file.

    Help as to go about the right proportion would be immensely appreciated.

    Responsive Testimonial Landing Page Using CSS Grid

    #pure-css
    1
    P
    Ivo•150
    @ijerkov

    I noticed that the quote image in your solution is covering text. You can easily fix this by adding isolation: isolate on the div that's a parent of the image and then setting z-index: -1 on img. This will position the quote image behind the text but in front of the background color. There is a good article about it here: https://css-tricks.com/almanac/properties/i/isolation/

    But in this case, you can use a simpler method, remove the img tag completely and use a good old background image like this:

        .quote-decoration{
        --quote-width: 6.5rem;
        background-image: url("./images/bg-pattern-quotation.svg");
        background-repeat: no-repeat;
        background-position: top right 15%;
        background-size: var(--quote-width);
    }
  • harizrifqy•200
    @harizrifqy
    What are you most proud of, and what would you do differently next time?

    The thing I am proud of in this challenge is that I was able to complete it easily without any significant obstacles. For what I will do next time is to try my best without the help of AI to overcome the problems I experienced in the next Challenge.

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

    This time I have no problem with the challenge, I just ask AI for help to review my HTML structure and CSS style to see if there are any deficiencies or not.

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

    I would like to ask for help in reviewing my html structure, css styling and media query usage to see if it meets industry standards or not. Thank you

    Semantic HTML Structure and Responsive Layout with Flexbox & grid

    1
    P
    Ivo•150
    @ijerkov

    I like how you added more breakpoints than in design to reshape the grid on different screen sizes.

  • Rhuqayah001•40
    @Rhuqayah001
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how I built a mobile-responsive layout using CSS Grid. This was my first time applying grid concepts in a real project, and it helped me understand how powerful and flexible grid can be for layout control. I also kept the design clean and structured, closely matching the original design from Frontend Mentor.

    If I were to do this project again, I would:

    Use grid-template-areas for better readability in the layout.

    Focus more on accessibility by adding semantic HTML elements and aria attributes where needed.

    Possibly explore using Sass or custom CSS variables to make styling even more organized and reusable.

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

    The biggest challenge I faced was arranging the grid layout to match the design template exactly. It was difficult figuring out how to position each testimonial card correctly, especially since they had different sizes and some spanned multiple columns or rows.

    To overcome this, I:

    Studied the design carefully to understand the layout structure.

    Experimented with different grid-template-columns, grid-template-rows, and grid-column/grid-row values.

    Used browser dev tools to test changes live and adjust placements.

    Searched for examples and tutorials on CSS Grid area placement.

    This helped me get much closer to the intended design, and I now have a better understanding of how to build complex grid structures.

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

    I would appreciate help with improving my CSS Grid layout structure, especially in these areas:

    How to better organize grid areas for complex card layouts, like when some elements span multiple rows or columns.

    Whether there’s a more efficient or cleaner way to write my CSS without repeating styles across different media queries.

    Suggestions on accessibility improvements, such as better semantic HTML or ARIA usage.

    Any tips on optimizing responsiveness for very small screen sizes or large displays.

    If anyone notices specific parts of my code that could be simplified or made more readable, I’d really value that feedback too.

    Testimonials Grid Section

    #pure-css
    1
    P
    Ivo•150
    @ijerkov

    How to better organize grid areas for complex card layouts, like when some elements span multiple rows or columns.

    I had the same questions about grid on my previous challenge and figure out a simple (for me) way to manage different grid layouts on different screen sizes.

    First I define a basic one column grid for mobile using template areas

    .my-grid {
    display: grid;
    max-width: fit-content;
    grid-template-columns: 1fr;
    grid-template-areas:
        "item-1"
        "item-2"
        "item-3"
        "item-4"
        "item-5";
}

    and assign template area to each child

    .my-grid > :nth-child(1) {
    grid-area: item-1;
}

.my-grid > :nth-child(2) {
    grid-area: item-2;
}

.my-grid > :nth-child(3) {
    grid-area: item-3;
}

.my-grid > :nth-child(4) {
    grid-area: item-4;
}

.my-grid > :nth-child(5) {
    grid-area: item-5;
}

    I used generic names so I can easily switch items inside the list without messing up the layout.

    This sounds like too much work to get a basic default grid but now I can use media queries to create new layouts, for example tablet is this:

    @media (min-width: 42rem) {
    .my-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
        "item-1 item-1"
        "item-2 item-3"
        "item-4 item-4"
        "item-5 item-5"
    ;
    }
}

    and desktop

    @media (min-width: 58rem) {
    .my-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
        "item-1 item-1 item-2 item-5"
        "item-3 item-4 item-4 item-5"
    ;
    }
}

    It's easy to visualize and change the grid with grid-template-areas

  • P
    Ivo•150
    @ijerkov

    I had some troubles with this layout too and I suggest you to use grid instead of the flexbox - it's much easier to get it right with grid. Note that there are 3 different card layouts, not 2. Also, check out the clamp() function for fluid font sizes.

View more comments