All solutions

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

I am proud of successfully implementing the active state design especially, between the mobile and desktop layouts.

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

I struggled implementing the mobile active state and desktop active states simultaneously. After a bit of research, I came across the matchMedia method. The method returns an object with property value pairs. I was able to use the matches and onchange properties from the object to successfully implement my solution.

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

All feedback is appreciated. I would specifically like to know the following:

1. Was my use of classes and id's correct for the JS implementation?
2. How can I improve the use of classes and id's for JS code?

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

Creating the image overlay effect was a bit challenging. I did some research on how to create the overlay effect. The solution I implemented was the creation of a parent container for the main image and overlay div elements. The parent container was positioned relatively and the overlay div element was positioned absolutely. I utilised numerous properties such as inset, background-size, background-image, background-position, and background-repeats to get the desired result where the overlay div covered the width and height of the parent container. Additionally, setting the background image to the centre of the overlay and ensuring the image does not repeat.

Overall, I am happy with the outcome of the solution.

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

As always any feedback and criticism is appreciated.

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

After styling elements with JS, the hover CSS styles were not working. This occurred because styling with JS sets the styling of an element as inline property values. Inline styling supersedes CSS file styling, therefore, causing the issue I expected.

I overcame this challenge by setting the !Important declaration at the end of the background property value declaration.

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

All feedback is welcomed.

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

I am proud of the steady improvement I have been making. I completed this challenge within 01h30m.

I would focus on creating reusable CSS custom variables for layouts to improve on my project completion time.

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

All feedback is welcomed.

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

Implementing the layout using CSS grid, whilst grid-items were also grids or flexbox components created some challenges regarding alignment. However, after some trial and error, I was able to come up with a few solutions. CSS custom variables were extremely helpful in this regard. It allowed me to maintain the flex and grid-item gaps easily.

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

Two challenges encountered:

1. Grid-item alignment for nested flex and grid-items.
2. Navigation menu

I overcame the grid-item alignment issues through trial and error. CSS custom variables were especially helpful regarding this. I was able to maintain gaps easily and ensured that the gaps for the grid-items were the same as the parent container.

I utilised online documentation and YouTube videos to resolve the mobile screen navigation menu. It was my first time creating this component.

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

As I am still learning (...and aim to continue learning) all feedback is welcomed.

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

I thoroughly enjoyed the challenge and frustration that came with it. Overall, I am proud of my solution.

What I would do differently is spend a bit more time with attempting to determine the layout options of the website and components thereof. For example, I will think about using classes, particularly why and where it would be necessary. Utilising classes has improved my overall project solution, especially with JavaScript. Overall, I will continue to improve on all my skills but I particularly need to focus on JavaScript.

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

My biggest challenge was the placement of the circle indicating a new notification. In the design solution, the circle was place on the right-hand side of the text notification, irrespective of the notification length. I solved this issue by using an HTML entity, the black circle, which I placed within a span tag. Thus, allowing the circle to display on the right-hand side of the notification text irrespective of the text length.

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

As I am still learning and enjoying this journey. Any bit of feedback will help.

If I should choose an area of two which I will require assistance with. It would be:

1. Improving my use of CSS custom variables.
2. Utilising classes/id's more efficiently.
3. Improve the HTML structure for better use of the DOM.

All feedback welcomed.

Hi guys, please provide any feedback regarding this solution. I think I used a bit too much flex.

Thanks champs

My first JavaScript inclusive challenge yet! Please provide me with feedback on the following or documentation that I could read:

1. JavaScript code
2. Semantic HTML
3. CSS styling improvements
4. Designing processes when utilising classes and ID's on HTML elements

Thank you champs.

Blog card design using CSS grid and flexbox.

Good evening, please feel to view and provide feedback related my social links profile solution. Feedback is appreciated.

Good day, please feel free to view my first FrontEnd Mentor submission. My design was focused on using CSS grid and flexbox tools to solve. Additionally, I tried using custom properties (CSS variables). Please provide feedback as it will be greatly appreciated.

Specific areas I would like feedback on:

• How can I improve my use of custom properties.
• Are there areas of improvement in writing semantic HTML.