All solutions

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

I am most proud of working through each challenge that was presented in the project. I started with creating a skeleton of the design and moved on to functionality. I really enjoyed learning about the various aspects of this project.

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

I encountered challenges related to form validation, custom checkboxes, and flexbox styling. I was able to learn about the above through research and trial/error. I was able to work through each section!

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

I would like help with the query type error message displaying on the screen. Thank you!

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

I am most proud of my code with reusable components and props state management. I learned a lot through this project and gained insight into state mangement. Additionally, I was able to achieve the design layout with TailwindCSS styling.

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

Some challenges I encountered included state management and props management. I was able to determine how to pass specific props to the Thank You component, onClick functions and updating the rating based on end user selection. I learned about these topics through research and trial/error.

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

I feel that my project turned out well! Thank you!

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

I am most proud of building the FAQ Accordion Card as I had never built an FAQ accordion before. It went pretty well.

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

I learned how to build an FAQ Accordion structure in ReactJS and TailwindCSS.

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

I was able to complete this project fairly quickly and close to the design. I enjoyed working on this project and reinforcing my knowledge of TailwindCSS, flexbox, hover states and mobile responsiveness.

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

I worked through several challenges such as learning about gradient color stops, mobile side navigation bar design and reusable card components. I was able to overcome these challenges by learning more about them and trial/error. It was fun to learn more about everything!

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

I was able to learn a lot of new information and use it within my project. I feel that I was able to understand APIs, fetching data and displaying it in ReactJS TailwindCSS.

Also, I received a high Lighthouse Report score with (3) 100 scores for web accessibility.

Additionally, I was proud of being able to make the hover glow on the button using a box shadow in a CSS file.

Overall, it was a fun and interesting project!

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

I refreshed my knowledge and learned new information on various topics:

1. APIs in Website Development - An API (Application Programming Interface) enables different software applications to share information and interact with each other. It provides a set of instructions that allow software developers to access features and functions, facilitating communication between two pieces of software. The application sending the request is the client, and the application sending the response is the server.

2. Try-Catch Block - This construct handles exceptions and errors that may occur during the execution of a block of code. The try block contains the code that might throw an error, while the catch block contains the code to handle the error if it occurs. The code inside the try block is executed line by line. If no errors occur, the catch block is skipped. If an error occurs, control is transferred to the catch block.

3. JSON Parsing - JSON (JavaScript Object Notation) parsing is the process of converting a JSON string into a JavaScript object. JSON is a data interchange format that is easy for humans to read and write. JavaScript objects allow you to easily access and manipulate the data.

4. JavaScript Object Fundamentals - An object is a collection of key-value pairs where each key is associated with a value. The values can be of any data type.

5. useEffect Hook - This hook provided by React allows you to perform side effects in function components. Side effects can include data fetching and manually changing the DOM. In this code, you want to fetch the advice data as soon as the component mounts. With useEffect, you ensure the data fetching happens right after the component is rendered. The empty dependency array ([]) ensures the effect only runs once.

6. useEffect Dependencies - The useEffect hook can take dependencies to control when the effect runs. Common dependencies include state variables, props, context values, derived values, empty arrays, and no dependencies. If you have no dependencies, the effect will run after every render.

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

I was able to finish all the requirements for the project!

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

This project was really fun to make! I enjoyed learning about all the different aspects and continuing improving my skills in ReactJS, TailwindCSS, and Vite. I was able to make my project very close to the design replica with all additional features created including mobile responsive.

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

1. Validating Email: I learned how to create a function called validateEmail that takes an email parameter. The function uses a regular expression pattern, assigned to the variable re, to validate the structure of an email address. The email is converted to a lowercase string and tested against the regex pattern using the test method. The test method returns true if the email matches the pattern, otherwise it returns false.

2. Setting Up the Email Signup Section for the Newsletter: The form element uses the handleSubmit function to manage form submission. The input element is specified for email addresses, binding its value to the email state. The onChange event updates the email state whenever the input value changes, using Tailwind CSS for styling. An error message is conditionally rendered if the error state is truthy. The submit button is configured to submit the form.

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

Any feedback is helpful! Thanks!

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

Reflecting on this project, I take pride in its outcome. I learned new concepts and reinforced my knowledge on various topics. What I found rewarding was the process of writing my README and reviewing my code. During this review, I discovered opportunities to refine and enhance my code which was great.

