All solutions

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

I feel proud of this project since I think I was able to finish it in no time and I think I was able to make it real close to the actual solution.

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

There was a moment when I find myself stucked with the fact that I always want to keep the attribution section and sometimes that breaks a little bit the entire layout. So my first approach left the entire QR card section sticked in the top of the page and the attribution at the very bottom of the page (which I obviously wanted in the first place except don't want the card be at the top of the page).

So, in order to solve this what I did was to just set the attribution a fixed position at the bottom:

.attribution {
/* other code */
position: fixed;
bottom: 0;
}

And that did the trick :)

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

I'd like to ask the community to help me how can I use ARIA/HTML5 semantic markup to make it more accessible.

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

• When adding the blog title I added first the h2 and inside I added an a tag. I'm not completely sure if that's correct or if there's another approach for it keeping in mind that I still want it to be accessible.

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

• What would be the best way to handle the items in the list? I used anchor HTML tag but would it worth to use buttons?
• What approach did you recommend for desktop? I only increased the padding but it's almost not noticeable.

• I wasn't able to figure out how I can push the images on the "Technology" page to the very right of the page to make it touch the border of the browser. How can I achive that?
• I have some weird bugs on the tabs in the "Technology" page and I had to make some minor adjustments in the code to make it work. Does anybody have an idea about how can I tackle that? (Sometimes it doesn't update the content and the image)

• What other reset css properties should I add?
• Is the markup of the HTML clear enough or did I add a lot of "div"'s?
• Could I add a more generic HTML tags/CSS properties?

I tried to make it mobile first and may be I missed something, if you have any comments or suggestions, are more than welcome.

Any comments, thoughts, improvements you could add to my solution?

I've used only flexbox and instead of using pixels (only for the border radius) I've used "em"s only. Please let me know any feedback on my solution, would appreciate it.

I made some tests using the Firefox developer tools and also using the "Responsive Design Mode" and looks amazing, but when I close the dev tools, the slider controls moves to a different location, does anyone know how to add DPI to media queries? Which breakpoints did you use? I used only one and a couple of techniques to make the image and the quote to keep on the same level, but I'd like to know of anyone used more than just one breakpoint.