Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
13
Comments
5

Carlos Villarta

@caloyv260 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!

I’m currently learning...

ReactJS

Latest solutions

  • Responsive, ReactJS, TailwindCSS, Animation

    #react#tailwind-css#animation

    Carlos Villarta•260
    Submitted about 1 year ago

    0 comments
  • REST Countries API with color theme switcher

    #react#react-router#tailwind-css

    Carlos Villarta•260
    Submitted over 1 year ago

    0 comments
  • Newsletter Sign Up Form

    #tailwind-css

    Carlos Villarta•260
    Submitted over 1 year ago

    0 comments
  • Blog Preview Card


    Carlos Villarta•260
    Submitted over 1 year ago

    0 comments
  • product-preview-card-main


    Carlos Villarta•260
    Submitted over 1 year ago

    0 comments
  • Vanilla HTML, CSS, JS


    Carlos Villarta•260
    Submitted over 1 year ago

    0 comments
View more solutions

Latest comments

  • Preeyapornn•170
    @Preeyapornn
    Submitted about 1 year ago

    responsive design landing page with css grid and pagination

    #nuxt#tailwind-css#vue
    2
    Carlos Villarta•260
    @caloyv
    Posted about 1 year ago

    Hi, I'm not sure if its my computer's problem and I tried to refresh it, but you layouting just breaks to me. Your header title and darkmode button are next to each other, the search and dropdown are also next to each other, the map images are not centered, when i type to the seach bar while in darkmode I can't see the font color, when I go to a specific country the image is way too big, and the darkmode color does not follow the designed color. But overall functionalities are fine. I have a 1980x1080 resolution and I think the layouting breaks the moment I go beyond 1440px. Hope you fix this. Happy coding!

  • joenigiri•10
    @nrl-izah
    Submitted over 1 year ago

    Building a QR Code design

    2
    Carlos Villarta•260
    @caloyv
    Posted over 1 year ago

    Hi, its going to get complicated if you keep using the position: absolute; on every parent elements especially if your code gets longer and a lot more content. And if you don't quite get how position absolute works, basically when you set a tag as position absolute, that tag will look for the closest parent tag that is set to position: relative;, and if it didn't find one, the body tag the will automatically be the relative. But, I would suggest that you learn flexbox first and stop using position absolute for now. It'll make layouting much easier.

    Also, most html tags' default display property is block, that's why you don't have to set the display: block on the body tag.

  • Dan•820
    @Gitit2meBaby
    Submitted over 1 year ago

    Vanilla CSS, JS

    2
    Carlos Villarta•260
    @caloyv
    Posted over 1 year ago

    Hi, I think I found the issue to your problem regarding to the tech page. Your data is not updating when you press the button because almost the whole button is covered by the parent <div class="technology-toggle-btn"> but the <h3> tag is so small. Your button changes state when you press the parent div but the data wont update if you miss the <h3> tag. Open the dev tools, enable the select element and hover to the buttons to verify it. Hope this helps :).

  • Atefeh Behroozi•80
    @Atefeh-Behroozi
    Submitted over 1 year ago

    Rating App with React Js

    #react
    3
    Carlos Villarta•260
    @caloyv
    Posted over 1 year ago

    Hi, I noticed your github page is showing your "README.md" file and I've had that similar problem. To fix it, go to your App.js then to <Route/>, change all your path's first path to your repository name, in your case <Route path="/interactive-rating-component/" element={<Rating/>} />, and same as the other route.

    You can visit this site for more info.

    Marked as helpful
  • myrh•100
    @myrhisyoinked
    Submitted almost 2 years ago

    Single price grid component

    2
    Carlos Villarta•260
    @caloyv
    Posted over 1 year ago

    Hi, regarding to your question, flexbox can do most of the job. Look up on how flex-direction, justify-content and align-items works and with that, you can easily adjust the elements horizontally and vertically. And you can also use all the flexbox properties even when it behaves like a display: block. There are other ways to do it but i find it easy using flexbox especially when i want a specific element to become horizontal from a vertical state or vice versa when changing the screen size.

    My technique on making the footer stay at the bottom is calculating the amount of height of header, main and footer in percentage and they must equal to 100%. here is an example:

    header{
        height: 10%;
    }
    
    main {
        height: 80%;
    }
    
    footer {
        height: 10%;
    }
    

    If you don't have a header or footer, just make the the main{height: 90%}, or whatever you prefer. Just make sure that when you add it all up, it equals to 100%.

    This website can also be handy while coding.

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