Next time, I would give myself more time to work through the form submission logic and code. It was more challenging than anticipated.

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

Throughout the development of this application, I gained valuable insights and learned several key concepts:

React Router Dom: This npm package uses dynamic routing in web applications, ideal for creating single-page applications (SPAs) where content is dynamically loaded based on the URL. Its benefits include enhanced speed and performance. The Router component acts as a container for all other components, while Routes define the navigation paths within an SPA. The Route component checks the current URL and renders the corresponding component, and Link is used for creating navigable links to different paths.

Email Validation: I implemented a validateEmail function that accepts an email address as its argument. This function uses validate.test(email), where validate is a regular expression that matches the basic structure of an email address, to determine if the provided email matches the expected pattern. It returns true if the match is successful, and false otherwise.

handleSubmit Function: This function is designed to process user input. It prevents the default page reload, validates the email address, and provides an appropriate response based on the input. If the validation checks are passed, it navigates the user to a thank you page.

Refactoring Code for Success Variable: During a review of my code, I noticed that I had included a success variable for conditional rendering, which ultimately was unnecessary. Initially, setting this variable to true would conditionally render a "Thank you for subscribing!" message. However, after integrating a dedicated thank you component page that appears upon submitting a valid email, I found the success variable and its associated code redundant. Removing this extraneous code streamlined the program's functionality.

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

For my buttons, I would love to create a gradient with the tomato color based on the design. Help would be appreciated!

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

I am most proud of working through the different challenges and expanding my knowledge of useState, props, flexbox, and styling options. Next time, I would focus more on the functionality of the application and then addressing the styling pieces.

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

I worked through the mobile responsive challenge, useState knowledge, flexbox styling, sidebar navigation in mobile and much more. I worked through each one individually - taking time to understand my gaps of knowledge. Overall, it was a great project.

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

I would like help with creating the functionality for the delete trash icon in the cart. I would like the icon to remove all information when selected with the statement "Your cart is empty".

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

I am very proud of the mobile responsive and desktop layouts. Additionally, my dropdown menus turned out great and are easy to use.

Next time, I would focus more on understanding the flexbox layout for the desktop navigation bar.

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

1. Extension of TailwindCSS Config File: Throughout this project, my proficiency in utilizing TailwindCSS for custom styling significantly improved. I learned more about extending Tailwind's default theme to include project-specific colors, font sizes, and fonts. This was crucial for aligning the website's design with the predefined style guide. An example of this customization involved adding unique color schemes, adjusting font sizes for readability, and incorporating a custom font family, 'Epilogue', directly into Tailwind's configuration.

2. Extending Background Color with Tailwind CSS: To ensure the background color stretches to the bottom of the page, I applied the min-h-screen class to the main in the App component. This approach guarantees that the covers at least the full height of the viewport, allowing the background color to fill the entire visible area, independent of content height.

3. Implementing Sidebar Navigation: Developing the sidebar navigation was a significant learning experience. I utilized React's useState to manage the sidebar's visibility, toggling between open and closed states upon interacting with the hamburger icon. For the mobile version, I positioned the hamburger icon at the top right, ensuring it animates in response to changes in width.

4. Dropdown Menu for Mobile Layout: For the Features section, I crafted a dropdown menu, managing its visibility through state control and an onClick event handler. TailwindCSS styling was essential, ensuring the dropdown was both visually appealing and functional.

5. Responsive Design with Media Queries: My understanding of media queries grew, particularly in making the navigation sidebar responsive. By assigning specific class names to the mobile layout and using media queries, I successfully hid the sidebar on desktop screens, applying similar strategies for mobile visibility.

6. **Understanding Tags**: I discovered that tags are void elements, meaning they cannot contain child elements and only accept attributes. This realization came while debugging an issue related to this constraint.

7. Grid Layout with TailwindCSS: I implemented a two-part grid container using ReactJS for the desktop layout, positioning the image and text content effectively. This structure was pivotal in achieving a balanced and engaging layout.

8. Flexbox Fundamentals: My project experience enriched my understanding of flexbox, from basic flex properties to more complex configurations like flex-row and justify-between. These insights were invaluable in optimizing the layout and alignment of website elements.

9. Enhancing Interactivity with Hover States: Adding hover states to buttons and text elements was my final task, where I leveraged TailwindCSS for animation and color transitions. This enhancement significantly improved the user interface, making interactive elements more engaging.

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

