My portfolio after freecodecamp

Hello, I used canva for design inspiration for my portfolio. I think it looks great but would like some feedback on what you all like and don’t like about.

1 Like

Don’t get me wrong I can appreciate the desire to make pages fancy and do “design stuff” and I think you have made an interesting-looking page. But the most important thing a page can be is usable/accessible.

A boring page that works for everyone and delivers the required information and functionality is better than a fancy page that does not.

Anyway, this is all just meant as constructive feedback.


  • As it is now, the page is broken for screens wider than 2000px (on my 1440p monitor it is broken). It doesn’t make sense to wrap the styles in the <= 2000px media query unless you have styles for > 2000px.

  • You should not be using images for text. They are inaccessible. You are also forcing the download of images far heavier than HTML text. I’m sure you can get the same look using HTML/CSS if you try (ask for help if needed).

  • The images that are actual images should be scaled down and compressed in a proper format. Do not use PNG files for large natural images (i.e. for anything but graphics and transparency support). There are online tools you can use for image optimization.

  • You should increase the font size for the important text and make sure the font size never gets too small.

  • You should add labels to the form.

  • Not sure if that is your real contact information but I wouldn’t post all that. People can get your contact info through email as needed.


1 Like

It looks nice

I would revisit this implementation, it looks like you’re using vanilla JS within React?

1 Like

Thank you for your feedback. It was awesome insight & just what I needed. I will work on those things as soon as I can. The contact information shown are app phone numbers, not my direct line & a fresh email only used for my portfolio. I will work on compressing and replacing text images which should only take a few minutes. I forgot to remove the @media 2000 width, thank you for such great feedback. I hope you have a fantastic day. Please let me know if you need my feedback or anything from me now or in the future.

1 Like

Awesome! Thank you. Yes & no. I started to use it & then kind of changed my mind. Do you have feedback or a question about it?

1 Like

My feedback is never use React and vanilla js together. React is a different paradigm.

I would suggest focusing on React than vanilla js dom manipulation though as it’s the dominant framework and an essential frontend skill in today’s job market. Your ability to get a job will probably hang on your React skills.

You’re making good progress though, keep up the good work :+1:

2 Likes

I see now that we are gonna be using hooks instead. Thanks for the advice. My app is coming together really nicely. Just need to fetch api data for recipe’s & format the data. Using hooks like useRef now to manipulate and manage my code now. Thanks much. :heart::heart:

1 Like

Ok cool would recommend react-query for data fetching and management, widely used in industry so definitely worth learning. Makes the whole process easier too.

You could fetch the data within a custom hook and return it if you like, and call it useRecipes or something

useRef is probably unnecessary in this situation

1 Like

I might recommend learning to fetch data using React only first before using external libs.

Fetching data with Effects

But I agree, react-query is nice.

2 Likes

I ended up using useState & useContext.
I have practiced fetching data but haven’t added the cooking recipes from the api to my app yet, probably will do it tomorrow. I deployed the app today although there’s still much work to do. Thanks again for all this good information too.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.