All solutions

Hi everyone! This was a great challenge to complete as it provided me practice working with APIs, form validation, and error handling. It also gave me the opportunity to work more with React and TypeScript. I'm still strengthening my skills and understanding of the library and language. Creating projects like this one, has greatly improved my understanding of working with both the technologies as well as where my skills are currently at.

There are still styling work I need to get done, more specifically the drop down menu. there is also a few other minor bugs that I'm already fixing, however this doesn't affect the performance or experience of the application. Nevertheless, it will get done!

Thank you for reading and I appreciate any and all feedback, suggestions, and questions!

This was built using React and SCSS/SASS for styling. This project was very good practice for working with react hooks, especially useState(). Utilized Git and Github for version control and deployment.

User story:

• When the user clicks on the "Mark all as read" the notification should default to 0, in this case I decided to remove the element whenever the user clicks "Mark all as read"

Added feature: Initially, the challenge had one interactive feature which was the "Mark all as read" button. However, I wanted to improve on this design and decided to add a "View Message" feature for when the user received a notification that someone has privately messaged them. This could benefit the user experience by:

• Allowing increased privacy from individual messages they receive
• Are able to toggle between show and un-show message to quickly view and un-view the message. Both for privacy and efficiency.

Any suggestions from fellow developers on how to improve my project and code is highly appreciated! Thanks!

Hello! After a 1 month break, I've finally continues & completed this intermediate challenge for the Coffeeroasters website! I built this using the React framework. I wanted more practice on creating projects w/ React as it will benefit me in the long-run as I pursue a career in Front-end Developing.

The look, feel, and functionality of the project is completed. However, there are certain features that I need and want to implement. For example, in the create a plan page, the order summary text should reflect and update the choices based on the user's selected preferences. I aim to implement the order summary pop-up, for when the user has completed their selections and wants to purchase their plan.

I very much appreciate any feedback on my code especially since I'm still in the beginning stages of learning React. I'm very much open to better code practices and structuring of files and code. I'm very much aware of the possibility of DRY code, which is something I will definitely code review myself on.

Thank you so much for reading! Have a good day!

I've been enjoying creating multi-pages. This project was built using a mobile first approach, I've recently found it to be a more seamless approach when developing through different viewports. The background images was very good practice as it required multiple bg-images, which I realized added a lot of value in terms of making my own future projects more appealing yet organized.

My current issue is really just the About page with the directors. We are instructed to layout each director in the about page and use javascript to show each director's personal mission statement. I'm still learning javascript so the furthest I got on this feature was only getting to show the first director's statement upon clicking the button to show the info. My goal was for each button to show each director's statement upon clicking.

I decided to at least make one of the director's info show, so that I'm able to layout a foundation for the mechanics of it and then build off of that. Currently, I have it so you can click the first directors button icon, the icon will spin and display the information while removing the initial content, this then timesout after 1000ms and reverts to the orginal. The timeOut feature is temporary, it's more a placeholder for when I figure out how to display and remove the info as the user clicks on each individual director.

I though by posting my version and my current issue, I could receive some feedback and suggestions! This project isn't considered done of course I will still be working on this.

I appreciate the time for reading my summary and any suggestions are 100% welcome!

Thanks!

11/1/2022 UPDATE:

The about page and the director cards now show their secondary info once the button is clicked! It is now functional. My next steps would be to learn more about form validation on the contact page. It will serve as good practice for me moving forward. I'm still cleaning up my code and removing DRY instances and adding more semantic HTML. My biggest issue was the button functionality and I'm glad I was able to get help and feedback from @vanzasetia.

Thank you all again!

Finally finished this multi-pager. This was my first official project that I completed using TailwindCSS. I did start small projects to get a feel of how to approach the design process with using tailwind, but it wasn't anything worth publishing, just sandboxing.

However, this one was a very satisfying challenge to complete. Using tailwind with this project, introduced me to a lot of new concepts and ways to restructure my design process. With tailwind, approaching projects at a mobile-first approach is vital. Of course, it is good practice to do so, whether or not you are using tailwind, but this framework really pushes that.

