All solutions

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

Hello fellow front-enders! 👋

I have a couple of questions for you and I would REALLY appreciate any recommendations or suggestions!

1. I don't really like how my hero section turned out. I decided to put the bg-intro-desktop.svg image as a background using CSS and the image-mockups.png positioned right by the hero text using flexbox. What was your solution?

2. I decided to add a small challenge for myself and make a carousel for blog posts section for smaller screens. It'd be nice if you share your thoughts on how I can improve the carousel.

Here's html section, where

blog is my main container for this section,

blog__cards is a container for the blog cards,

blog__card is a blog card:

    
      Latest Articles

      

      
        
          // blog card content
        
    
        
          // blog card content
        
    
        
          // blog card content
        
    
        
          // blog card content
        

      
      
    

CSS section:

.blog__cards {
    display: flex;
}
.blog__card {
    min-width: calc(100% / 4);
    margin-right: 20px;
}

.blog__card:last-of-type {
    margin-right: 0;
}

@media screen and (max-width: 1320px) {
    .blog__cards {
        overflow: hidden;
        scroll-behavior: smooth;
    }

    .blog__card {
        min-width: calc(96% / 2);
    }
}

@media screen and (max-width: 840px) {

    .blog__card {
        min-width: calc(100% / 1);
    }
}

And finally JS:

// Switch between blog posts in the blog section

const blogCards = document.querySelector(".blog__cards"); // carousel
const firstCard = blogCards.querySelectorAll(".blog__card")[0]; // the first blog card
const arrows = document.querySelectorAll(".blog i"); // arrows to scroll the cards 

// Get the margin right value between the cards
let marginRight = parseInt(getComputedStyle(firstCard).marginRight);

let cardWidth = firstCard.clientWidth;
let scrollDistance = cardWidth + marginRight;

// Carousel for blog posts 

arrows.forEach((arrow) => {
    arrow.addEventListener("click", () => {
        blogCards.scrollLeft += arrow.id === "left" ? -scrollDistance : scrollDistance;
    })
})

const showArrows = () => {
    let scrollWidth = blogCards.scrollWidth - blogCards.offsetWidth;
    arrows[0].style.display = blogCards.scrollLeft === 0 ? "none" : "block";
    arrows[1].style.display = blogCards.scrollLeft === scrollWidth ? "none" : "block";
}
  
blogCards.addEventListener("scroll", showArrows);

Or if you notice anything suspicion, I'll be happy to hear from you in any case! Thank you guys! 🤗

Hello everyone!

Completed another project with main focus on CSS Grid. I feel much more confident using Grid, but still feel that I make something wrong. I would really appreciate any feedback!

Hello amazing community! 🎉

Happy to share the results of completing this challenge. I can feel that I'm getting better at it.

In this challenge I just wanted to try to create a full landing page and see if I can do it. And actually I'm pretty happy with the result. 😌

Hello amazing community! 🎉

Would like to share the results of my struggle to make CSS Grid works. 🤓 It was quite a challenge for me to make it work since there is a lot of tricky things with Grid. But I'm pretty satisfied with the final work. And I've definitely learnt a lot:

• how to plan your work if you use Grid: how many columns and rows you'll need, their sizes, what units to use and why, use grid-area or grid-row and grid-column etc.

• finally feel confident using grid-row and grid-column;

• how to center vertically and horizontally grid container (the most time I spent was trying to figure out how to place it in the center of the viewport). My solution was to add 1fr on top and bottom of the container and on the left and right with fixed height for the container:

.container {
        height: 100vh;
        margin: 0;
        grid-template-columns: 
            1fr repeat(3, minmax(150px, 20.5rem)) 1fr;
        grid-template-rows: 1fr auto 1fr;
    }

What is your solution for placing the grid container in the center of the viewport?

• in addition to Grid, I've set another goal which is to learn more how relative units and how they work;
• practice a little bit with pseudo classes (such as :nth-child());
• and it was my first try of mobile-first approach, which I definitely liked!

What did you practice on this challenge?

Hello amazing community! 👋

I'd like to ask you a question: what are your solution for displaying one image for desktop and another for mobile?

Decided to simply go with :

.mobile-img {
    display: none;
}

@media only screen and (max-width: 745px) {
    .desktop-img {
        display: none;
    }
}

What do you think? 😅

Hello! This is my first project on Frontend Mentor platform. ☺️

In this project I tried to focus more on media queries and different orientations on mobile devises. If there is any suggestions on how this part of my solution can be improved, I'd be happy to hear it.

Thank you for your time and have a great day! ☺️