Your links should be anchors <a>, rather than just list items <li>. The reason why is that <a> changes the mouse behavior to indicate that something is a link. It also lets you add the actual href :)
-The text inside the <li> is not centered vertically. You could try setting align-items: center in the <ul>. I think that would fix it.
Instead of having a <div> of class "main-style", you could just use the <main> tag. All HTML documents should have a <main> tag for accessibility.
On the same note as above, you could use a more semantically descriptive tag, like <article>, for your <div class="main">. It's not necessary, but is considered to be a more accessible practice.
Nice work! I don't know XML so I can only comment on the implementation of the design.
Some feedback:
Your solution is not using the gap between elements that are defined in the design file. I find that one easy way to follow those guidelines is to try to align the auto-layout frames in Figma to containers in HTML.
The reason for this is that spacing between elements is almost never uniform. Items tend to be placed closer or further apart based on their conceptual relation to one another.
If you aren't already using Figma as a reference, I would definitely consider doing that! :)
What are you most proud of, and what would you do differently next time?
Just a fun practice experience of reading in files and sending the data to the client. Using sockets, the client pings the server and the server establishes 2 readStreams (1 json file, 1 image) and sends the updates back upstream, as well as a filesize value so a progress bar can be rendered.
What challenges did you encounter, and how did you overcome them?
Apparently FrontEndMentor has approved domains and it wasn't excited about the azure one so I set up a janky proxy static github that will re-route the user to the other site. Not ideal but seems workable enough solution for now. Any suggestions would be appreciated if there are better ways to do this.
What specific areas of your project would you like help with?
Feedback and suggestions welcomed, especially for the stated above issue.
Hey! I don't think I can give feedback specifically on what you're looking for, but rather on an element of the visual presentation.
The qr code is getting squished on the righthand side because the progress bar still has a width and is still being displayed after the animation finishes. You can fix this by appending "display: none;" to the styles when the image loads :)