All solutions

Getting the grid right was the most challenging part of this project. I tried many different solutions for the bottom three articles, including flexbox, but in the end I realized that using grid here was the easiest solution.

This was my first time creating a responsive menu, and for this one I referred to a great tutorial by Kevin Powell. Learning a little bit about aria and data attributes was extremely helpful. Being able to use these attributes to manipulate elements with relative ease using CSS and Javascript was quite an eye-opener.

Any feedback on my usage of Semantic HTML and on the accessibility of my code would be highly appreciated.

This is my first project including Javascript. I have been practicing quite a bit with Javascript, but my experience with the DOM is extremely limited. Although I didn't experience any particular difficulties with this challenge, I can't help but wonder whether there is an easier (less convoluted) solution.

I found that the biggest difficulty was in getting the HTML and CSS to work well with Javascript. I did feel like I was forcing my way through to getting the HTML and CSS to work towards the end.

One of the most useful lessons I have learned was the way in which event listeners can be used to obtain all sorts of information about the event. I have only scratched the surface, but I am very excited to learn more.

Considering this is my first time using Javascript this extensively to manipulate a webpage, I would be particularly happy to receive feedback on my JS implementation.

Challenge number 3 done!

In this challenge my goal was to use flexbox to create a responsive layout. However, I found that it made more sense to use media queries, because the cut-off point between the desktop and mobile layout was difficult to pinpoint. I am happy with how my solution turned out, but I do wish I could've written the css more concisely. I also wonder if it would be possible to create the layout using just flexbox (or grid), without media queries.

The most difficult part for me was getting the image right. I was struggling becauce I kept having it overflow and cause unexpected side-effects (I tried using flex-wrap with disastrous consequence). The switch between desktop and mobile images was something I was wholly unaware of even being possible, so that turned out to be a good learning moment.

This is my solution to the Frontend Mentor QR component coding challenge. I initially started a junior project, but felt like it would be more appropriate to start smaller as I have very little experience.

Most of the challenge was pretty straightforward, but I struggled to get the component centered vertically. I wanted to use flexbox to do this, but I wasn't able to get it to work. Eventually I found a solution: setting the display on the body to flex, and centering it from there. In order to properly center it however, I did need to give the body a height of 100vh. It feels counterintuative to specify a height for the body. Are other solutions that are less complicated?

This is my first try at a coding challenge. I have been learning HTML and CSS on and off in 2022 and wanted to put what I have learned to the test. Unfortunately I didn't practice much for the past few months, so this challenged served as a bit of a refresher.

The most difficult part for me was getting the website to be (semi-)responsive. Because the challenge includes designs for desktop and mobile versions, my aim was to get those versions as close to the design as possible. As a result however, the inbetween state is less then ideal.

The way I tried to incorporate responsivity was by using media queries. Although this works fairly well, I felt that the code got confusing quickly as I did more and more through media queries. I feel like there should be a more elegant solution, but this was the best I could come up with considering my limited experience.

For now, I am very interested to learn more about CSS grid. I feel that if I could employ that better, I might be able to scale down the use of media queries. Besides that, the freedom and control grid offers for creating layouts is very appealing to me. I do wonder though, if it would be better to focus on writing better HTML first. Any tips would be highly appreciated!