All solutions

What are you most proud of, and what would you do differently next time?

I'm proud of the way I structured my file similarly to how a larger real-world application would be organized. I broke down the app into components and filed them into corresponding folders. Next time I will create a "UI" folder in my "components" folder for any globally shared components and continue my current approach which was to organize each component per the page/section the components are unique to.

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

My two main challenges were state management and prop drilling. At first, I initialized the state in a child component of a parent component which needed to be re-rendered which prevented the app from behaving the way it was intended. I took a step back to physically draw my DOM structure and realized the issue. Once I initialized the state in the correct component, passing the props down to the children components that needed them made me a bit nervous at first but once I saw the correct results, I realized how simple it was.

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

As of now, I'm confident I understood the projects and the actions I took to create a solution. Deploying my app on GitHub Pages was sort of tricky but once I realized there was a Vite plugin to simplify the process, I just followed the documentation step by step, solved the problem, and learned why my app wasn't deploying properly in the first place.

What are you most proud of, and what would you do differently next time?

I've been excited to write Javascript functionality and I'm proud I didn't have any difficulty with it. I'm most proud of solving the styling of the social icons element and positioning it correctly. Next time I will try to make my design more exact as I know this current version isn't perfect.

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

The main challenge I encountered was styling the social icons element. I tried several methods and did some research online until I found a solution that worked.

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

I'm just curious if Tailwind-CSS has any limitations. Is Tailwind commonly used in real world paid projects?

What are you most proud of, and what would you do differently next time?

I am most proud of my improved ability to read documentation and gather the correct tools to create a solution for my project. Solving real-world design problems has improved the quality of my learning. Next time I will try to improve the speed at which I produce a design.

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

The main challenge I encountered was getting the 5th grid item to the 4th column and occupy 2 rows. I familiarized myself with col-span, row-span, col-start and col-end by reading the Tailwind documentation.

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

The general sizing of the project as a whole has been confusing me. I'm hoping I got this one correct with margin-top auto and margin-bottom auto but if the size of the project is still disproportionate then I could use an explanation.

What are you most proud of, and what would you do differently next time?

I'm proud I learned how to use grid with more precision. Next time I will add additional breakpoints (in this case for the text size of the h1 tag) where needed. I noticed the title could use an increase in size on the mobile version.

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

Surprisingly, this project went smoothly. I just kept the flow of working and solved each section step-by-step. I did overcome an issue I had from my last project, browser compatibility. I used Arc to preview my work and it transitioned nicely to other browsers.

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

I don't need help on this project.

What are you most proud of, and what would you do differently next time?

I'm proud of the new HTML and CSS tricks I learned while styling this project. Some of the things I learned were proper HTML semantic, using the Picture and Source HTML elements, more familiarized with Media Queries, CSS Custom Reset, and delivered a near-perfect design (on Google Chrome).

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

The main challenge I encountered was multi-browser support. Currently, my project only looks the way I intended it to on Google Chrome but I did learn a few ways i can fix it in the future including but not limited to Autoprefixer or sites like BrowserStack.

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

I would like to better understand multi-browser support and know why my design looks correct on Google Chrome but not on other browsers like Firefox, Brave or Arc.

What are you most proud of, and what would you do differently next time?

I'm proud to have grasped the usage of Tailwind so quickly and am impressed at their documentation and how easy it was to lookup syntax solutions. What I would do differently next time is study layouts a bit more so the concept really sinks in.

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

Some challenges I encountered were styling the decimal/disc bullet points without styling the text in the element, styling the image so the padding and rounded border radius were removed on smaller screens and solving the tailwind grid for the Nutrition section. I overcame most of these challenges by reading the Tailwind CSS documentation. I needed to Google a bit for more specific issues like styling the bullets in the ordered and unordered list elements.

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

I wasn't sure if the article, at 100% window zoom, was supposed to be positioned with a top and bottom margin or if the margin need only to persist when the screen view was shrunk, to say, 75% zoom. Needless to say, I had trouble centering the article as a whole at 100% window focal view.

What are you most proud of, and what would you do differently next time?

I'm proud at how the design turned out overall. I used Tailwind CSS in two different ways. My first go, I installed Tailwind using node.js, imported the custom fonts from the assets folder along with the color hex codes into the tailwind.config.js file and used them as my custom palette. The second attempt, I brought in Tailwind and the Inter fonts via CDN import.

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

The main challenge was the tailwind custom font and color palette control. It was much cleaner to just import from a CDN for a small project like this Social Links Profile mockup.

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

I'm confident I understood everything in this project.

What are you most proud of, and what would you do differently next time?

I'm proud to have learned how to import and use fonts from an assets folder, add delayed hover transitions for a polished design, and I'm overall happy with the way my project turned out. Next time I will take care to read the hints provided at the bottom of the Frontend Mentor assignment page. Also, I will need to study how to properly structure my code for precise CSS spacing.

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

There were a few problems I encountered and had to Google: how to import fonts from the assets folder, proper usage of flex and spacing, and also how to add transition delays for a polished feel on hover effects.

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

The primary areas I need help with are flex spacing to more precisely fit and space all content inside a div. Also, I'd like to learn more about how to scale font size with window size. Additionally, I think I can make my overall HTML and CSS structure a bit better for easier reading and accessibility.

What are you most proud of, and what would you do differently next time?

I'm most proud of completing this project without needing to rely on tutorials. I'm also excited I got to use a Figma file on the receiving end and not the creating end.

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

The main challenge I encountered was pushing my component files to GitHub without cluttering my root repository with this and other future projects. I needed to push my files outside of a folder in order to upload it to GitHub Pages. I spent some energy researching the best solution and discovered GitHub Organizations.

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

N/A