I would like help on how to use justify-between for the desktop navigation bar. I was able to get the navigation bar to look very good but wasn't able to get justify-between to work perfectly. Thanks!

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

I am most proud of the interactive slider tool and toggle button functionality.

Next time, I would work more on the layout and mobile responsiveness early on.

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

1. TailwindCSS Content Configuration: Initially, my tailwind.config.js file had an empty content array, which led to no styles being generated. Tailwind relies on this array to scan files for class names. By including paths to all relevant HTML, JavaScript, and JSX files, I ensured Tailwind could effectively generate the necessary styles.

2. Custom Colors in Tailwind: The project required the use of specific custom colors. I learned to extend the Tailwind configuration under the theme section to include these colors. This allowed me to use the custom colors throughout the project by referencing their keys, seamlessly integrating the design's color scheme.

3. Positioning Techniques: This project deepened my understanding of relative and absolute positioning, especially for layering images such as the background and pattern circles. Setting a container to relative positioning provides a reference point for absolutely positioned elements within it, facilitating layout control.

4. Using Images as List Item Markers: TailwindCSS doesn't directly support dynamic values in class names, which posed a challenge when trying to use an image as a list item marker. I overcame this by defining a custom class in my global CSS file and applying it within my JSX, showcasing the flexibility of combining Tailwind with custom CSS for unique requirements.

5. Building an Interactive Slider: Prior to this project, I had no experience with interactive sliders. I learned about managing the slider's state to reflect its current value and implemented an onChange event handler to update this state whenever the slider's value changed. Ensuring the input's type was set to range was crucial for the slider functionality.

6. Extending Font Sizes in Tailwind: Tailwind's predefined font sizes didn't include one small enough for a specific design requirement. I extended the Tailwind configuration to include a custom xxs font size, demonstrating the ease of customizing Tailwind to fit project-specific needs.

7. Enhancing Button Interactivity with Hover States: Adding a hover state to the "Start My Trial" button reinforced the importance of interactive elements in UI design. By utilizing Tailwind's hover: prefix, I was able to create a visually responsive button that enhances user experience.

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

I was unable to figure out how to change the range slider icon to the svg provided. I would love someone's guidance on how to do that.

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

I am most proud of the mobile responsive aspect of the application. I completed the website as mobile first and then finished it in desktop format.

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

I worked through the design, mobile responsive and hover state challenges. I was able to research and understand each concept to apply to the final website page.

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

I would like to see if my code could be refractored or improved upon with less technical debt.

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

Based on the design and layout, I am most proud of the short amount of time it took to complete. It is not completely finished based on the design replica, but very similiar. I challenged myself on this project more based on the amount of time it would take for me to complete it.

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

I encountered some incompabilities when working with TailwindCSS and Vite installment. Also, I encountered some areas of challenge with creating a table in TailwindCSS - I resolved these.

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

I would like to specific recommendations based on my code of ways to improve the design to match specifically to the replica.

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

I am most proud of my desktop design as it matches very similiar. The fonts, colors and photos are exact to the design.

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

React-router-dom understanding was challenging. I was able to educate myself and learn more how to use it within the project.

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

1. I was unable to get the small triangle on the right side of the mobile navigation bar to point to the hamburger.
2. I was unable to get the images to switch spots with mobile vs. desktop.

Thank you!

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

I am most proud of the fact that my website is very similiar to the design layout presented. I spent a lot of time working on the details from spacing, to installing the given font, to matching the colors in Coolors. Additionally, my mobile responsive design also looks very similiar to the design layout. My navigation menu and sidebar also runs very smoothly.

If I was to rebuild this project from the beginning, I would finish the navigation bar first with exact design and functionality - making sure the mobile responsive menu icon and the menu displayed correctly. I felt this was most challenging part of the project in regards to functionality of the webpage. I felt I coded the project from a top-down approach in that I built out all the big features first and then fine-tuned it. If there was something challenging and I felt that I spent too much time on it, I moved on to something else to keep my brain fresh and would come back to it later.

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

This project was both fun and challenging, providing numerous learning opportunities. I refreshed my knowledge on TailwindCSS, Vite and ReactJS.

Overall, this was a great learning experience, and I had a ton of fun building this.

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

My only feedback or question is - in my countdown section where it lists 01, 02, 03 with information and images. I was unable to get the text to stretch top to bottom all the way vertically with even spacing. How would I do this in Tailwind CSS? Thanks!