Given that it's my first project using tailwind, I'm certain syntax and structuring could use a lot ore refinement, that's why I am 100% open to any and all suggestions regarding that area. As well as any improvements to how to best make the project more efficient and easy to understand.

I did try out the bonus challenge for the mapping part. I used leaflet.JS API as suggested in the challenge. I find utilizing APIs a very fun challenge and something I want to get much better at using. Additionally, I used swiper.JS for the slider part of the home page.

For some reason, github pages wouldn't render all my files, only partially. So i had to publish it through netlify and connect my github repo. If there's a way to shorten that process, please let me know. I initially had a "dist" folder for all my html files and css file, but for some reason github wouldn't process it, so i had to move them all to the root folder of my project. Which solved the problem and I was able to publish everything.

Been meaning to finally finish this project. It served as great practice for creating landing pages. The desktop and mobile version for the footer was a bit frustrating to get right since most of the elements were designed and placed in very different orientations. But I was able to get it right eventually!

I also decided to use swiper.js for the slider feature for efficiency, though I would go back and implement the slider via vanilla JS just for practice and to get comfortable with JS even more.

When reviewing my code, I REALLy appreciate any suggestions on how to make it better, concise, and easy to read.

As always, any feedback is greatly appreciated. Thanks!

Been meaning to finally finish this project. It served as great practice for creating landing pages. The desktop and mobile version for the footer was a bit frustrating to get right since most of the elements were designed and placed in very different orientations. But I was able to get it right eventually!

When reviewing my code, I REALLy appreciate any suggestions on how to make it better, concise, and easy to read.

As always, any feedback is greatly appreciated. Thanks!

Updated the responsiveness of the website.

The <picture> element proved extremely useful when using the same images on different viewports. The images are now set to their designated sizes relative to the viewport size. Utilizing the picture element really improved my knowledge and awareness when it came to responsive designing.

I also did a mobile first approach and WILL continue doing a mobile first approach whenever creating projects. I was influenced by this when i first created a project using Tailwind, which is designed for mobile first approaches. I found this to be a very seamless approach when moving on to developing increasing viewports.

As always, any suggestions to my code and project is greatly appreciated. Thanks for taking the time to go through my project!

FYI: For some reason github only partially rendered my live-site page, so I had to host it on netlify.

Anyways! I enjoyed completing this project, I wanted more completed projects to showcase on my website portfolio and more practice! I appreciate any feedback and suggestions.

Thanks for viewing my project!

Loved completing this project. I had some trouble with the JS image slider. There is a few bugs that needs to fixed with the slider part. Such as:

• looping back to the first photo when the user reaches the last photo -looping to the last photo if the user clicks past the first photo

Any suggestions and feedback are very much appreciated!

Thank you!

Any feedback is highly appreciated! I currently have trouble compiling the mobile version with different screen sizes. Right now it only displays screen sizes up to 414px.

I still need to fix the issue for tablets and smaller screen sizes. I'm pretty sure it's just a compiling error on my scss files.

Thank you again!

This was my first project utilizing an API. I was very excited to start and finally finish this.

Any suggestions on best practices, such as utilizing API's, concise and more convenient SASS coding, and Javascript tips with APIs are very much welcome.

Thank you!

The only problem I am having is with the dropdown menu for the mobile design. I am very close to solving the problem. I thought about doing an input checkbox, which is where I will most likely take that route.

Any suggestions for that problem is much appreciated also any general best practices when it comes to responsiveness and writing SASS code.

Thank you!

Would love feedback on the overall mobile design such as best practices, what could've been done better.

Also any developers who are proficient in SASS, i also welcome any feedback on writing much more concise SASS code.

Thank you!

Was just curious how you would go about implementing the curvy images? I ended up creating a div and putting the image there then creating the container for the content below it and setting the background color of that container to the same color of the image.

I first thought that I could use the whole image provided into a background image and just sizing it so it fits the whole container. However this was pretty difficult, so i ended up creating separate divs and setting a display: inherit so that both the image and background colors become one.

Just wanted a different perspective on how one could go about making those curvy sections.

Thanks!!

Currently working on displaying the mobile dropdown to have a pointy top as if it were a message icon.

I had trouble setting both the hamburger menu and "sunnyside" title on the same place, but on opposite ends. (this is for the mobile version)