Avatar for juanmesa2097

Juan David

@juanmesa2097 MedellĂ­n - Colombia

Mentor Score


Running out of challenges to solve đŸ˜¿

  • RE: munif's "How good are you (Bookmark landing page) with layouts- correct me pls" solution



    There are some straightforward ways to achieve that, you could actually do it only with CSS by using labels and linking each one to a radio button and use a sibling selector to show the content inside a div

    Something like this:

    <label for="tab1">Tab1</label>
    <input type="radio" name="tabs" id="tab1" checked>  <----  checked if you want to show first
    <div class="content"> this is the content of the first tab </div>
    <label for="tab2">Tab2</label>
    <input type="radio" name="tabs" id="tab2">
    <div class="content"> this is the content of the second tab </div>
    .content {
        // content is hidden by default
        display: none;
    input[type="radio"]:checked + div {
        // if radio is checked show the content
       display: block;

    If you want a JS solution, you have multiple options but consider using different page routes if there's a lot of content on each tab. We don't have a lot of content on this challenge so we don't have to worry about that, so we can use buttons and onClick event to handle the action.

    Regarding the resources, you can see a lot of useful stuff in css-tricks

    Let me know if you have any doubt or if you need any help with the javascript implementation and I'll be glad to help.

  • RE: Jael Castillo's "Huddle Landing Page" solution



    In the root element, that is html and then in the body element reset back the font size to default with rem unit, so it will scale and be proportional with pixels:

    body {
        font-size: 1.6rem   // 1.6rem = 16px | or whatever font size it is
  • RE: Oscar Yiu Lap Sang's "Sass is dope!" solution


    A website builder is good for when you have a repeated structure like home, contact, about and you only want to show some information, promote your brand and maybe have a blog but when you need to develop a complete, scalable and made to size application (mobile, desktop, web) those things won't be very useful.

  • RE: Aygulio's "Mobile first HTML,CSS" solution



    The triangle isn't attached to anything so it will move whatever it wants depending on the resolution.

    I don't want to change too much your code, so I'll give you 3 simple steps to fix this:

    1. In the HTML put triangle-container inside of floating

    2. set the next properties in .triangle-container

    .triangle-container {
        bottom: 0;
        right: 0;
        position: absolute;
    1. change the following in .triangle
    .triangle {
         transform: translate(-329%, -150%);
    .triangle {
         transform: translateY(20px);

    The best solution would be using ::before and ::after pseudo-elements to make this type of shape but that would require changing some of your code.

    here's a working example

    Let me know if you have any doubt.

    Update: the background image is full height and doesn't correspond with the design.

    You can easily fix this:

    @media (min-width: 500px) and (orientation: landscape)
    body {
        background-image: url(/images/bg-desktop.png);
        background-size: 100% 50%;      // <---  x, y
        background-repeat: no-repeat;
        background-position: bottom;
  • RE: Vitor Marçal's "Mobile First (I try..) solution with Css Grid" solution


    For this challenge, since is a small component and you're the only developer it's completely fine, but when you have to face a big application like Facebook, with a team of developers who must stay in sync, an approach like this could be way too messy bringing with it a lot of technical debt. Definitely the way to go with an application that big is utility-first; actually, if you inspect Facebook, you'll find tons of CSS utilities for each purpose.

  • RE: munif's "Mobile-first Social media dashboard with theme switcher" solution


    The most common ones are:

    • chrome
    • firefox
    • safari
    • opera
    • brave (based on chromium)
    • edge
    • IE

    To ensure compatibility across browsers you have to use browser vendor prefixes

    • Android: -webkit-
    • Chrome: -webkit-
    • Firefox: -moz-
    • Internet Explorer: -ms-
    • iOS: -webkit-
    • Opera: -o-
    • Safari: -webkit-

    And there are ways to manage this more efficiently (for instance, using mixins with some CSS preprocessor or even better, using a PostCSS plugin called autoprefixer)

  • RE: thatClassyDude's "Mobile First w/Sass" solution


    Hello again.

    For the background, you can set the height of the html and body elements to 100% and use the ::after pseudo-element

    html, body {
       height: 100%;
    body {
       background-color: <--- here goes the dark blue background color
       position: relative;
    body::after {
        content: "";
        width: 100%;
        height: 50%;
        background-image: url(../images/bg-mobile.png);
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        background-position: bottom;
        bottom: 0;
        left: 0;
        z-index: -1;
    @media (min-width: 768px) {
        background-image: url(../images/bg-desktop.png);

    It goes something like that, you may have to tweak some things.

    You may also want to check this article about CSS naming conventions; really important in collaborative work when you're doing open-source or simply working in a company with more developers on the same project.

    I saw you started using more classes and less nesting, that's very good!