Ortaly
@ortalyarts
All comments
Hey @omarhmitoch!
Congratulations on completing the challenge!
I have a few suggestions for you:
-
The line divider (.partOfSpeech::before) is wider as it's container. You can fix it by setting it's width to
calc(100% - 80px). -
The search icon "jumps" to the bottom when error message appears. It is because you set it's position depending on the parent's height (.inputWrapper) in percentage. When the error message is shown, the parent is higher.
-
For some search terms (like "face") there is horizontal overflow and the horizontal scrollbar appears. The reason is the .synonyms container, when it has too many synonym words inside it and is too wide. You set it to
display:flex;just addflex-wrap: wrap;to fix the case. -
Try using semantic html. For example: include text contents in <p> or <h> elements, div / span elements are non-semantic. Read more about HTML Semantic Elements.
Other then this you did a good job on the development!
I hope you find this helpful! Cheers 🍭
0-
@sergio-cravas
Submitted
What are you most proud of, and what would you do differently next time?
After researching about the Hexagonal Architecture (also known as Ports and adapters), I'm proud of have been able to implement that pattern into my project and understand the pros and cons of it in a complex framework like NextJS.
What challenges did you encounter, and how did you overcome them?
The most difficult part was to create all the context providers to allow the changes of the typography and theme.
What specific areas of your project would you like help with?
I would love to receive feedback about the folder structure and usage around the context API part. I think is an area of the code I need to refactor and it is sure there is a lot to improve.
Hey @sergio-cravas, your deployment is for some reason no longer available...
0- Lê Hoàng Long• 290
@JamesWallison1
Submitted
What are you most proud of, and what would you do differently next time?
First time doing API challenges and has finished
What challenges did you encounter, and how did you overcome them?
I had a lot of problems with api fetch, but thanks to professional ;)
What specific areas of your project would you like help with?
I think there maybe a lot so if you have any better solution, please feel free to let me konw!
Hey @JamesWallison1,
Congratulation on comleting the challenge! It looks really good!
I've noticed just a few visual mismatches:
- The word "Advice" should be uppercase.
- Also it should have bigger letter spacing, like:
letter-spacing: 5px. - The quotation is missing it's opening & closing quote signs - " ... "
Other then this - nice solution!
I hope you find this helpful! Cheers 🍭
Marked as helpful
0 - Meenakshi K• 510
@Memeena
Submitted
What are you most proud of, and what would you do differently next time?
Have used useReducer hook for the state updates. Have used data attribute for light/dark theme.
What challenges did you encounter, and how did you overcome them?
Had good learning experience in understanding the useReducer hook and updating the state variables.
What specific areas of your project would you like help with?
I need help in navigating the app through keyboard.
Hey @Memeena!
Congratulations on completing the challenge!
To navigate the page with the keyboard use: Tab / Shift+Tab, Space, Arrows and Enter keys. This navigation is only available through interactive elements (a, button, input etc.).
So the easiest way to make the elements accessible via keyboard is to use the native html interactive elements, like <a> or <button>.
You used <button> elements for the question page, so I could navigate the page using the keyboard. But for the start page (when selecting the subject) you used <div><p> which are non-interactive. Why not changing it to be like the question page?
The other (less preferred!) option is to make a non-interactive element interactive. You can read more here.
Also, for better accessibility, I would suggest to group the buttons in <ul> list.
One more little bug: it looks like the paths to the icons (incorrect / correct answer) are wrong, because they don't show up.
Above this, you did a good job!
I hope you find this helpful! Cheers 🍭
0 Hey @kodan96!
Congratulations on completing the challenge!
I have spotted one little bug: the app starts to calculate before I added/selected all the required fields, which causes it to show result as NaN. You can prevent it by adding an additional validation that will check if all the required fields are filled/selected and only then proceed to the calculation.
Also, the app should not accept "0" as value for Bill or Number of people, it causes unexpected calculations.
Above all, your solution looks really good!
I hope you find this helpful! Cheers 🍭
Marked as helpful
0- Abhradip Roy• 60
@Abhraroy
Submitted
What challenges did you encounter, and how did you overcome them?
The first challenge was how to get the current date , i found out about the date object in js and used it get over it.
What specific areas of your project would you like help with?
i need help with making the final result animative . as the user fill the day month year the final age calculate and show via animation.
Hey @Abhraroy!
Congratulations on completing the challenge!
For animating the counter of the age you can use the method explained in this article Animating Number Counters.
As for the validation, the app shouldn't allow to enter 0 or letters in the fields.
Also for better user experience, remove the red color from the labels (as in the design file) if there is no error.
I hope you find this helpful! Cheers 🍭
0 - Nitesh• 60
@ntshpawar
Submitted
What are you most proud of, and what would you do differently next time?
I made it, next time will try to take less time compared to this one.
What challenges did you encounter, and how did you overcome them?
Took some time to figure out logic which can be used to calculate difference between given dates, with proper validations.
What specific areas of your project would you like help with?
I guess there's something somewhere mistake, will be rectified soon.
Hello @ntshpawar!
Your solution is looking really good!
I found some little bugs:
- If I enter a year in the future - I get an error message, but the app makes the age calculation nevertheless :) so I get a negative result. You can just add
returnto your function before the calculation starts if the validations fails. - If I enter a date that is in the near future (like tomorrow) I don't get any error, though I should. To solve this, as part of validation, you could check if the birthday-date is greater then the current date.
I hope you find this helpful! Cheers :)
Marked as helpful
0 - If I enter a year in the future - I get an error message, but the app makes the age calculation nevertheless :) so I get a negative result. You can just add
@rough-diamond213
Submitted
What are you most proud of, and what would you do differently next time?
Been able to use the media query for the responsiveness of the webpage
What challenges did you encounter, and how did you overcome them?
it was not so much of a challenge but pushing my work to github and using github pages for my site to go live but thanks to the resources provided, it made the journey easy and i was able to accomplish the task.
What specific areas of your project would you like help with?
I had a little challenge when trying to center the qr-code so that it will be in the middle but if you look carefully the bottom is a little longer than the top, I tried using the margin though I didn't get the exact result I wanted but it was close to something perfect.
Hallo @rough-diamond213!
Congratulations on completing the challenge!
To place the div.container perfectly in the middle (independent from the width/height of the device) I would use following:
- Set the body element to
min-height: 100vh; display: flex; - Set the div.container to
margin:auto;
I would also recommend you to use padding for the .container instead of margins for the image.
I hope you find this helpful! Cheers :)
Marked as helpful
0- Set the body element to
@ababaug
Submitted
What are you most proud of, and what would you do differently next time?
This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Screenshot
Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.
Alternatively, you can use a tool like FireShot to take the screenshot. FireShot has a free option, so you don't need to purchase it.
Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.
Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.
Links
- Solution URL: [(https://github.com/ababaug/QR-code-component)]
- Live Site URL: [https://ababaug.github.io/QR-code-component/]
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Styled Components - For styles
Note: These are just examples. Delete this note and replace the list above with your own choices
What I learned
I have learnt to structure and styled a website using html and css. I have learnt to use flexbox for align the contents on a web page.
To see how you can add code snippets, see below:
Challenge by Frontend Mentor. Coded by Augustine Stephen Abah. QR Code Component Improve your frontend skills by bulding projects. Scan the QR code to visit Frontend Mentor and take your coding skills to the next level@import url("https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap"); * { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: "Outfit", sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: hsl(212, 45%, 89%); } h1 { margin: 5px; } .container { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 320px; height: 497px; background-color: white; border-radius: 20px; box-shadow: 5px 10px #12041407; } .qr-image { width: 288px; height: 288px; } .qr-image img { width: 100%; height: 100%; border-radius: 10px; } .qr-content { width: 288px; padding: 16px; text-align: center; } .qr-content h2 { font-size: 22px; margin-bottom: 15px; color: hsl(218, 44%, 22%); } .qr-content p { font-size: 15px; color: hsl(220, 15%, 55%); }If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.
Note: Delete this note and the content within this section and replace with your own learnings.
Continued development
Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.
Note: Delete this note and the content within this section and replace with your own plans for continued development.
Useful resources
- Example resource 1 - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
- Example resource 2 - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.
- Frontend Mentor - @ababaug
What challenges did you encounter, and how did you overcome them?
I found it very difficult to get the exact padding for the figma designs.
What specific areas of your project would you like help with?
I would like help with the interpreting figma designs to build a project.
Hey @ababaug!
Congratulations on completing the challenge!
As for Figma: What I use a lot is
- Getting the width and heights of the objects - by just selecting the object you can see it's measures in the right panel.
- Getting the distances between two objects to set them as margins - select one object, then hold option key (on Mac) and hover over the second object. The program will show you red number - it is the margin. Really useful :)
- The same way you can get the paddings: select the object inside some container, hold option key and hover over the container, this will show you all the paddings from this object to the container edges.
- You can also get the exact values for the shadows - select the object with the shadow > go to the "effects" panel (on the right side) > click on the sun icon next to the Drop shadow to see all the values. The effects can be applied to the group or to some object inside a group, so sometimes I have to look where it hides :)
I hope you find this helpful! Cheers :)
Marked as helpful
0- MJ Marques• 40
@laladrack
Submitted
What specific areas of your project would you like help with?
How can I align the time div to the left?
Hey @laladrack!
Congratulations on completing the challenge!
To your question: add
justify-content: space-between;to the container (div.stuff).Also please pay attention, that the
padding-bottom: 4;has no affect as in css you have to provide the measure units (like px or rem).I hope you find this helpful! Cheers :)
Marked as helpful
0 - Saidi• 30
@Selik254
Submitted
What are you most proud of, and what would you do differently next time?
The overall design looks good. Make the color more clear.
What challenges did you encounter, and how did you overcome them?
Making the color look exactly like the design given. Making the website responsive.
What specific areas of your project would you like help with?
Responsive design.
Hey @Selik254!
Congratulations on completing the challenge!
I have a few suggestions:
- I use this Box sizing rule which allow easy working with width when having paddings. Just paste it at the top of your CSS:
*, *::before, *::after { box-sizing: border-box; }2.div.container - set it to:
margin:autoinstead of fixed value of 50px. This will place your div in the middle of the screen.max-width: 250px;- this will allow the container to shrink on very narrow screens. As this is the container of the image, the image will match it's width accordingly to it (if you follow the steps below).
- The img element:
- In html alway include alt attribute (for accessibility).
- Also always include width and height in the html (this is good for the loading of the page). If you want your image to be responsive, you put the maximal value in the html (take this value from the design file) and then handle the "responsiveness" in the CSS (as described below).
- In CSS set the img to
max-width:100%; height: auto;This will make the image match it's container and preserve it's ratio. float: center;is an invalid property, you don't need it.
- Fonts -Try using the provided fonts ("Outfit" in this project).
- It is best practice to use local fonts, meaning you upload the fonts together with the other app files to the server and use
@font-facein CSS. - You can lear more about it here.
- Set the body element to have the background as in the design file:
body {background:#d6e1ef; }.
I hope you find this helpful! Cheers :)
0 - Cryptoguy5• 30
@Cryptoguy5
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud that I was able to install all of the functionality that I wanted to add to this project including adding functionality to both the enter button and spacebar.
The thing that I would do differently is that I would make sure to add a keyindex attribute at the beginning of the coding process to make sure that the app is accessible to everyone.
What challenges did you encounter, and how did you overcome them?
I encountered quite a bit of difficulty getting responsiveness from the buttons. The way that I solved it was trying to get a response of any kind from the app, and then worked to get it closer and closer to my desired action.
I also struggled to add keyboard functionality to the app as I had never done that in a project before. That challenge was overcome by doing a lot of research and trial and error.
What specific areas of your project would you like help with?
I was not able to get the min-height and max-height properties of the page to work properly. I wanted the page to expand if the user opened all of paragraphs at once, but I was not able to do this, so I just created a single set size that would work decently no matter what the FAQ height is.
Is there a way that I could get the page size to expand with the div of the FAQ? How would I do this?
Hey @Cryptoguy5,
Congrats on completing the challenge!
I have a few suggestions:
- I think you just don't need to specify the height for your accordion container (div.faq). If you remove
min-height: 65%;(line 50) it should work just fine and adjust the height automatically according to the content. - Also for your accordion container (div.faq), it might be better to set the max-width to match the design file (i.e.
max-width: 37.5rem;). This way it will not be too stretched on wide screens. - Set
cursor: pointerfor the div.question, so the user knows it is clickable. - Remove
position: absolutefrom the image.plus, because it causes overlapping of text and image in narrow screens. Instead, to better arrange the div.question, try to usejustify-content: space-between. This should place the h4 & the img as in the design file. - Alternatively to nr.4 (if you do need position: absolute) try adding padding-right to the div.question, so that the h4 wouldn't reach the img.
I hope you find this helpful :) Cheers!
Marked as helpful
1 - I think you just don't need to specify the height for your accordion container (div.faq). If you remove
- PAbbas Sher• 350
@Abbassher55
Submitted
What are you most proud of, and what would you do differently next time?
I'm thrilled to share that I've just completed this project using React and Tailwind CSS. And I'm eager to get your feedback on my work.
I'd love for you to take a look at both the React code and the Tailwind CSS implementation and provide any suggestions or improvements you might have. Your insights are incredibly valuable to me as I continue to grow and learn in this space.
What challenges did you encounter, and how did you overcome them?
In the design, i applied dark mode which was my first time and i accomplish that with using state in react.
Feel free to point out any other issues or areas where you think I could enhance the design or codebase. Your expertise would be immensely helpful as I strive to refine my skills.
Thank you so much for taking the time to review my project. Your support means the world to me!
Best regards, Abbas Sher
What specific areas of your project would you like help with?
I am new to both React and Tailwind, so I have a lot to learn. All your suggestions are welcomed
Hello P Abbas Sher!
Good job on completing this challenge!
I've spottet that your profile photo (class="h-96") doesn't preserve it's ratio: on 1140 screen it is too narrow. This is because you specify it's height for wide screens to a fixed value of
height: 550px;but it's width is only allowed to be 100% of it's container -max-width: 100%;. I would recommend to remove the fixed height of the image so it can shrink / grow according to it's container.I hope you find this helpful. Cheers :)
Marked as helpful
0 What are you most proud of, and what would you do differently next time?
What I did was write up the code for the mobile design first. I would definitely make sure that I am correctly making all designs I do more responsive
What challenges did you encounter, and how did you overcome them?
I still have concerns about my max and min widths when creating the mobile desing
What specific areas of your project would you like help with?
I would like assistance with the @media queries and like to know if I am providing the max-width to the container as well as the buttons.
Hello @cloudpc7, Good job so far!
Image issue - the perfume image is distorted. For this are two reasons
- You used mobile image for desktop screen. For this project we were provided with two images for desktop and for mobile designs. To handle this you can use <picture> tag. It allows you to make madia queries. Just example:
<picture> <source srcset=”images/40under40_full.jpg” media=”(min-width: 40em)”> <source srcset=”images/40under40_medium.jpg” media=”(min-width: 20em)”> <img src=”images/40under40_small.jpg” alt=””> </picture>- It is better to set a max-width for an image container, while for the image itself set
max-width: 100%; height: auto;. This makes your image responsive and preserves its ratio.
For designs like this I prefer to use grid. Try setting the main.container to
display: grid; grid-template-columns: 1fr 1fr;for desktop. This will provide you two equal columns for image and for div.content.As for your question about the @media queries: You just check when your design starts to be too squeezed on narrow screens and set a media query for that point. For example in this project you could set a starting point for desktop design like this:
@media screen and (min-width:40rem) { ... }and insert thegrid-template-columns: 1fr 1frfor your main.container like explained above.I hope you find this helpful! Cheers 😊
Marked as helpful
0- j7st-ralph• 70
@j7st-ralph
Submitted
What are you most proud of, and what would you do differently next time?
This is my fifth challenge and it's the fastest i have finished a challenge. i'm happy to keep improving. Please review my work and comment what i could have done better.
What challenges did you encounter, and how did you overcome them?
I have previously tackled issues on previous challenges so this one wasn't too much to handle. Please review my work and comment what i could have done better.
Hello @j7st-ralph,
Nice job!
I've spotted some issues with the images:
-
The main image (and the two icons) appear deformed (don't have consist ratio). To solve this I would recommend to remove the specified image size in px and set for the image
max-width: 100%; height: auto;This makes your image take the whole available width from its container and match the height automatically. -
Please note, it is still best practice for img tag to include width and height in html markup (provided in px). It is needed in order to avoid glitchy page jump, while the page is still loading. Because the browser doesn’t know how much space to "reserve" to each image on page until it calculates everything from css. This means, to make everything work properly, you have to provide width and height in html markup + in css (as described in no. 1. ) .
-
If your images are not just "decorative", consider to include descriptive alt tag, not just "image", to make your app accessible.
I hope you find this helpful. Cheers :)
0 -
- Jaya Surya• 270
@jayaxsurya
Submitted
What specific areas of your project would you like help with?
Your thoughts, My growth :)
Hello @jayaxsurya,
Really nice solution! It is responsive and looks good on all screen sizes.
Only one little detail: best practice for img tag is to include width and height in html markup (provided in px). It is needed in order to avoid glitchy page jump, while the page is still loading. Because the browser doesn’t know how much space to "reserve" to each image on page until it calculates everything from css. You still need to specify the image size in the CSS (like you did), but providing information about the file will help browsers render the page faster and more accurately.
I hope you find this helpful. Cheers :)
0 - FabianoTerdenge• 80
@FabianoTerdenge
Submitted
What specific areas of your project would you like help with?
Can someone help me with finding the correct styles ? Some seem slightly off from the design.
Hello @FabianoTerdenge!
Nice work!
I have a few suggestions for you:
-
I would recommend you to be a little bit more specific with the width for the main container (it is <main> in your solution). For example, from the design file I see, that the width of the main container for the desktop should be 600px = 37.5rem. So you can set the main to:
max-width: 37.5rem;Like this you prevent that the whole design gets stretches to fit wide screens. This may cause a little bug though: because the <body> is a flex, it can make the <main> shrink... To avoid this try setting the body tojustify-content: center; -
The image and the div.info won't have equal width, though you specified
width: 50%because of the padding of the .info. The paddings add width to the specified width. To avoid this just always include this fix in your CSS:
*, *::before, *::after { box-sizing: border-box; }- Little advice - try to avoid using px and use em or rem instead. There are easy online convertors for that.
I hope you find this helpful! Cheers :)
1 -
- PSamuel O. Acheampong• 230
@yawsamcode
Submitted
Hello friends kindly review my work and let me know what you think. Your feedback is welcome. Cheers
Hello @yawsamcode!
Nice job!
I have some suggestions to improve the image appearance:
-
To prevent an image appear unsharp - set the max-width for them. For example: the heigh picture with the bench in this design should be maximal 635x720 px (size taken from the Figma file).
-
Alternatively, I usually set the max-width on the image's parent element and for the image itself I set:
max-width: 100%;height: auto;this keeps the image's ratio the same for each size, not allowing it to squeeze. -
In this challenge we got for each image 2 it's variations: for normal screens (x1) and for retina (x2). On my screen I see the image x1 though it should be x2. This is another reason for unsharp appearance. To solve this you can use
srcsetattribute:
<img srcset=" examples/images/image-384.jpg 1x, examples/images/image-768.jpg 2x " alt="…">Here is a great article to this topic
I hope it you find it useful. Above all, your solution looks really nice! Cheers :)
Marked as helpful
0 -
- zeinghra• 130
@zeinghra
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of how the final design looked like. its so close to the original. and next time I will try to incorporate a CSS preprocessor like sass.
What challenges did you encounter, and how did you overcome them?
The first challenge I encountered was the email validation and I received some help from my dear friend to overcome it.
the biggest challenge was making the transition to the success message It turned out great but I'm still not sure if my solution was right.
What specific areas of your project would you like help with?
Width Problem
Styling the width of a component has always given me a headache. There are a lot of ways to choose the width of an element.
- do I Use static width? or scalable responsive width?
- do I Use media queries or
clamp()function?
please If you have my answer comment it?
Hello @zeinghra! Good job!
To your question about the width: I usually use
max-width: 58rem;(where 58rem is the value from the design file for the desktop). That works in in the most situations for me :)In addition, if not specified, I add a little left and right padding for the body for Tablet screens (i.e. 1rem), so that my component doesn't touch the edges of the screen.
One more little thing - consider adding
cursor: pointerto your buttons, so they look clickable.Other then that - really nice solution! Cheers :)
Marked as helpful
1
