All solutions

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

Not much to be proud this time around. Getting the desgn part done was rather easy although I made some silly mistakes that kept me stuck for a while.

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

The most challenging thing was to come up with intresting ways to animate/transition between slide changes. I ultimately ended up making the slides work as a lightbox or a slideshow, but didn't add anything fancy to it.

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

Any ideas as to how the switching of slides could be improved to be more visually interesting would be greatly appreciated.

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

I'm proud of the fact that I was able to complete this challenge using the BEM methodology and implementing it through SCSS, which made my styling much cleaner, more organized and easier to understand.

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

Two main challenges:

1. Since I used the CSS background-image property to add many of the images, I was unable to really add alt attributes. To get around this, I used aria-role as "img" and aria-label as the description of the image.
2. Again, the use of the background-image property instead of img elements made it so when I tried to add a hover state that changed the opacity of the image, it also affected the opacity of the elemet's text. I tried to get around this by using some CSS pseudo-elements, but ultimately gave up. Next time though, I will make sure tu use the proper img elements for important stuff.

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

Acessibility. I feel like I'm still unable to get the whole aria label, labelledby, expanded, etc. right.

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

Not much this time around. Just happy that I finally got around to understand what all those double underscores and double dashes I've seen in code snippets in the past were.

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

As far as challenges go, the whole idea of elements and modifiers in the BEM methodology is still not super clear to me yet.

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

Knowing if I used the BEM methodology correctly. I didn't use any Modifier for this challenge and that makes me think I'm probably not doing the BEM thing quite right.

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

I'm proud that I was able to complete the challenge with very little outside help (tutorials, artiles, etc.). The challenge took a bit longer than I expected to complete, but I'm left quite happy with the end result nonetheless. As far as things I'd do differently next time goes, I'd probably plan ahead for how I'm going to structure my HTML markup a liitle better.

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

Creating the lightbox for the desktop page and the slideshow thingy for the mobile page was tricky. However, getting one done pretty much meant getting the other one done as well, bar the thumbnails from the desktop lightbox. A How To article by W2Schools was helpful to solve these issues.

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

Just the accessibility part. I still can't wrap my head around thing like aria-expanded, aria-controls, aria-label, and the like. I feel like I'm probably not using them correctly.

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

I'm proud of how little time it took me to get the styling right. Planning ahead for how I'm gonna use Grid had been pretty tricky in the past, but this time around it all seemed much more intuitive. What I'd like to try doing differently is using button element and styling their content with the svgs rather than placing the svgs directly and using them as buttons to open/close the menu.

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

No challenges other than the fact that I still can't quite wrap my head around the whole WAI-ARIA thing. I'm pretty sure I missed some important labeling or something.

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

Checking for missing accessibility features on my HTML markup.

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

As always, I'm just proud that I was able to complete the challenge and come up with a way to have the contact form do all it was supposed to. Also, I found it tricky to use the svgs in a way that ended up looking as the design, but I eventually found out a way with some help from YouTube.

What I'd do differently next time is the form validation as a whole. The process is, I feel, unnecessarily convoluted. I have a single function in charge of validating all inputs, and I feel like it's better to have many functions do one thing very well than having one function do everything.

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

Two main ones that I actually didn't know how to solve and just ended up giving up:

1. The way I implemented the error styling made it so that whenever the border-color of an element was changed to red, said element totally lost all focusing functionallity. Given that this challenge was about accessibility, loosing the focus states is a pretty big deal.
2. My page doesn't seem to be displaying any focus states for the radio buttons. I'm pretty sure I'm missing something obvious, but at this point, my brain is fried.

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

Pretty much the above stated points. Any help with that would be greatly appreciated.

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

I'm proud of having learned how to make an accordion, since it's something I was planning on implementing on a different personal project. I had no idea how to go about making one and had to check a few different sources/tutorials, which helped me understand the different approaches that can be taken as well as how to plan for my HTML markdown with the accordion design in mind.

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

