Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions4Comments35

All comments

  • SaqibDoullah• 10

    @SaqibDoullah

    Submitted

    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

    #web-components

    1

    Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

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

    Marked as helpful

    0
  • Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    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

    @DanijelAdrinek

    Posted

    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

    @moussahl

    Submitted

    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

  • P
    Patrycja• 80

    @Patrycja-dz

    Submitted

    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

    #bem

    1

    Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    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• 315

    @rohitdubey1352

    Submitted

    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

    @DanijelAdrinek

    Posted

    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

    @ozimmortal

    Submitted

    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

    @DanijelAdrinek

    Posted

    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• 40

    @Nikhilsuthar09

    Submitted

    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

    @DanijelAdrinek

    Posted

    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

    @DanijelAdrinek

    Posted

    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• 340

    @KrishnaPoddar1

    Submitted

    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

    #accessibility#styled-components

    1

    Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    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

    @DanijelAdrinek

    Submitted

    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

    #react#sass/scss

    1

    Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    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

    @KatherineMarlo

    Submitted

    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

    #accessibility

    2

    Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    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
  • Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    your animations are sick dude!

    Marked as helpful

    0
  • TheGroshin• 30

    @TheGroshin

    Submitted

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

    Just finishing the project with it looking as close to the final solution as possible. I know there are better ways of achieving the final product, reducing unnecessary code and making the product mobile friendly are the goals for the next project.

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

    Aligning the overall product to the center and making sure everything looked as close to the final product as possible, there were a lot of margin and padding tweaking.

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

    Making the project mobile friendly. While I have a faint grasp of media queries, I'm not to sure on how to actually make things accessible on mobile devices/different screen sizes.

    Qr code using flexbox for alignments

    2

    Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    Hey Groshin (hope I didnt miswrite that), I have taken a look at your project, and found some things I believe could be done better, and help you become a better web developer

    1. The body should take up 100% of user's screen, and shouldnt have any margin, to do that, you will need to add these properties: body { display: flex; justify-content: center; align-items: center; margin: 0; }

      Keep in mind, you will need to remove the margins on the card for this to work properly.

    2. To avoid confusion in the case of someone else working on the code after you, classes like image and text, should actually be called image-container and text-container, because image and text should be added to actual elements containing the image and the text, not their parent elements

    3. you should select the QR code image with a selector of .image-container > img {/** some styles **/}

      That is in case that the project grows bigger, you dont want that same style being applied to every image, and this will help you select the image you want selected instead of all of them.

    I also made a blog post about solving this problem to help anyone wanting to become a better web developer with free advice that I personally believe (maybe I'm a little bias ) will help you learn more about how to become a great web developer.

    in case you are interested, here is the link: https://dev.to/danijeladrinek/frontend-mentor-qr-code-challenge-4g9h

    I hope this helps you become a great web developer, and helps you land this awesome job! Happy coding, and if you have any questions, feel free to ask! :D

    0
  • Moussa Haloui• 10

    @moussahl

    Submitted

    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

    @DanijelAdrinek

    Posted

    hello moussahl, I really like your project and I love how similar to the design it turned out!

    however, I still managed to find some details that I think you could change, and that would help you become a better programmer, for example, you should make your body tag take up 100% of the user's screen so that the card can truly be centered like on the design. you can achieve that by giving your html and body tags a height of 100%, you should also remove all the margins on your body by adding a property of margin: 0; to your body

    you shouldnt be giving class names like container1, if you start numbering it, it can get confusing quickly, instead I propose a class name like text-container, because this container contains all of the text inside the card

    you didnt use any css variables, and css variables are a powerful tool, they are easy to use, but I wont be going into detail here, if you like, I have written a post about using solving this challenge, and some best-practices that will help you become a better web developer: https://dev.to/danijeladrinek/frontend-mentor-qr-code-challenge-4g9h

    I hope I helped you learn, and become a better web developer in this little time it took me to write this, and if you have any questions about anything I said, feel free to ask, have an amazing day, and happy coding! :)

    Marked as helpful

    1
  • martins igbadia• 30

    @Elmartinni

    Submitted

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

    I am glad I get to practice code for myself on a real task

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

    Getting everything to align properly

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

    I believe my CSS still needs a lot of work

    my first frontend-mentor project

    #accessibility

    1

    Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    Hey Martins, I have taken a look at your project and your code, and I have to say, great job, this is definitely one of the better projects I've seen!

    however, I still found places where I think you can improve, and I want to point some out to help you become a better web developer in the future, so here are some things I think you could be doing better:

    1. You should use % instead of vh and vw, if you want your body to be 100% of the screen height, just add height 100% to html and body tags instead

    2. instead of centering the card by using the div with a class of main and setting margins of auto, you can just add these properties to your body to make it center the card in it: { display: flex; justify-content: center; align-items: center; } or you can use display of grid, and place-items: center, but thats up to preference

    3. I gotta point out that CSS variables are a valuable tool to help you on your journey towards becoming an amazing web developer, you should use them to your advantage

    overall still a great project, and if you are interested in learning more, I have made a blog post about solving this challenge, and some do's and dont's in https://dev.to/danijeladrinek/frontend-mentor-qr-code-challenge-4g9h

    feel free to ask me if you have any other questions :D

    0
  • benotsman youssuf• 50

    @benotsman-youssuf

    Submitted

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

    centering img in div and do hover animations

    card ui

    1

    Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    Hey benotsman, I have taken a quick look in your code, and I have found that you you didnt use and CSS variables, didnt close the <a> tag thats right before the image of github that you added, and didnt make your card match the design, if you'd like, I actually made a post about solving this problem and avoiding some mistakes others do that I think could be useful to you, here is the link in case you want to check it out, and if you have any questions, feel free to ask

    happy coding, and best regards :D

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

    1
  • P
    jaymiyam• 330

    @jaymiyam

    Submitted

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

    Since this project has a simply layout and somewhat straightforward functionality, I was able to finish it within 3 hours.

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

    I had difficulty updating the map and marker location when user inputs a new ip address, took some time googling and going through the LeafletJS docs and found out there are different methods to set up the map and set a new view with the existing map.

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

    With the scale of the project in mind, I started without using any framework or server-side runtime. However, I have learned that it is not ideal to store api keys directly in JS files. I could not find a way to protect the key in pure client side code. Next time, I might do it differently so that I have protection of the api key.

    IP Address Tracker with Ipify API & LeafletJS

    1

    Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    As a frontend developer, I will give you some advice on how to become better and do better work, my job is to make the results as much as the design as I possibly can, with only few pixels of variation, and to do that, we take the design we get in figma, we lower the size of our browser to that size so it matches, we take a screenshot of our work, we paste it figma, reduce its opacity to 50%, and we see if what we created literally matches the design in few pixels of difference.

    Another suggestion I would give is to use JSDoc to document your code, it will make your code much more readable, here is a link to get you started: Writing Well Documented JSDoc code - Linkedin

    also, as for the issue with API key, I have a solution for you, idk if you wanna implement it this way, or some other way, but I hope this helps you: How to use environment variables in vanilla JS

    Edit: node_module should never be added to your github, you need to add that folder to your .gitignore file, the person copying the folder from github will still have package.json file, and after writing

       npm install

    the folder will be automatically installed with all the dependencies to the person's PC like that.

    also, if you need a template for your README.md files that looks good, feel free to take a look at my README.md file here!

    Marked as helpful

    0
  • RyanFoerster• 130

    @RyanFoerster

    Submitted

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

    Proud to have made it

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

    No challenges

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

    I'd like some advice on CSS and whether Scss is good.

    Solution do with HTML, CSS and SCSS

    #sass/scss

    1

    Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    Hey, I'd like to point out how you forgot add the box-shadow as the one on the design, and your card's size doesnt match the size of the card in the design, it is important to have as little distinctions between the design and the solution you provide, that is why when measuring the solution, you want to make sure you take a sceenshot (I like to do it using ctrl + shift + s), while the size of the browser is equal to the size of the design, and make sure you can put one over the other in figma, and that they match, thats how we did it on my job, and thats what you'll need to do if you end up working as a frontend developer, I hope this helps, and if you need any help, feel free to reach out to me, I will help you, happy coding, and I hope this helps :)

    Edit: if you want, I think I did a pretty good job on the project, so if you want, you can use my project and code as an example, here's the link: https://www.frontendmentor.io/solutions/just-css-and-html-its-too-small-of-a-project-to-need-ro-add-anything-Lo9rFod9_5

    if you have any questions, feel free to ask, I am here to help :D

    0
  • elsayedelbauomy• 100

    @elsayedelbauomy

    Submitted

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

    im proud of frontend monetor experince that it delever

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

    i get to qr code and its really fun

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

    i wold get good step by step for css

    QR code design

    1

    Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    the size of your card is not the same as the size of the design, you didnt add any box-shadow, the image is too big, the font-size of the text is too big, and also in px instead of rem, we usually use rem because that allows users to choose how big the text on our page will be trough their browser settings.

    usually in frontend development, you will have to see the size of the design, lower the size of your screen to that size, and take a screenshot (ctrl + shift + s), and compare it to the design in figma, and make sure it matches the design in every way, I believe here you have the perfect training ground for a task like that, and you get to show off your work to potential employers, so I suggest you start learning to do that, in css you didnt use any css variables, and sure, they arnt too useful on projects this small, but in bigger projects, they are a real life-saver.

    div with a class of box should be a tag of main to help the screen readers, the container shouldnt be the size of height:100vh; you dont even need the container, just add height: 100%; to body and html tags, and center the card in the body tag.

    anyway, still a good little project, I enjoyed going trough all the little things to try to help, if you want, here is how I finished the project, I hope you get to use it to learn from it and become a better web developer: https://www.frontendmentor.io/solutions/just-css-and-html-its-too-small-of-a-project-to-need-ro-add-anything-Lo9rFod9_5

    if you got any questions you wish to ask, feel free to reach out, I'm always here to help :)

    Hope you found this comment helpful, and happy coding friend :D

    0
  • Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    the color of background is different, your card is too big and not according to dimensions of the design, image is too big, text is too small, color of the text is not the same as on the design, code is inaccessable (pressing view code button doesnt take you anywhere), as a frontend developer, you will need to compare your work to the design by taking a look at how big the design is, making your browser screen smaller till it matches the size, then taking a screenshot (ctrl + shift + s), that you can paste in figma, making it 50% transparent, and putting it over the design, and seeing if it completely matches the design.

    I cant see how exactly you wrote code as the see code button doesnt work, but here is an example of how I did it in case you want to learn from it: https://www.frontendmentor.io/solutions/just-css-and-html-its-too-small-of-a-project-to-need-ro-add-anything-Lo9rFod9_5

    if you have any questions feel free to ask, I will answer and help you :)

    I hope you found this comment helpful, and happy coding :D

    0
  • Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    you forgot to add the box-shadow and line height doesn't match the line-height in the design (its too big)

    but so far, the best result I've seen so far, good job fam :)

    1
  • forhisglory85• 20

    @forhisglory85

    Submitted

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

    What I'm proud of:

    When first seeing the project, I immediately began to figure out in my head the layout of the page, breaking down each element visually. That process gave me the framework to begin building the structure in HTML/CSS.

    What would I do differently:

    At first, I didn't format the page properly, instead of using multiple elements, I used one for the whole container, and tried creating a border to contain the content. It was a mess. No shame, I decided to try and pick up some hints from a YT video of someone else doing the project. After seeing they had multiple elements, it clicked and I realized what I was doing wrong. From that point, the process was much smoother.

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

    My biggest challenge was going through what seemed like an endless tweaking of values in CSS and using the process of elimination to get the content as close as possible to the original design. It felt like I was just throwing stuff at the wall til something stuck.

    While that wasn't ideal, it helped me figure out what DIDN'T work, and I found that to be just as valuable as figuring out what DID work.

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

    I would like help getting a better understanding of the CSS Box Model and its function in relation to HTML elements. Looking at my CSS file, it feels like I have too many margin properties and values. I'm not sure if it needed to be quite that complicated.

    QR Code Component Project

    1

    Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    to start off, your body and html tags should be 100% of the height of the screen, you need to use one of the methods of vertically and horizontally centering the card inside the body, the card itself should prolly be the main tag, or if you're going to keep it outside the card, then make it so card is a section tag, you didnt add the colors for the texts, title being dark-blue, and paragraph being grey, the size of the card doesnt match the size of the card in the design, the space between the card and the content design would be more clean if it was padding on the card instead of margin of the content inside it, if you were using figma design, you can select and element, and hold alt to see how big the space between 2 elements is, you should also see how big the design in figma is, lower the size of your screen to that size, and take a screenshot (ctrl + shift + s) then you can paste that screenshot in figma, add 50% transparency to it, and put it on top of the design to see if it matches or not, thats how you will do the job once you are a frontend web developer.

    You should also get familiar with css variables, on small projects like these, they dont make that big of a difference, but on big projects, they are a life saver!

    anyway, it is still a good project, and I hope you found this helpfu, in case you want to check my solution out and learn from it, here is the link: https://www.frontendmentor.io/solutions/just-css-and-html-its-too-small-of-a-project-to-need-ro-add-anything-Lo9rFod9_5

    if you have any questions or need any additional help, feel free to reach out, I'm here to help :)

    Hope you found this comment helpful, and happy coding :D

    Marked as helpful

    1
  • Sare• 550

    @saseoz

    Submitted

    QR

    1

    Danijel Adrinek• 420

    @DanijelAdrinek

    Posted

    font-size is in pixels instead of rem, rem are used because it allows users to adjust the size of the text on websites, border-radius on image isnt the same as on the design, the text isnt the same size, and the distance between lines on the text under the paragraph isnt the same as in the design.

    Instead of div with a class of card, you can make it into a main tag with a class of card, to help screen readers understand where the main content is.

    css variables are not used anywhere, and I think you added a little too many comments at the top of the css file honestly, but if you like it better that way, thats fine

    I dont know how familiar you are, but as a web developer, you will need to make sure your code actually matches the design on figma, which means you will need to make the size of your browser smaller till it meets the design in figma, take a screenshot (I like to use ctrl + shift + s), copy it, paste it in figma, add transparency of 50%, and put it over the image to make sure it 100% fits the design

    Overall still a really good project, and I hope this helps, if you have any questions, feel free to ask :)

    1