Single Website
I built a killer website using React, TypeScript, and a custom navigation solution that holds every solution for all the challenges. This isn’t just any site—it’s a powerhouse I crafted from scratch to bring all the answers together in one seamless experience.
Wow, you've turned this simple task into something really cool!
This was quite a hassle to finish, so I'm proud I did it!
What specific areas of your project would you like help with?Any help is welcome :)
Avoid using IDs for styling in css because they have the highest specificity, making it difficult to override their styles later. Use classes to style elements as classes are more flexible and maintainable.
I am really proud to manage with filtering, because it was hard for me, also i am very bad on design skills, and i will improve on it.
What challenges did you encounter, and how did you overcome them?Filters, and designing
What specific areas of your project would you like help with?If you will help me to remove unnecessary code you are welcome !
I thought you might be interested in my approach to this project. I created two separate states: one for the data (holding the filtered data) and one for the filters (the criteria used for filtering). This allowed me to manage the user's chosen filters independently from the data that is displayed in response to those filters.
I managed to get the email verification JS part to work all by myself this time! Of course, using a regex example I found online as I'm not familiar with that yet-
What challenges did you encounter, and how did you overcome them?I have used view width and height width a bit too much I believe, for certain elements that didn't even need them, just to see how it all works together. It kind of messed up my project's picture on smaller screens, so I had to overflow hidden it. I would've used pixels and such, but I wanted it to be responsive and change itself on its own when the screen width would change and all.
What specific areas of your project would you like help with?Any feedback helps!!
I noticed you used IDs for styling which is generally not recommended because IDs have the highest specificity in CSS. This makes it difficult to override styles and can lead to issues. Instead, it's better to use classes for styling as classes are more flexible and easier to override. For more information, you can look up CSS specificity.
Proud that I learnt how to use 3rd party APIs within a project.
What challenges did you encounter, and how did you overcome them?Had a few issues with running the site in firefox as it wouldn't randomise the advice, instead it would only display the first generated piece of advice. To combat this, I changed the cache setting in the fetch() command to no-store.
Any help is welcome :)
You might be interested in knowing that there's another way to handle promises using asynchronous functions. This method involves the async and await keywords, which can simplify your code.
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function]
was able to use grid and place items by what nth line it is (n/n)
What challenges did you encounter, and how did you overcome them?probably the the sizing and how will I put the positioning in grid, made a drawing in paint and realized I could position the box in between two grids by making four grids and putting in middle lines
What specific areas of your project would you like help with?just tell me where I can improve on I'll take all :-)
On smaller screen sizes, the layout collapses. Try setting the <body> element to have min-height: 100vh, which ensures the body takes up at least the full height of the viewport. Additionally, set the <main> element to have a max-width instead of a fixed width. This allows the main content to adjust within the maximum limit making it more responsive to varying screen sizes.
This is my first project using react. Any feedback will be appreciated
This is also the project where I used React for the first time. I noticed that your logic handling is straightforward and effective, definitely better than mine (if you were to check my code). For the design, I suggest wrapping the main content in a div with min-height: 100vh, applying a grid layout, and centering the items. This would ensure that the elements are perfectly centered on the page.
I feel a wee bit traumatized by this challenge - so I don't know if I can even talk about it :O ...but I will try! and FYI I used to LOVE the color orange - but now? - not so much!
The arrow icons were coming in too large and even when I went into the svg files I couldn't get them to be a reasonable size so I ditched them completely and used ❮ and ❯ instead. They aren't quite as bold but I like them. I did turn them orange when they are clicked on and turned the opposite one grey - so that was a bit of fun!
2 big problems I still have are:
If the user tries to click on a thumbnail a second time to select the Lightbox - it doesn't work - I tried location.reload(). but hate it as it jumps AND it removes anything a user might have in their cart.
Same idea, if a user messes around with add to cart etc. and comes back to it again - if they click the plus button it starts at 2 instead of 1. So to stop this I tried location.reload() again and got the dreaded jump thing AGAIN :(
Overall, I am actually happy with what I WAS able to accomplish.
I noticed that on your website, the width of the body changes at a certain breakpoint due to a max-width setting. This can affect the layout of your elements on different screen sizes. To keep everything organized, I'd recommend using a wrapper <div> as the main container for your website. Here's how you can structure it:
<body>
<div class="wrapper">
<!-- the rest of your elements -->
</div>
</body>
This way, you can manage the layout more effectively!
I like the way it's very responsive. There is a mobile, tablet and desktop version. And for big screens the whole grid is centered (horizontal and vertical). The cards have a dynamic width.
There is also a subtle animation when you hover over a card.
The grid is also dynamic, so you can add more activity cards in the HTML, but it would only look good with an even amount of cards. It would be cool to make some code to change the layout based on the number of cards.
I'm not very comfortable with JS yet, so the data is not loaded from the JSON file. Would like to learn that in the future.
What challenges did you encounter, and how did you overcome them?Challenge 1: For the desktop version I wanted to center the complete grid horizontal and vertical. I found this great solution: https://www.joshwcomeau.com/css/center-a-div/#centering-within-the-viewport-3
Challenge 2: For the medium screensize (>=690px) I wanted the profile card (first) to be same with as 2 other cards. Span column 1 and 2 wasn't enough because of the dynamic width of the cards. The first column of cards should be at the left and the second column of cards at the right. Someone helped me with this solution:
.card:nth-of-type(even) { justify-self: left; } .card:nth-of-type(odd) { justify-self: right; }
Challenge 3: Getting the icon behind the purple info container was also difficult. Just using Z-index wasn't enough. Position relative was needed.
What specific areas of your project would you like help with?I would like to learn how to get data from a JSON file in the future, a link to a good tutorial would be helpful.
To retrieve data from a JSON file, you typically use the fetch API in JavaScript. Here’s an example implementation using async-await, which is more readable compared to other methods you might encounter.
async function getData() {
try {
const response = await fetch('path/to/your/data.json');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}
getData();
For more information, you can refer to MDN Web Docs
I'm proud of successfully integrating:
And the ability to streamline form creation using React's component-based structure and the useForm hook from React Hook Form makes it easier to manage complex forms and handle validation effectively.
Any ideas for enhancing and minimizing unnecessary code are appreciated!
Thank you. 😊✌️
I visited your GitHub and browsed through your projects. I believe I can learn a lot from your code, so I decided to follow you. I hope you don't mind this unrelated comment.
turned out to be a lot more work than what i thought it would be maybe because i tried to optimize it for reusability of the code but this was a really fun challenge am going to add a backend to it later
This is really well done and looks great! After seeing this, I feel inspired to redo my project, which didn't turn out so well. I visited your GitHub and I think I can learn a lot from your code, especially your approaches and structure.
This was similar to the fylo dark theme landing page which I had just completed. So I made a better effort at the code for the media queries as I promised my self I would.
For the social media logos I used fontawesome as they seem to be the easest to change the colors. I found it interesting that they wanted them to all be pink in hover state rather than their corporate colors but I went with it.
The only thing that gave me trouble was the background image in mobile size - isn't it weird how it overlaps at the top and yet it doesn't on the mobile design jpeg. And the background color behind the background image gave me trouble until I realized that I must place it BEFORE the background image in my css. How silly I was trying to move it to the back by doing position: relative so that I could use z-index: -1 and of course that didn't work. Sometimes the simplest things get all cloudy when you are working on one of these challenges and the obvious gets stuck behind a big mountain :)
Great job! Personally, I would have used the full width of the webpage, but that’s just a preference and your choice is perfectly fine. By the way, I checked out your profile and really appreciate how you detail your struggles and achievements for each challenge. I hope you don’t mind this comment, even though it’s not particularly constructive.