Other than not havin any idea of how to create the accordion, I just struggled a bit with the sizing of the main component. However, this time around I worried myself more with functionality than with design.

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

None that I can think of.

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

Not much this time around. Completed the challenge fairly quickly, but then again, it wasn't super hard.

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

None, thankfully.

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

The component shows what it has to, but I'm not sure if the handling of the form is right. I'd appreciate it if someone could take a look at that.

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

Next time I'd like to explore different ways to implement the percentage buttons and the firing of events associated with them. This time I added an event listener to each button through a for loop in order to stor the value of each button and use for further computation of percentages, but this presented some shortcomings that I'll explain below.

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

The biggest challenge was, as I said, keeping track of what percentage button was selected and using its associated value for calculating the percentages. Can't really say that I overcame them since the app, while doing what it has to, it only does so under certain circumstances.

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

So, here are the parts of the project that I couldn't quite implement in a satisfactory fashion:

1. In order to retrieve the value of a given selected percentage button, I looped through them and used an event listener to look for clicks on said buttons. However, both the retrieval of this value and the calculatio of percentages were coded inside the same function, meaning that the calculation is only performed when clicking on a percentage button. As a result of this, the app only works when entering values for the bill and people inputs first and then selecting the desired tip percentage.
2. In line whith the previous point, I wanted to make it so that the calculations were performed in real time as the user enters, erases or changes values. To do this I tried to create different functions for retrieveng the selected bercentage button value and for performing the calculations, bus was unable to make them work in tandem.
3. Whenever the user selects a percentage button it becomes highlighted, but if the user selects a different one without using the reset button, the newly selected button becomes properly highlighted, put the previous one doesn't go back to the default state. I could't find a way to fix this and feel like the problem lies, again, with the implementation of my functions and event listeners.

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

I'm mostly proud of the fact that I was able to complete this challenge and the time it took me to do it. The few times i had worked with the fetch API to retrieve data if found the whole process to be somewhat convoluted and intimidating, so I was expecting the completion of this challenge to take me a few more sessions than it did, but in the end I was able to implement the desired behavior quite quickly, albeit probably not in a perfect way.

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

Creating functions that would update the displayed time stats according to the selected timeframes was challenging. While it seems like my code does what it has to, coming up with the aforementioned functions was mor of a trial-and-error kind of process rather than me actually knowing what I was doing. I'd say I was mostly lucky that it worked.

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

I feel like my fetch statemant is not very well polished, specifically in terms of the handling of errors. Other than that, I realized that when opening the console on the live site, everytime I toggle through the different timeframes a lot of unchaught TypeErrors appear and, in all honesty, I have no idea what that's all about. I'd appreciate if someone could point me in the right direction in terms of mending those errors.

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

The thing I'm proud of the most it the time it took me to complete this project. The previous challenge took me more than a week to get to a point where I was somewhat satisfied, so I was expecting to take about that long to complete this one. However, this time around it only took me three days as it didn't take too many tries to get everything to work properly.

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

Nothing particularly challenging this time around. Completing this challenge wasn't a breeze, but there was constant progress at all times.

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

If anything, I'd like to improve the design of the mobile layout. I'm not completely satisfied with it.

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

Not much to feel proud of this time around since I was barely able to complete the challenge and my solution is extremely far from perfect as evidenced by the various bugs I was unable to fix. As far as what I would do differently next time, I guess I'd try to organize my markup elements in a much more concise way that also allows to retrieve them from the DOM more coherently.

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

Lots of challenges, but the biggest one was basically making the share button display different things according to the viewport size. I was able to overcome this by using the window.matchMedia() method and assinging the value of a desired breakpoint to a variable which was later used on a function that would work differently based on wether or not the screen size matched the one assigned to the variable.

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

