Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
11
Comments
12

David Rodriguez B.

@davidFreelance19Mexico, city430 points

Intentando tener un buen desempeño en el mundo del front-end

Latest solutions

  • Responsive Advice Generator with HTML5, CSS & JavaScript

    #sass/scss#jss

    David Rodriguez B.•430
    Submitted over 2 years ago

    0 comments
  • Responsive FAQ Accordion with HTML5, CSS & JS

    #accessibility#animation#sass/scss

    David Rodriguez B.•430
    Submitted over 2 years ago

    0 comments
  • Responsive Testimonials Slider with HTML5, CSS & JavaScript

    #accessibility#sass/scss#jss

    David Rodriguez B.•430
    Submitted over 2 years ago

    1 comment
  • News Hompage with HTML5 & Tailwind-CSS

    #accessibility#sass/scss#tailwind-css

    David Rodriguez B.•430
    Submitted over 2 years ago

    1 comment
  • Responsive Tip Calculator With HTML5, Bootstrap & JS Vanilla

    #bootstrap#jss#vanilla-extract

    David Rodriguez B.•430
    Submitted over 2 years ago

    0 comments
  • Responsive Pricing Component with HTML, CSS & JS

    #bem#jss#sass/scss#gulp

    David Rodriguez B.•430
    Submitted over 2 years ago

    0 comments
View more solutions

Latest comments

  • Ezuzu Favour•90
    @FavourEzuzu
    Submitted over 2 years ago

    Product Preview Card Component

    1
    David Rodriguez B.•430
    @davidFreelance19
    Posted over 2 years ago

    Hello developer.

    Congratulations on completing this challenge.

    I've seen your code and thought I could give you some improvements:

    Body {
           height: 100wh;
           flexible screen;
           bending direction: column;
           justify-content: center;
           align elements: center;
    }
    .attribution{
           align elements: end;
           height: 10%;
           flexible screen;
    }
    

    Now some recommendations:

    • I recommend that you check the background image property as this would save you from putting the two images in your container and only changing the value of this property given a breakpoint
    • Always put an alternative text (alt) on your images, this helps to have a better SEO
    • Learn and research a little more about display flex and display grid, we don't always have to use a margin or padding to generate positioning.

    I hope these comments help you, see you later!

    David Rodriguez

    Marked as helpful
  • Lynamara•10
    @lynamara
    Submitted over 2 years ago

    responsive landing page media

    #accessibility#contentful#cube-css#stylus#semantic-ui
    1
    David Rodriguez B.•430
    @davidFreelance19
    Posted over 2 years ago

    Hello developer!

    First I would like to congratulate you for completing this challenge! I have seen your code and I bring you some options to improve it:

    body{
         display: flex;
         width: 100%;
         height: 100vh;
         position:relative;
         align-items: center;
         justify-content: center;
    }
    .cartao{
       edge: 0;
    }
    .conteudo{
       width: 90%;
       margin: 0 auto;
    }
    .attribution{
         position: absolute;
         bottom: 5%;
         right: 35%;
    }
    

    I would also like to give you some advice: -Do some research on what HTML grouping tags are (We don't always have to use <div></div> to group information)

    -Better learn display flex and *display grid. This will help you generate a responsive design in a better way, since you will be using its positioning properties.

    -Learn some methodology like BEM or Utilities

    David Rodriguez

    Marked as helpful
  • Santiago Moraga Caldera•710
    @Remy349
    Submitted over 2 years ago

    Social proof section developed with ReactJS and SCSS

    #react#sass/scss
    2
    David Rodriguez B.•430
    @davidFreelance19
    Posted over 2 years ago

    Hello developer. I want to congratulate you on the good job you just did!

    Regarding your comment, I would recommend that you do some research and learn a bit more about the properties of display flex and display grid . Within these themes, there are positions by group and by element. An alternative that could solve the positioning of the star and testimonial divs is to apply an align-self to each element and tell it if it is going to have an align-self: start, align-self: center or align-self: end and with this alternative it would be aligning the elements with respect to the parent div (This way is a better practice than applying a transform)

    Believe me that by mastering these themes you will already have 50% mastered CSS

    David Rodriguez

    Marked as helpful
  • Maulana Fadilah•10
    @maulanafadilah
    Submitted over 2 years ago

    QR code component using Tailwind CSS

    #tailwind-css
    1
    David Rodriguez B.•430
    @davidFreelance19
    Posted over 2 years ago

    Hello developer. I want to congratulate you on the good job you just did! Now tailwind is an excellent library and on creating responsive layouts I give you the following tips:

    • First, thoroughly master breakpoint topics, because Tailwind gives you that syntax to be able to apply properties to an element at the breakpoint you indicate

    -Allows you to also generate an auxiliary style sheet, since designs often need widths, heights, padding, margins, etc., whose values are not available in tailwind. So have the confidence to combine all the tools the library gives you and your CSS skills too and trust me you will have the world of CSS in your hands!

    David Rodriguez

  • Renato Martins•80
    @guimar86
    Submitted over 2 years ago

    HTML Bootstrap

    1
    David Rodriguez B.•430
    @davidFreelance19
    Posted over 2 years ago

    Hello developer!

    First I would like to congratulate you on finishing this challenge successfully. Your design is amazing! I've brought some fixes to your code to make the desktop layout a bit more similar:

    body {
           overflow-y: hidden;
           background repeat: no repeat;
    }
    .container{
           max height: 100wh;
    }
    .row .col5{
           flexible screen;
           bending direction: column;
           justify-content: center;
    }
    .btn{
           width: 40%;
           text alignment: center;
           padding: 1 rem 0;
    }
    

    I would recommend you review the positioning themes, believe me they will be of great help to generate a design much faster.

    Now, I have seen that you have used Bootstrap and I congratulate you for venturing, but do a little more research on the subject and you will realize that there is what is known as custom and this will help you combine the tools of the library with your css skills !

    David Rodriguez

    Marked as helpful
  • Faheem ismail•210
    @faheem4545
    Submitted over 2 years ago

    huddle landing page using grid

    1
    David Rodriguez B.•430
    @davidFreelance19
    Posted over 2 years ago

    Hello developer! I have seen your code and want to congratulate you for completing this challenge. I'm also bringing you some improvements to your code to improve the design layout a bit (desktop only)

    body{
        width: 100%;
        height: 100vh;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 2rem 1rem;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    .logo{
        margin-top: 0;
        position: absolute;
        top: 0;
        left: 0;
        padding: 3rem;
    }
    .hero-text, .hero-img{
        display: flex;
        justify-content: center;
    }
    .hero-text{
        flex-direction: column;
    }
    .btn{
           width: 35%;
    }
    .icons{
        margin: 0 auto;
        padding-left: -2rem;
        position: absolute;
        right: 0;
        left: 0;
    }
    

    I recommend you study a little more about display flex and display grid, this will help you generate a more organized and maintainable code. Also we don't always have to use margin or padding to make a similar design, believe me that with these two themes you will be able to generate responsive designs and create a pixel perfect!

    David Rodriguez

    Marked as helpful
View more comments
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

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