All solutions

Hi all,

Here is my solution for the Loopstudios Landing Page project. I'm starting to fairly confident with responsive layouts. I tried paying more attention to keeping my css tidy by using global utility classes. There's not much React states to worry about in this project - but as always any feedback or thoughts are appreciated. Thanks so much!

Tyler

Hi all,

Here is my submission for the Project Tracking Intro Component project. I was a bit unsure on how to make the hero image overflow its container without breaking the responsiveness of the component. In my solution I used overflow:hidden on the image container and width: 150% on the hero image. This seems to do the trick, but is there a better way to accomplish this? Thanks!

• Tyler

Hi all,

Here is my solution for the Huddle Landing Page project. This is my second full landing page project and have definitely improved since the first one. I didn't encounter any major challenges, but I'm always conscious of trying to keep my css tidy. With that in mind, any thoughts or feedback related to my project structure, scss, or anything else is always welcome - thanks!

• Tyler

Hi all,

Here is my solution for the Pricing Component Project. I didn't run into too many challenges with this, but I'm always willing to receive any thoughts or feedback. Thanks so much!

• Tyler

Hi all,

Here is my solution for the Social Media Dashboard project. I'm happy with how this project turned out and for the first time I can really see a big advancement in my progress (thank you to everyone who has provide amazing feedback!!!).

The one thing I am unsure of is how modular to make scss files with React. For example, I have global selectors that style the general structure & color of the Card components. But I also have a scss file for each type of Cards to make more specific adjustments. Is this practice confusing? Is it better to include the global stylings in each scss file for clarity?

Any feedback is always greatly appreciated!

• Tyler

Hi all,

Here is my submission for the Fylo Data Storage Component project. I had fun with this project and didn't encounter to many issues. That said, any feedback is helpful. Thanks!

-Tyler

Hi all,

Here is my solution to the Testimonial Grid Project. What I found challenging about this project was styling reusable React components. For example, in this project I use one React component for all the grid sections - however, when I set the background colour/modify the image border/etc. I feel that my CSS ends up messy.

I've struggle with this issue on other projects and I am hoping to get some advice or best practices on how to reuse React components while keeping my CSS tidy. Any help is appreciated - thanks!!

-Tyler

Hi all,

Here is my solution for the Sunnyside Landing Page challenge. I found the responsive design aspect of this project difficult, particularly with background images. I used background-size: cover to fit the hero image, but it loses the design as the image scaled. Does this solution work? Any suggestions on how to improve responsive images in this context would be helpful. Thanks!

-Tyler

Hi all,

Excited to submit my 10th solution - I've definitely made progress since my first submission! Any pointers on where I can continue to improve would be amazing!

One area of my solution I am unsure about is the code that validates the inputs before displaying Tip/Person and Total/Person output. Is there anyway to make this cleaner?

 const getTip = (props.billAmount && props.people > 0) ? (props.billAmount * (props.percentage/100)/props.people).toFixed(2) : "0.00"
    const getTotal = (props.billAmount && props.people > 0) ? (props.billAmount * (1 + props.percentage/100)/props.people).toFixed(2) : "0.00"

Thanks again for the advice!

• Tyler

Hi all,

Here is my solution for the Time Tracker Dashboard challenge. I enjoyed this project and used it as an opportunity to refine and clean up my code. Any thoughts or guidance on how I can improve in this area is appreciated. Specifically, I had a question about If Statements - is there anyways to shorten this code?

    const convertTimeframe = () => {
        if(props.timeframe === "Daily"){
            return "Yesterday"
        } else if (props.timeframe === "Weekly"){
            return "Last week"
        } else if (props.timeframe === "Monthly"){
            return "Last month"
        }
    }

Thanks so much! -Tyler

Hi all,

Another challenge submitted! I found this one to be particularly difficult. I think this is because there is more than one component/layout to work with. To make my work flow a little easier, I separated the css for each component into its own file. Is this good practice?

Additionally, I paid attention to making my code cleaner and more readable than past projects. Any thoughts or suggestions for improvements in this area are greatly appreciated!

Thanks so much! -Tyler

Hi all,

I really enjoyed this challenge! This was my first time attempt using async await with an API call, as well as useEffect. Any feedback on my async function is welcome!

    const getData = async () => {
        try{
            const res = await fetch('https://api.adviceslip.com/advice')
            const data = await res.json()
    
            setAdvice(data.slip.advice)
            setAdviceNum(data.slip.id)
        } catch (error){
            console.error(error)
        }   
    }

Thanks! -Tyler

Hi all,

Another Junior Challenge complete! I'm getting the hang of updating components using React's useState, but have some questions regarding readability. For example, one element had multiple classNames, inline styles, and events so it was extremely long:

<div onMouseEnter={() => {handleHover(); handleSelect(report)}} onMouseLeave={handleLeave} style={{opacity: selected === report ? 0.75 : 1}} className="bar-area col-center">

Are there any best practices on breaking this up? Or is it good the way it is? Thanks!

-Tyler

Hi all,

Here is my solution for the Interactive Testimonial Slider Component. I had some difficulty making the images & backgrounds scale together, so any feedback on my CSS is appreciated. Additionally, any React tips or best practices are welcome!

Thanks! -Tyler

Hi all,

Here is my first "Junior" challenge solution, I'm excited to be seeing some progress! It was much easier this time for me to make the component responsive and to use State with React. That said, any tips on making my code cleaner is appreciated!

Thanks, -Tyler

Hi all,

I've selected this challenge to practice responsive designs with css. I found this challenge easier than previous challenges with responsive design, but any feedback on how I can improve is always appreciated. Thanks!

-Tyler

Hi all,

I'm excited to submit my second submission to Front-End Mentor! My biggest challenge with this project was using absolute/relative positioning while making everything responsive. Any pointers on how to do this effectively would be appreciated.

I would also like to learn more about updating styles in React. Is it best practice to use inline styles and a ternary operator / conditional statement to accomplish this?

Thanks! -Tyler

Hi all,

I'm excited to share my very first React App and Frontend Mentor Solution! I would love any feedback - especially related to my use of useState and props as I found this to be particularly challenging. I would also like to improve my knowledge on React and CSS best practices, so any suggestions would be much appreciated. Thanks so much!

-Tyler