Skip to content
OverviewSolutions
4
Comments
34
Danijel Adrinek
@DanijelAdrinek

All comments

  • SaqibDoullah•150
    @SaqibDoullahSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Most Proud Of:

    Successfully implementing a responsive design that works seamlessly across different devices and screen sizes. Maintaining clean and organized code throughout the project which makes it easier for others to understand and contribute. Would Do Differently Next Time:

    Invest more time in testing accessibility features to ensure the component is usable by everyone, including those with disabilities. Explore and integrate more advanced CSS techniques or frameworks to enhance the visual appeal and interactivity of the component.

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

    Challenges Encountered:

    Responsiveness and Layout Issues: Ensuring that the QR code component looked good on all devices, from small mobile screens to large desktop displays. This required careful planning of CSS media queries and flexible layout techniques. Cross-Browser Compatibility: Different browsers can render CSS differently, which led to some inconsistencies in how the component appeared across various platforms. Optimizing Load Times: The inclusion of images (like the QR code itself) needed to be optimized to ensure that the page loaded quickly without sacrificing quality. Solutions to Overcome Challenges:

    Flexbox and Media Queries: Utilized CSS Flexbox for layout control, which simplifies alignment and distribution of elements. Media queries were extensively tested to ensure responsiveness at all breakpoints. Browser Testing Tools: Used tools like BrowserStack and extensive testing across local devices to identify and fix cross-browser compatibility issues. Image Optimization: Employed image compression techniques and optimized image formats (like using SVG for the QR code) to reduce the load times while maintaining visual quality.

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

    Advanced CSS Techniques: Seeking assistance with advanced CSS for animations or transitions to make the QR code interaction more engaging. Accessibility Improvements: Getting expert advice on improving accessibility, ensuring that the QR code component is fully accessible, including screen reader compatibility and keyboard navigability. Performance Optimization: Learning more about best practices for front-end performance, particularly how to further optimize the loading times and efficiency of the webpage. Testing and Feedback: Receiving feedback on the design and functionality across various devices and platforms to identify any issues or areas for improvement. Code Review: Requesting a thorough code review to ensure the code is clean, well-documented, and follows best practices.

    Responsive Design Implementation with CSS Grid and Flexbox

    1
    Danijel Adrinek•420
    @DanijelAdrinekPosted 7 months ago

    you misconfigured the github pages page, it displays your readme file instead of your QRcode component

    Marked as helpful
    0
  • Danijel Adrinek•420
    @DanijelAdrinekPosted 7 months ago

    Hey Adeleye, your solution doesnt match the design, as a frontend developer, it is a good practice to take a look at the size of the design, lower the size of your browser to that specific size, and then take a screenshot, put if over the design, and lower the opacity to 50% to make sure it matches. you also forgot the box shadow and didnt make the button get a box-shadow on hover, also your code doesnt return a random advice, it returns the same one every time, I encountered that same bug myself too, its the server, but there is still a way you can fix it:

    const id = Math.floor(Math.random() * 200);
