All solutions

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

Any feedback is appreciated

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

Any feedback is appreciated.

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

1. Implementing Flipping Card Animations:

   • For the launching countdown project, I needed to create a visually striking countdown display with a flipping card effect.
   • This was a challenging task, as I had touse a combination of HTML, CSS, and JavaScript to achieve the desired animation.
   • Through research and experimentation, I was able to master the techniques for creating the flipping card effect without the use of any external libraries or frameworks.
   • Mastering this animation technique has expanded my understanding of how to create dynamic and engaging user interfaces using core web development technologies.

2. Leveraging the JavaScript DateObject:

   • Another key learning from the launching countdown project was a deeper understanding of the JavaScript Dateobjectand its associated methods.
   • Previously, I had a basic knowledge of the Dateobject, but working on this projectrequired me to explore its more advanced capabilities.
   • I learned how touse methods like getYear(), getTime(), getDay(), and others to precisely calculate and display the remaining timeuntil the countdown reaches zero.
   • Becoming proficient with the Dateobject has equipped me with the skills tobuild complex time-based applications and handle dateandtime-related functionality effectively.

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

Any feedback is appreciated

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

Browser Local Storage Manipulation:

• One of the core things I learned was how to effectively use the browser's local storage to persist user data.
• This allowed me to store task-related information, such as the todo items and their completion statuses, even after the page was refreshed or the browser was closed.
• Mastering the localStorage.setItem(), localStorage.getItem(), and localStorage.removeItem() methods was crucial for ensuring the todo list maintained its state between user sessions.

1. Drag-and-Drop Functionality:

   • Another key learning experience was implementing a drag-and-drop mechanism for reordering the todo list items.
   • I explored techniques to detect and handle the various drag and drop events, such as dragstart, dragover, drop, and dragend.
   • This enabled users to easily reorganize the todo items by simply clicking, dragging, and dropping them into their desired order.

2. DOM Manipulation and Event Handling:

   • A significant part of the challenge involved learning how to effectively manipulate the DOM (Document Object Model) and handle various JavaScript events.
   • For example, I learned how to efficiently target and update specific elements within a container, based on their state (e.g., completed or incomplete tasks).
   • This involved techniques like querying the DOM, attaching event listeners, and dynamically updating the UI to reflect the changes.

3. Filtering and Searching Functionality:

   • Another important aspect I mastered was the ability to filter and search the todo list items based on their completion status.
   • I learned how to implement features that allowed users to view all tasks, only completed tasks, or only incomplete tasks.
   • This required understanding how to effectively process and display the todo list data based on the user's selected filter criteria.

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

Any feedback is appreciated

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

Any feedback is appreciated

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

Any feedback is appreciated

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

• The first key thing I learned was how to style custom radio buttons and checkboxes. Rather than relying on the default browser-provided form controls, I explored ways to create my own unique visual designs for these UI elements. This involved using CSS to hide the original controls and then rebuilding them from scratch using techniques like pseudo-elements, and strategic positioning. By the end of this process, I was able to craft visually appealing and consistent custom radio buttons and checkboxes that seamlessly integrated with the overall design of the project.
• The second major area of learning was form validation. This challenge required me to not only understand the HTML5 validation API, but also dive into the JavaScript validation API. Using the HTML5 validation features, such as the required, minlength and type attributes, I was able to declaratively define validation rules directly in the markup. However, I also explored the programmatic validation capabilities of JavaScript, which allowed me to dynamically check form field values, trigger validation checks, display error messages, and update the UI accordingly. Mastering both the declarative and programmatic approaches to form validation has equipped me with a well-rounded skill set for handling user input reliably and effectively.

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

Any feedback is appreciated

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

In this challenge, one of the key things I learned was how to leverage JavaScript to accurately detect the size of the user's screen or browser viewport. This involved exploring a few different approaches:

1. Using the window.innerWidth and window.innerHeight properties:

   • These properties provide the width and height of the browser's viewport, including any scrollbars.

2. Accessing the screen.width and screen.height properties:

   • These properties return the total width and height of the user's physical display device.
   • This can be helpful for making decisions based on the user's overall screen real estate, beyond just the browser viewport.

3. Utilizing media queries in conjunction with JavaScript:

   • Combining the power of CSS media queries with dynamic JavaScript checks.
   • This enables me to not only detect the screen size, but also apply appropriate styles and behaviors based on the user's device capabilities.

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

Any feedback is appreciated

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

In this challenge, one of the key things I learned was how to create dynamic charts and data visualizations using a combination of CSS and JavaScript.

On the CSS side, I likely explored techniques for building the basic chart structure, such as:

• Using div and span elements to represent the chart bars, labels, or other visual components.
• Applying styles like width, height, background-color, border-radius, etc. to shape and style the chart elements.
• Leveraging CSS positioning and layout properties to arrange the chart components properly.
• Potentially using CSS animations or transitions to add interactivity and transitions to the chart.

