All solutions

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

I'm proud of my solution to style the various list-items and their bullets/numbers without having to resort to very exotic CSS. I'm also proud of my growing understanding of, and ability to troubleshoot my code.

I took great care to try to emulate the design, based solely on the provided .jpg images, by overlaying boxes on top of the design in Figma, to be able to measure distances between elements. As of writing this, I have yet to see how my site compares to the original, when seen side-by-side on Frontend Mentor, so that will be interesting to see. I may have to make some edits, based on how it turns out.

As for what I'd do differently: I wish I'd done the mobile version first, or at least planned for it a bit better from the beginning. I ended up having to do a good bit of changes, to fix the border padding/margins. Which, as I'm writing this, I'm realising might've been easier to fix by simply changing my overall setup in HTML.

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

I really struggled with the layout for the and once the text spread across more than one line. Initially I'd used to make the beginning of the paragraphs bold, and then have the rest set as paragraphs. I then learned that it's generally not good form to even use to style your text as being bold. I then considered if I should use a custom styled or simply use. I ended up choosing the former, as I felt that the bold text was more of a stylistic element, rather than something that conveyed extra meaning.

This switched some indentation issues, I was struggling with.

The next issue was then figuring out how to vertically align the bullet points to the content when the content spans multiple lines. In the end I removed the bullet points from the list styling, and then added them back in as a custom symbol, that I could then style independently. I then made the parent `` a flexbox and set it to align-items: center;.

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

Any tips on how I can improve my code would be greatly appreciated!

I'm still very much trying to focus on Semantic HTML, so if anyone has some comments, critique or advice, then that would be great! 🙂

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

I'm most proud of how close to the original design I was able to get, using only images. I'm also quite proud of the little hover animation I created, and how I feel like I'm getting better and quicker at making these things. I'm definitely experiencing far fewer hiccups along the way, which is encouraging.

I created this using Flexbox and I am feeling fairly comfortable with it by now. However, I have yet to really delve into CSS Grid, and I feel like that is definitely something I need to learn more about, as I understand it is used to style and organise layouts as well.

I would also like to get better at using Figma, as I'm not particularly skilled at using it yet, and I'm sure there are better ways to use it, than how I used it for measuring the design elements (based purely on the pictures provided).

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

Initially I'd created the links using s and 's nested inside, but the hover state animation was causing me trouble, as I couldn't get it to change the text color as well. I then troubleshooted the issue and read up on how to work with buttons, where I learned how to style a button better, as well as learning that it's better to not use ``'s at all for external links, as it can be confusing for users of assistive technologies.

I was also struggling with the centering of the component on the live page, but I was able to troubleshoot it with Dev Tools, and found that the lack of vertical centering was due to the main container matching its height to that of the component. Adding height: 100vh; fixed this issue.

Curiously, the links in the attributions footer don't show as clickable in my VS Code preview window, but they work perfectly fine on the live page. I'm not sure why that is, but I haven't looked into it further. I use the Codeswing extension in VS Code, to give me a live preview of my pages as I work on them.

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

As always, I'd love feedback on my HTML code regarding the structuring and semantics. I'm still very much trying to learn the best way(s) to work with semantic HTML.

Also, if there's anything in my CSS code that stands out to you, as something I could improve or something that seems strange to you, I would love to know!

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

I'm quite proud of how much I learned with this challenge. I took my time to research different concepts and topics, so that I felt that I knew what I was doing. I had to change and rewrite very few lines of code along the way.

I'm also proud of the work I put into the README file, which I filled out to the best of my ability (while also learning markdown/.md syntax). I'm very happy with how the hover transitions turned out as well as my custom CSS variables.

If you're curious to read more, there's a whole README in the Github repository with a lot more detail than I'm going to go into here.

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

Honestly, there weren't many super difficult parts. I made sure to prepare for each thing I was about to work on, and when I wasn't quite sure about something, I simply studied some more.

The main challenge was implementing new concepts that I had never worked with before, like transitions and hover/active states, but I overcame that through research.

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

I'd love some feedback on my HTML structure, as I'm not entirely sure I got it set up in the most logical way.

Also, if there's anything in my HTML or CSS code that stands out to you as odd or some part that I can improve on, I'd love to know!

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

I am proud of my attention towards accessibility. It's a topic that is dear to me, and I'd ideally like to make my websites as accessible as possible, while still being able to provide beautiful designs. As such, I try to learn and pay as much attention to this aspect as I can. This was a good way to put some of the things I'd learned into practice.

I'm proud of the fact that I could tell things were off, when I was using only the provided .jpg files in the beginning, and generally going entirely by eye. I couldn't tell exactly what or how to fix things to have them look identical, however. So that is something I'd like to get better at.

I was given a challenge by my brother (who's an experienced web developer) to use SVGs for the QR code and to have it be two images on top of each other. After a lot of trial and error, plus hours of troubleshooting, I was finally able to understand the possibilities, limitations and methods of positioning for a scenario like that. I'm proud that I stuck with it and kept refining, even after I'd already considered the project to be done.

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

I really struggled to figure out if there was indeed a box-shadow or not. I thought there was, but I couldn't replicate the effect at first. Eventually I decided to play around with the figma files, and I found out that there actually was a box-shadow like I'd thought, but that it was also using the alpha value, to make it almost invisible. Once I applied this knowledge, I got the shadow effect spot-on.

I was also struggling greatly with the positioning of the QR code element itself, when trying to center it inside the blue background. After continuing my training on Codecademy, I learned more about positioning and was able to apply some of that knowledge to help fix the issues. I was still struggling with fully centering the QR element, until I thought to check the figma file, take the measurements from there and apply a "top" and "left" offset in the stylesheet, to center it within the container.

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

I would like to know if my code is generally structured well or not, and if I've made the page to a decent level of accessibility.

Also, while I used all the information I could glean from the figma files, I'm curious if that is how web developers generally use figma design files. Do you take as much information as you can from the design files and then translate that into your code, or how do you usually work with design files like that?

Is there anything in my code that I should have done differently, to either make it easier on myself or to make the code better/more easily readable?