All solutions

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

1. Implementing an accessible mobile navigation with progressive enhancement.
2. Getting the devices illustration to be aligned according to the given designs.

What would I do differently next time?

Not spending my time trying to align a decorative image to the side of the page by using img. This resulted in a constant horizontal overflow of the body on desktop which I was unable to solve. Because of this, I decided to create a div as a sibling of the introduction section to append the device illustration. Eventually, I got it working with the background-* css properties.

Supplementary information

The schedule a demo button contains a slide animation when hovered.

It was a fun project in which I learned how to work with JSON and what JSON exactly is.

I did spend some time creating the tablet and desktop grid because I struggled with implementing the correct layout.

As an extra challenge, I decided to implement a light mode version. The light mode can be toggled by pressing the toggle button in the bottom right corner. The user preference will be saved by the usage of a cookie in the browser.

I also spend some time trying to figure out the best possible colors for light mode. As a result, I had to reorganize the code base due to more CSS.

For the next project I will start to use TypeScript, in which I am currently following a tutorial.

I did not have any problems while building this project.

What I did implement is the ability to mark notifications as read separately and progressive enhancement.

To mark a single notification as read, just click on it.

Progressive enhancement

I implemented progressive enhancement to make sure most of the functionality is still working when JavaScript is not available.

Whenever JavaScript is not available, checkboxes will be shown on the right of the unread notifications. By selecting the checkbox, two things happen:

1. The notification will be marked as read.
2. The checkbox will be hidden.

The only thing that does not work is the counter. The counter remains the same number of unread notifications that the page identified when rendering the page.

For this reason, the user will be shown a notification indicating the above.

An image of both the checkboxes and notification can be found on my Github repository

This challenge was fun and quite a challenge for two reasons:

1. It was bigger than the other projects I did before
2. I haven't written that much JavaScript before

Despite the above, I did learn a lot of it such as how to implement form validation with JavaScript.

I also decided to add two more custom error messages for the card number field:

• Too short: Card number must be 16 digits
• Too long: Card number can only be 16 digits (too long)

The reason is that those error messages will be shown as soon as the user fills in the field (this is the same as other fields), and because the user can fill in a card number with or without spaces. The formatting of the latter will be done by JavaScript itself to improve user experience.

Progressive enhancement and accessiblity (ARIA) have also been implemented.

If the user does not have JavaScript for some reason, the complete navigation including the dropdown links are still reachable and usable.

I experienced this project as educational because of the following

1. I learned how to implement progressive enhancement for a (mobile) navigation
2. How to create a complex layout with Grid

Asking for feedback

Despite of this I do want to ask feedback about the following due to uncertainty of myself

1. Is the BEM naming convention used correctly?
2. Is the semantic HTML markup I used correctly?

The problem I stumbled upon

The only real problem I faced was that I could not disable scrolling when the mobile navigation was open. This caused the layout to shift slightly to the right on opening and to the left when closing. The cause of this was because of the scrollbar disappearing and appearing.

After spending some time and not being able to get this fixed, I decided to use position: fixed instead of absolute. It does the job for now, but is not exactly how I wanted it to be.

If there is someone who does know how to prevent scrolling and not causing this shift to the right and left, please let me know. I'm quite curious how this problem can be solved.

I do not have any questions but I must say that I learned quite a lot with this project.

A couple of things I learned are

1. How to work with ES6 classes and modules
2. How to work with a zero configuration build tool such as Parcel
3. How to implement the MVC (model-view-controller) architecture in JavaScript
4. How to implement the Publisher-Subscriber pattern
5. How to write documentation for functions
6. How to implement a project configuration file and use it throughout the project

Another thing I created as well is a flowchart. This is something I learned from a previous course I followed on Udemy (so I decided to create one on my own this time).

Feedback on the implementation of the MVC architecture as the error handling is welcome.

----------

As a sidenote: as soon as the user presses the button, the button disables for 2 seconds. The API returns the same advice within that time period and this might confuse the user if the user presses the button again.

The thing I found to be difficult was getting the background image to align just as in the supplied designs (both on mobile and desktop). For this reason I decided to leave it as it is because I could not get it aligned as it should.

If anyone can provide me with feedback on how to improve/fix this point, you're welcome.

It was a fun little project in which I do not have any questions.

Feel free to leave feedback if needed. It is always appreciated.

The challenge was to use a little bit of JS, but I decided to test my DOM API knowledge with this challenge. For this reason, the entire share container (with the share options) is dynamically created with JS.

There where two problems I faced:

1. This was fixing the problems that occured with registering the event listeners (because they where in conflict with each other, and I could not locate where the problem arose. I haven't really been debugging before, so this was the first time).
2. I could not find out how I could change the color of the share-icon.svg as shown in the design. As a consequence, I decided to create a share-icon-active.svg instead. I have tried filters and masks, but could not find a solution to it.

Feedback is always welcome, especially on the JS part, specifically how I attached the event listeners, because I have the feeling that this could be done better.

I do not have any questions.

Feel free to leave feedback (it is always appreciated).

Despite that I struggled with aligning both cards in the middle (which in the end was quite easy), I do not have further questions.

I have no further questions.

Feedback is always welcome.

I have no questions.

Feel free to leave feedback (it is always appreciated).

Feedback is welcome.

The only problem I could not solve is the following:

On my iPhone 13 Pro, the mobile pattern underneath the artwork is not centered horizontally, while when simulating this scenario with the Chrome DevTools is. I am not sure why this is happening, so if anyone could tell me why, I would appreciate it.

I left my old code in there as well, so I can revisit my first code if needed

I have no questions about this challenge, but you are always free to give me some tips.

While I was doing this challenge, I came up with two questions:

1. Is it correct the way I implemented BEM into my HTML?
2. Did I implement my structured data correctly? I could not figure out at first whether I should use the schema.org Product type or Offer type, so I decided to go with Product.

Thanks in advance!

I have no questions about this challenge, but you are always free to give me some tips.

UPDATED ON 20/07/2022:

I added structured data in the JSON-LD format for the fictitious product, so I could learn how to implement structured data into my work.

I have no questions about this challenge, but you are always free to give me some tips.

What I learned and the things I should keep in mind can be found in the README.md file on my GitHub repository.

A couple of questions:

1. Are there any remarks on how I implemented HTML(5) in my index.html? Like, would you do it in another way, and why?

2. Are the comments I defined within my stylesheet clear, or is there a different way I should use them?

3. What about my written CSS in general. Are there any remarks on that?

I also created an alternative solution to the raster image that has been used for the QR code (supplied by Frontend Mentor). This alternative solution can be found in the README.md in my GitHub repository.

In the README.md file (on my GitHub repository), you can find information such as:

1. Which languages and tools I used to build the challenge
2. What I learned
3. Things I should keep in mind for the next challenge
4. My continued development

However, there are some questions I have, which you can find below:

1. Are there any remarks about how I implemented the HTML5 markup? Like did I use <header>, <article>, <section> etc. in the right way?
2. Should I have been using a <h1> in both cases or <h2>? (In this case I used both a <h2>, because I know that you are only allowed to use a <h1> once, and found it quite odd to use a <h1>, and for the thank you card a <h2>)?
3. Are there any remarks on the way I used whitespace in both HTML and JavaScript?
4. What about my comments? Did I describe them clearly? Or did I use too much of them?
5. The boolean condition I used on line 97 (index.html), is this clear enough? Or should I have been doing this maybe in another (better) way? Like, how would you have written this condition?
6. Do you have any other tips or things for me which I should keep in mind?

And at last, thank you for taking your time to check the solution of my challenge. I really appreciate it!