Skip to content
OverviewSolutions
50
Comments
8

Anis Bacha

@AnisBachaAlgeria630 points

Hi, I'm Anis Bacha, a Frontend Developer specializing in HTML, CSS, JavaScript, and React.js, Passionate about creating user-friendly interfaces and interactive web experiences. planning to take my skills to another level in a short period of time, You will see it all here!

I’m currently learning...

I am currently learning React JS, and planning to learn React-Query, TypeScript, tailwind CSS soon..

Latest solutions

View more solutions

Latest comments

  • Anis Bacha•630
    @AnisBacha

    Great work figuring out a solution!

    For the Grid Layout, you can achieve the desired outcome by setting up 3 columns and 2 rows. Make sure the first card extends to the first column and spans 2 rows, and center it vertically. Apply the same method for the last card, ensuring it aligns with the last column. As for the second column, simply adjust the cards to their intended positions.

    Here's a rough representation of the code:

    .main__cards{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-auto-rows: 1fr 1fr;
   align-items: center;  /* this will center the supervisor and the calculator cards */
}
.main__supervisor{
   grid-column: 1/2;
   grid-row: 1/3;
}
.main__calculator{
   grid-column:3/4 ; 
   grid-row: 1/3;
}
.main__team-builder{
   grid-column: 2/3;
   grid-row: 1/2;
 }
.main__karma{
   grid-column: 2/3;
   grid-row: 2/3;
}

    Remember to adjust the class names to match your specific implementation. Let me know if you need further assistance with this.

    Marked as helpful
  • Anis Bacha•630
    @AnisBacha

    Hey, Good job for getting the desktop design done ! I noticed in the 'style.css' file that you started with the desktop design and then used media queries to adjust it for mobile, but it is recommended to first start your work with the mobile design and then try to adjust it to be a desktop design. This will save a lot of time in projects like this. You can look up 'mobile first design' for more information.

    Also, like Johan mentioned, you'll need two separate navbars – one for the desktop view and one for the mobile view. To get it right, you might want to use some JavaScript to detect the window width and switch between the mobile and desktop navbars accordingly. Keep up the good work!

    Marked as helpful
  • Anis Bacha•630
    @AnisBacha

    I see only good work here, good job! I noticed from the responsive.css file that you have worked first for the desktop design and then you tried to adjust through the media queries to be a mobile design, but it is recommended to first start your work with the mobile design and then try to adjust it to be a desktop design. This will save a lot of time in larger projects (you can search 'mobile first design' for more information).

    Another thing is you can make the body element a flexbox and add the 'justify-content' and 'align-items' properties and make 'center' to be its value to ensure that the cards are in the middle of the page.

    Marked as helpful
  • Anis Bacha•630
    @AnisBacha

    Great job on your work! In order to use the Red Hat Display font family, consider implementing the following suggestions in your CSS file:

    At the top of your CSS file, include the following import statement:

    @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');

    Then, incorporate the following rule within your CSS to utilize the Red Hat Display font family:

    font-family: 'Red Hat Display', sans-serif;

    Typically, you can locate the necessary information in the style-guide.md file. You'll find the link to the Google Fonts website there. Once you're on the Google Fonts site, select the desired style for the font. In the right tab, you'll notice the option 'use in Web'; make sure to click on the import checkbox. Finally, you can copy the import statement and the CSS rule for the Red Hat Display font family.

  • Anis Bacha•630
    @AnisBacha

    If you want to check the responsiveness of a web page, you can use the devtools in the Chrome browser. Simply right-click the page and select "inspect". Then, in the top left corner of the dev tools, look for the laptop/mobile icon and click on it. A slider will appear that allows you to adjust the width of the page, so you can identify any issues. To learn more about best practices for making pages responsive, I recommend taking this course: https://courses.kevinpowell.co/view/courses/conquering-responsive-layouts.

  • Anis Bacha•630
    @AnisBacha

    Adding to the resources mentioned above, here's an excellent youtube tutorial explaining this concept. It goes by the title : CSS Flexbox Intro | Flex CSS Tutorial for Beginners by Dave Gray, here's a link: https://youtu.be/B8BFVzbKmPI

View more comments