While the solution to the problem previously outlined kind of worked, it only did so when loading the page on a certain screen size and sticking to it. Loading the page on a mobile display would make the share button work as long as one remained on that display. However, when trying to go from mobile to desktop display or viceversa, the behaviors of the button would overlap and the speech bubble meant for desktop display would show on mobile, or the SNS bar meant for mobile would show on desktop. I had no idea how to solve this problem and would appreciate some insights on what I coul do differently.

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

I'm only proud of the fact that it didn't take as long to complete this challenge as I thought.

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

The sizing of the grid was kind of hard to get right and I don't think I ultimately managed to reproduce the exact same design as the one provided. The display of elements inside the grid was also tricky.

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

Sizing of the whole page, sizing of the grid, sizing of everything. I feel like my grid, while having a fairly similar layout to the one on the model, is visibly larger.

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

I'm pretty much just proud that I managed to complete the challenge since it was my first time usong CSS Grid on a mobile-first approach.

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

Getting the number of columns and rows for my grid right was difficult as I'm not used to thinking in terms of such layouts, but a frew videos by Kevin Powell and Slaying The Dragon served as good refreshers on what I had previously learned.

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

None that I can think of right now.

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

This was the first Frontend Mentor project where I took a mobile-first approach. I think the look of the preview card for mobile and desktop screen sizes is well accomplished. Also this didn't take as much time as I thought it would, even though I could still invest a little more time in polishing some bits.

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

The whole going from mobile to desktop was a bit of a challenge. However, the trickiest part was changing the img element's src according to the screen size. Ultimately I found a simple solution, but it took me a bit of time to figure it out.

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

Same as last time, the breakpoints for media queries are still something I struggle with. Also, for the sake of brevity, I just used the breakpoints for 475 and 1024px screens, so the transition from one to the other is really messy. I intend to work on implementing a solution to make the whole transition more steadily responsive.

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

I'm quite proud of the overall design of the desktop layout as I think it's faily close to the model. The same cannot be said about the mobile layout since my use of media queries is not neccesarily elegant or clean.

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

Finding the best breakpoint for the media queries was quite hard since even adhering to some standars breakpoints didn't seem to achieve the results I wanted. Other than that, the styling of lists was done in what I believe to be a suboptimal fashin.

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

I resorted to using some awkward span elemts to style the space between the bulletpoints and the text of lists. I'm wondering if there's a better way of doing this.

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

This project took less time to complete than the previous two and I feel like I'm starting to get used to the whole GitHub thing. I probably still have to work on making my CSS more concise by using less selectors and more shortcuts to specify the values of certain properties (padding, margins, etc.).

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

I'm still not sure about the sizing for mobile displays.

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

None that I can think of right now.

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

I would go for a cleaner CSS since once again I ended up using too many properties on all my selectors. I feel like the padding and margin properties could have been reduced to a single line or a couple of them, so I'll try to fix that.

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

I was not really sure how to make the page responsive for mobile layouts without using media queries.

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

Making the layout responsive to shrink the container in size when browsing on mobile devices without media queries. Also, I'm under the impression that images don't show on the live site, so I'm not sure if I'm doing something wrong when calling the src on my index.html.

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

The thing I'm most proud of is having been able to use Git since I had no idea what it was and in the process of setting it up I thought I was gonna have to upgrade my laptop due to a lack of storage space, but I ultimately found I way I could use it without having to do any etreme changes to my setup.

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

This is the firs challenge on the learning path and honestly I'm still not sure how this whole thing works. For example, the style guide stated thet I shoulde use a certain color for the background of the page, however, that specific shade of gray was much darker that the one shown in the example jpg provided, so I was unsure about wether or not I should have strictly stuck to the design guidelines or if I could take the freedom to do deviate from it in order to better match the example design. I ultimately ended up using an online color picker to better match the design example.

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

I feel like even for such a simple project my CSS ended up using way too many selectors and rules, so I'm only wondering if there was a cleaner, more concise way of doing it. Other than that, I have no specific questions.