const response = await fetch(`https://api.adviceslip.com/advice/${id}`);

    this way you will fetch an ID with a random id between 1 and 200, since the API has a bit over 200 advices, this will work in returning a random advice every time.

    1
  • Danijel Adrinek•420
    @DanijelAdrinekPosted 7 months ago

    why did you add a width of 90 to the card, when you gave the root element the exact width that the card should be?

    0
  • Moussa Haloui•10
    @moussahlSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I learned how to create responsive web design.

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

    I couldn't know the size of element of the design so i tried match it with the design.

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

    How manipulate the text as i want like i want my text in two lines and the line end with this word.

    responsive QR code with HTML & CSS using flexbox

    2
    Danijel Adrinek•420
    @DanijelAdrinekPosted 8 months ago

    happy to hear I could help dude, and ofc, here it is:

    https://dev.to/danijeladrinek/frontend-mentor-qr-code-challenge-571d

    0
  • Patrycja•160
    @Patrycja-dzSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Proud of starting frontend mentor learning path. Next time I try use pre-processor for css

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

    No challanges for that project

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

    I would like to get an honest assessment while I know that this was one of the simpler projects and it can be very difficult to isolate individual elements that need improvement or are ok

    QR Connect: Frontend Mastery

    1
    Danijel Adrinek•420
    @DanijelAdrinekPosted 8 months ago

    Hey Patrycja, I liked your project and decided to take a look at it for a bit, and I found some things I think you can improve on.

    1. You forgot to remove > that is found under the card, moving it up from the middle

    2. The text class names are for sure over-complicated for a project this small, I get where you're going with it, but its not necessary to have these long naming conventions in this project, that would be great if you were programming a shopify theme tho, but here, its okay to just name the first class card, and if you think other elements will be added, you can add in css .qr-component .title {/* CSS code */}

    3. You should add the text together in one div that should be called text-container, it makes it easier to manipulate the text like that, especially if you're good at using flexbox, and you wont need to assign separate classes to title and paragraph, you can use .card .text-container > h1 {/* CSS code */} or .card .text-container > p {/* CSS code */}

      to select these elements.

    4. Use CSS variables, they are a powerful tool to help make your code more readable and easy to manipulate

    5. The solution you provide should match the design, it is a bit complicated to understand how to do that for the first time, so if you want, I have written my own blog post on solving this challenge, where I explain how to make pixel-perfect solutions to any challenge you might be facing in the future, using this one as an example. here is the link if you want to check it out:

    https://dev.to/danijeladrinek/frontend-mentor-qr-code-challenge-4g9h

    This is still a great project, one of the better ones I have seen, but I hope these tips help you become a better web developer, and help you on your journey towards getting this amazing job! 🚀

    if you have any more questions feel free to let me know, have an amazing day, and happy coding :)

    0
  • Rohit Dubey•335
    @rohitdubey1352Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I proud of my UI Desing skills and Enhance my design skills.

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

    Noting challenges I encounter in this challenge.

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

    Code Optimization.

    Responsive QR Code Component

    2
    Danijel Adrinek•420
    @DanijelAdrinekPosted 8 months ago

    Hey Rohit, I liked your project and decided to take a look at it for a bit, and I found some things I think you can improve on.

    1. You forgot to add the box-shadow

    2. The height on your body would be better if it was in % instead of vh, but remember to add height of 100% to the html tag too for it to work (I got scolded for this on my first web dev job too)

    3. You dont need to make your card inside the main tag, you can just replace the div with the class of container with a main tag, all the main content is in it anyway

    4. Class of content could have a more common class name of text-container, thats more like the standard

    5. Use CSS variables, they are a powerful tool to help make your code more readable and easy to manipulate

    6. Even tho the solution you provided is awesome, and close to the design, us frontend developers need to be really precise, thats why, if you want, I have made a blog post about solving this solution in pixel-perfect manner, the way I was taught on my job, so if you are interested in that, here is the post, feel free to read trough it:

    https://dev.to/danijeladrinek/frontend-mentor-qr-code-challenge-4g9h

    I hope these tips help you become a better web developer, and help you on your journey towards getting this amazing job! 🚀

    if you have any more questions feel free to let me know, have an amazing day, and happy coding :)

    Marked as helpful
    0
  • ozimmortal•30
    @ozimmortalSubmitted 8 months ago
    What challenges did you encounter, and how did you overcome them?

    Trying to estimate the measurements like the width and other.I overcame them by try and error.

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

    how to make my site responsive?

    QR code component using html and css

    1
    Danijel Adrinek•420
    @DanijelAdrinekPosted 8 months ago

    Hey Ozim, I liked your project and decided to take a look at it for a bit, and I found some things I think you can improve on.

    1. You should add the text together in one div that should be called text-container, it makes it easier to manipulate the text like that, especially if you're good at using flexbox!

    2. Use CSS variables, they are a powerful tool to help make your code more readable and easy to manipulate

    3. You shouldnt have any @media queries on this project, the sizes of everything are exactly the same on the phone as they are on desktop, since nothing changes, media query isnt necessary

    4. The solution you provide should match the design, it is a bit complicated to understand how to do that for the first time, so if you want, I have written my own blog post on solving this challenge, where I explain how to make pixel-perfect solutions to the challenge.

    https://dev.to/danijeladrinek/frontend-mentor-qr-code-challenge-4g9h

    I hope these tips help you become a better web developer, and help you on your journey towards getting this amazing job!

    if you have any more questions feel free to let me know, have an amazing day, and happy coding :)

    Marked as helpful
    0
  • Nikhilsuthar09•70
    @Nikhilsuthar09Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of my self that I was able to complete my very first challenge and my design was as close as to the actual UI. I will try next time to make my code more optimized while making such responsive UI's

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

    What challenged me the most were some of the flexbox properties which I had to use to make subtle adjustments to make it look alike with the actual design.

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

    Please do let me know if my solution is working fine with large screen sizes since I was only able to test it upto 3650px and also if any improvements can be done, thankyou.

    Responsive component using CSS flexbox

    1
    Danijel Adrinek•420
    @DanijelAdrinekPosted 8 months ago

    Hey Nikhilsuthar, I liked your project and decided to take a look at it for a bit, and I found some things I think you can improve on.

    1. I would change the class name of textbox to a more conventional text-container

    2. I would remove the section tag, add height of 100% to html and body tags, then give display of flex to body instead of section, and card should be a tag of main because thats where the main content is

    3. Use CSS variables, they are a powerful tool to help make your code more readable and easy to manipulate,

    4. Add alt text to your img tag, it is never good for it to be empty, it is used to desribe what the image is off for people that have images turned off, or in case the image doesnt load properly, it is also very helpful for SEO

    5. The solution you provide should match the design, it is a bit complicated to understand how to do that for the first time, so if you want, I have written my own blog post on solving this challenge, where I explain how to make pixel-perfect solutions to the challenge.

    https://dev.to/danijeladrinek/frontend-mentor-qr-code-challenge-4g9h

    Overall still one of the better projects I have seen so fat, and I hope these tips help you become a better web developer, and help you on your journey towards getting this amazing job!

    if you have any more questions feel free to let me know, have an amazing day, and happy coding :)

    0
  • Danijel Adrinek•420
    @DanijelAdrinekPosted 8 months ago

    Hey Simon, I liked your project and decided to take a look at it for a bit, and I found some things I think you can improve on.

    1. You should add the text together in one div that should be called text-container, it makes it easier to manipulate the text like that, especially if you're good at using flexbox

    2. Use CSS variables, they are a powerful tool to help make your code more readable and easy to manipulate

    3. The solution you provide should match the design, it is a bit complicated to understand how to do that for the first time, so if you want, I have written my own blog post on solving this challenge, where I explain how to make pixel-perfect solutions to the challenge.

    https://dev.to/danijeladrinek/frontend-mentor-qr-code-challenge-4g9h

    I hope these tips help you become a better web developer, and help you on your journey towards getting this amazing job!

    if you have any more questions feel free to let me know, have an amazing day, and happy coding :)

    Marked as helpful
    0
  • KrishnaPoddar1•400
    @KrishnaPoddar1Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    It was a good exercise to start of. I would love to add animation to it to scale it up when hovered over it.

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

    None as such.

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

    What could be improved here and is the way of coding correct. Any other suggestions will help.

    Responsive QR Page using HTML and CSS

    1
    Danijel Adrinek•420
    @DanijelAdrinekPosted 8 months ago

    Hey Krishna I liked your project and decided to take a look at it for a bit, and I found some things I think you can improve on.

    1. You should remove the margin on the body, and give height: 100%; values to both the body and html tag

    2. after doing that you can add position: relative; to body tag, and position: absolute; to card, then add transform: translate(-50%, -50%); to center the card in the middle of the page.

    3. You should add the text together in one div that should be called text-container, it makes it easier to manipulate the text like that, especially if you're good at using flexbox!

    4. Use CSS variables, they are a powerful tool to help make your code more readable and easy to manipulate

    I hope these tips help you become a better web developer, and help you on your journey towards getting this amazing job, and if you want to learn more mind-blowing tips on solving this challenge, I did actually make a blog post that shows how to properly do that, so if you are interested in learning more, here is the link for that:

    https://dev.to/danijeladrinek/frontend-mentor-qr-code-challenge-4g9h

    if you have any more questions feel free to let me know, have an amazing day, and happy coding :)

    Marked as helpful
    1
  • Danijel Adrinek•420
    @DanijelAdrinekSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the resemblance of this project to the design, I wanted to make the map look like a google map too, but google wanted me to add my credit card info to get access to google maps API, which is not happening

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

    Honestly, refreshing the map after new data is passed trough context was more difficult than expected, it was my first time working with leaflet, and I found some tricks in the React Leaflet documentation that helped me overcome the problem

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

    I am grateful for any suggestion anyone can give me that would make me a better web developer!

    IP address tracker with custom marker and regex IP verification

    1
    Danijel Adrinek•420
    @DanijelAdrinekPosted 8 months ago

    For anyone watching this project, I was going to implement a Google maps layer in this map... untill Google asked me for a credit card to do that...

    Anyway thank you for understanding, have a great day :)

    0
  • KatherineMarlo•50
    @KatherineMarloSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of tackling most of the project independently, solving challenges without external help. Next time, I'd conduct thorough research before diving in, ensuring a stronger foundation for smoother progress.

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

    I encountered challenges transitioning padding and design from mobile to desktop. Utilizing Google Inspect tools, I experimented through trial and error until discovering the optimal solution. This process allowed me to fine-tune the layout effectively and achieve the desired results

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

    I'd appreciate guidance on ensuring this code adheres to best coding practices. Additionally, any insights or tips to enhance its efficiency and readability would be amazing.

    QR Code Component using CSS and HTML

    2
    Danijel Adrinek•420
    @DanijelAdrinekPosted 8 months ago

    Hey Marlo, I liked your project and decided to take a look at it for a bit, and I found some things I think you can improve on.

    1. For starters, the card size is the same on the phone and on desktop, there is no need for it to be in %, the width should be in px, and same as on the design, while the height should depend on the height of the content

    2. You should remove the margin on container, they dont do anything because the card is already centered by the body

    3. The figure tag is unnecessary because this image doesnt have a caption below it

    4. The text class should be called text-container, because its not referring to the element holding the text, but its parent

    I hope these tips help you become a better web developer, and help you on your journey towards getting this amazing job, and if you want to learn more mind-blowing tips on solving this challenge, I did actually make a blog post that shows how to properly do that, so if you are interested in learning more, here is the link for that:

    https://dev.to/danijeladrinek/frontend-mentor-qr-code-challenge-4g9h

    if you have any more questions feel free to let me know, have an amazing day, and happy coding :)

    Marked as helpful
    1