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

Julio Garcia

@julioediPlayas de Rosarito270 points

Full stack designer

Latest solutions

  • Responsive page, with vitual dom element in vanilla JS


    Julio Garcia•270
    Submitted about 2 months ago

    Any mayor improve


    0 comments
  • React + Typescript using bonus designs with and transitions

    #react#sass/scss#typescript#webpack

    Julio Garcia•270
    Submitted 2 months ago

    0 comments
  • Layout using grid template areas


    Julio Garcia•270
    Submitted 2 months ago

    Any improvement


    0 comments
  • Pure HTML/CSS/JS with animations


    Julio Garcia•270
    Submitted 2 months ago

    Any improvement


    1 comment
  • Responsive and animated React layout


    Julio Garcia•270
    Submitted 2 months ago

    any kind of improve


    0 comments
  • Responsive and animated timer

    #react#sass/scss#typescript#webpack

    Julio Garcia•270
    Submitted 2 months ago

    Any feedback would be helpful


    0 comments
View more solutions

Latest comments

  • Twilight Silver•120
    @twilight-silver
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the fact i was able to do everything with pure css and that i didn't have to use media port for the responsiveness...

    What challenges did you encounter, and how did you overcome them?

    The challenge i encountered was how differently the pages rendered on github are compared to what you would see yourself through live server...

    I had to use inspect on a github rendered site to make the changes

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

    How to probably make sites in a way github pages wouldnt change If you get what i mean

    Responsive QR Code Component

    #pure-css
    2
    Julio Garcia•270
    @julioedi
    Posted 2 months ago

    Good one, remember to remove missing assets, you got style.css link at<head/> tag.

    Responsive @media is missing for a responsive part.

    For the next projects, you can use:

    *{
      box-sizing: border-box;
    }
    

    That's for options like padding, are include inside of the containers size

  • Florian Stăncioiu•710
    @florianstancioiu
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy I learned about Vue 3 Composition API (better later than never).

    What challenges did you encounter, and how did you overcome them?

    I had a bit of trouble with the modal, it had an edge case where if you added all the products into the modal cart, the modal content would be bigger than the modal overlay. I managed to solve it using position fixed on the overlay instead of absolute. I don't know how or why it worked but it seemed to do the job.

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

    My product images are not the right size, I set them using the <picture> tag not with <img> directly.

    I found a stackoverflow answer (here's the link) that might help me but I don't fully understand it. If there's someone more knowledgeable than me on this topic, feel free to leave a comment here, I could use some advice.

    Product list with cart - Vue 3 Composition API & TypeScript

    #pinia#typescript#vue#tailwind-css
    1
    Julio Garcia•270
    @julioedi
    Posted 2 months ago

    Looks good, just try to make the confirmation as modal, for example, you can make the body to avoid overflow, and use position fixed instead of absolute for the container

    body.showModal{
     overflow: hidden;
    }
    #modal{
      opacity:0;
      pointer-events:none;
      transition:0.3s ease all;
    }
    body.showModal #modal{
      opacity:1;
      pointer-events:all;
    }
    
    Marked as helpful
  • Peter Wahu•290
    @Pe-te-r
    Submitted 2 months ago

    pure Typescript,html,css

    1
    Julio Garcia•270
    @julioedi
    Posted 2 months ago

    You are re-rendering everything every time you do an action, You could try to render again just the Add cart| - # + part, that's to prevent the visual glitch.

    If you check the network part in inspector mode, every action makes a new call for each image.

    Maybe you can instead use a plain string, create an array of DOM elements using document.createElement, that way just modify the actual action item.

    interface singleItem{
      element: HTMLDivElement,
      currentTotal: number,
      increase:() => void,
      decrease:() => void,
      index: number
    }
    const ItemsList:singleItem= []; //here you store the items;
    const area = 
    const createElement = (item: item):singleItem =>{
      let index = ItemsList.Length;
      const data = {
       element: document.createElement("div"),
       currentTotal: 0,
       index,
       increase: () => {data.currentTotal++},
       decrease: () => {data.currentTotal = data.currentTotal - 1}
      }
      data.element.className = `meal ${index}`,
      data.element.innerHTML = ...your code;
      const control = data.element.querySelector(".quantity-controls");
     ...
     ItemsList.push(data)
     itemArea.appendChild(data.element)
    }
    
  • Benyameen•160
    @Benyameen-cs
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Developing this type of projects can tech a lots of new thing to a person. I really appreciate my self that I develop this project in React JS and I practice my React skill with the help of this project ..

    What challenges did you encounter, and how did you overcome them?

    There is a many challenges I face but I can talk about a few one . First managing the data flow like storing the data of one form and using that data in last summary form . then i think what type of technology i used that store the form data and update the state without losing the entered data .So I think and I used the context Api with the useReducers .The context Api work like a store and provide data to each part of the react project and avoid the prop drilling process . And the use Reducer help us in updating the state .

    Multi steps forms with React JS

    #bootstrap#react#web-components#pure-css
    1
    Julio Garcia•270
    @julioedi
    Posted 2 months ago
    • [name=""] is empty in the inputs
    • Phone Number accepts any length of number
    • If you are in Summary and click change, the 2nd step always gets in monthly
    • If back from Summary and then click next, the app breaks
  • P
    toshirokubota•1,340
    @toshirokubota
    Submitted 2 months ago
    What challenges did you encounter, and how did you overcome them?

    I have struggled with running E2E test with Playwright. My tests run successfully on Chromium but failed on webkit. It failed at the last confirmation page when it failed at getting "Thank you!" being visible. I also could not install Playwright's Firefox. Somehow, the installation stalled every time...

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

    As I mentioned above, I could not pass the tests on webkit while they passed on Chromium. I had problems installing Playwright's Firefox. If you have similar experience, I would like to hear about it.

    Any other feedbacks/comments are also highly appreciated.

    multi-step-form with React

    #playwright#react#sass/scss#typescript#vitest
    1
    Julio Garcia•270
    @julioedi
    Posted 2 months ago
    • When you turn the switch to Yearly, the dot moves to the right
    • In Summary, the Change action for the plan should be moved to the 2nd step, since it is there that the plan changes
  • Mohammad Irfan•540
    @Mohammad-Irfan-Noorzada
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of successfully building a fully functional React app with routing and dark mode. Next time, I would plan the project structure more carefully and write cleaner code from the start to save time on debugging.

    What challenges did you encounter, and how did you overcome them?

    I struggled with setting up routing and deploying to GitHub Pages. I overcame this by reading documentation, watching tutorials, and asking for help to fix errors step-by-step.

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

    I’d like help improving the app’s performance, organizing the code better, and adding more advanced features like search optimization and pagination.

    Rest Countries API

    1
    Julio Garcia•270
    @julioedi
    Posted 2 months ago
    • console.log is still in the deploy
    • You can improve performance by calling https://restcountries.com/v3.1/all just once for the main page

    I know that is not in the design, but you can add in Fitter by region an option for All, which is to clean the search of Continent, just as UX improvement

    Marked as helpful
View more comments

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