Then, on the JavaScript side, I was able to take this static chart structure and make it dynamic by:

• Selecting the relevant chart elements using DOM manipulation methods.
• Updating the styles of these elements programmatically, such as changing the width or height properties to reflect changing data.
• Potentially hooking into user events like clicks or hovers to trigger more advanced chart interactions.
• Using JavaScript to fetch data from source, and then updating the chart in real-time to visualize the data.

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

Any feedback is appreciated

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

In this challenge, I learned several valuable things about CSS:

1. The background property: This versatile property allows you to apply multiple background images, position values, and other settings all in a single declaration. For example, you can set multiple background images, specify their positioning, and even control the size andrepeat behavior. This can be very powerful for creating complex and visually-interesting backgrounds.

2. The background-position property: I gained a deeper understanding of this property, which controls the initial position of a background image. I learned thatit can take various values like keywords (e.g., top, bottom, left, right, center), lengths (e.g., 10px 20px), or percentages (e.g., 50% 30%). This allows for precise control overwherethe background image is placed within the element.In this challenge, I learned several valuable things about CSS.

3. Bootstrap card footer styles: I noticed thatinthe Bootstrap CSS file, the footer class within a card element has the last-child pseudo-class applied. This means thatthe styles will only be applied tothelast child element within the card's footer. This is a common technique used to target specific elements within a complex structure, like a card layout, and apply custom styles.

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

Any feedback is appreciated

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

Any feedback is appreciated

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

In this project, I encountered a challenge where I needed to adjust the color of an image.

Initially, I thought the CSS filter property could be a solution, so I explored using filters to achieve the desired effect. However, I found that the filter property was not directly applicable to this specific use case, as it didn't allow me to set the exact color I needed for the image.

To overcome this, I instead created a container with the class name "overlay" and set the background color of that container to match the desired project color. This allowed me to achieve the visual effect I was going for, without relying on the filter property.

The second key thing I learned during this project was how to leverage responsive utility classes provided by Bootstrap. Specifically, I used classes like "text-center" to align text, and various flexbox-related classes to create a flexible and responsive layout. These Bootstrap utilities helped me implement a mobile-friendly design without having to write extensive custom CSS.

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

Any feedback is appreciated

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

In this challenge, I came across some really insightful discoveries:

1. Pseudo-elements and input elements: I learned that when working with input elements, you cannot directly apply the ::before and ::after pseudo-elements to them. These pseudo-elements are meant to add content before or after an element, but they don't work the same way with `` fields. This was a new finding for me, as I had previously used these pseudo-elements on other HTML elements without issue. Recognizing this limitation for input fields is an important piece of knowledge that will help me avoid confusion and unexpected behavior in the future.
2. Email validation with JavaScript: The second thing I learned was related to the email validation function I implemented using JavaScript. I created a function that used a regular expression to check the validity of an email address. However, I initially got stuck on the logic of the if statement, as I had the condition reversed. I had written if (emailIsValid) when I should have had if (!emailIsValid). This meant that the function was returning true if the email was invalid, and false if the email was valid - the opposite of what I intended. After spending some time troubleshooting, I realized my mistake and corrected the logic. This experience has reinforced the importance of carefully testing and validating my code, especially for critical functionality like email validation.

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

Any feedback is appreciated

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

In this challenge, one of the most fascinating things I learned was how to create curved sections on a website using CSS. This involves a clever technique where you:

1. Create a section element for the content you want to have a curved edge.
2. Set the background color of that section to match the color you want the curve to be.
3. Then, you add the curved images which are created with svg before and after the section

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

Any feedback is appreciated

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

1. Revisiting foundational Grid concepts: While I had previously learned about the powerful grid and its various use cases, I realized I didn't have much practical experience applying it. When I tried to use it in this challenge, I encountered some issues. Going through this challenge allowed me to revisit those core CSS lessons and solidify my understanding by putting them into practice. Repeating and reinforcing these fundamental concepts was invaluable, as it refreshed my knowledge and made me more confident in using them going forward.
2. The importance of overflow: hidden with border-radius: I also noticed an interesting quirk with the border-radius property. When applying border-radius to a card element, I found that the border-radius didn't seem to be applied to the card's child elements. To fix this, I learned that I needed to set the overflow: hidden property on the card. This ensures that any content or child elements that extend beyond the card's borders are properly clipped, allowing the border-radius to be applied correctly. This was an important discovery that will help me create more polished and consistent card layouts in the future.

These two lessons - revisiting foundational concepts and understanding the nuances of border-radius with overflow - were invaluable takeaways from this challenge. They have strengthened my CSS skills and will help me write more robust and visually-appealing code going forward.

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

Any feedback is appreciated

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

Any feedback is appreciated

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

I worked with bootsrap card component

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

I had my first experience using the bootsrap framework while working on this straightforward challenge.