Skip to content
OverviewSolutions
46
Comments
20
Ortaly
@ortalyarts

All comments

  • Ortaly•1,060
    @ortalyartsPosted about 1 month ago

    Good job on completing this challenge!

    I have a few suggestions for you:

    1. On the gallery page, I think the images (cards) should act like links to the details page of the paintings.

    2. Each time a new details page is loaded, the items (Description text, images) appear not simultaneously, but with a little delay one after another. Was it on purpose?

    3. At the details page, at the bottom of the screen there is a little confusion: the title of the painting appears the same for all the paintings. And Instead of the name of the artist, appears the title of the painting.

    Other then this you did a good job on the development!

    I hope you find this helpful! Cheers 🍭

    0
  • Ortaly•1,060
    @ortalyartsPosted 11 months ago

    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 add flex-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 🍭

    Marked as helpful
    0
  • Sergio Cerdá Hervás•60
    @sergio-cravasSubmitted about 1 year ago
    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.

    Dictionary Web App | NextJS

    #next#react#sass/scss#typescript
    1
    Ortaly•1,060
    @ortalyartsPosted 11 months ago

    Hey @sergio-cravas, your deployment is for some reason no longer available...

    0
  • Lê Hoàng Long•290
    @JamesWallison1Submitted 12 months ago
    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!

    Simple advice generator website using HTML, CSS, JS and API

    2
    Ortaly•1,060
    @ortalyartsPosted 12 months ago

    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•590
    @MemeenaSubmitted about 1 year ago
    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.

    Frontend Quiz App using useReducer hook , React JS

    #react
    1
    Ortaly•1,060
    @ortalyartsPosted 12 months ago

    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
  • Ortaly•1,060
    @ortalyartsPosted 12 months ago

    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
    @AbhraroySubmitted 12 months ago
    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.

    Age-Calculator using Javascript

    1
    Ortaly•1,060
    @ortalyartsPosted 12 months ago

    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
    @ntshpawarSubmitted 12 months ago
    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.

    Responsive Age Calculator Page using JS and Jquery

    #jquery
    1
    Ortaly•1,060
    @ortalyartsPosted 12 months ago

    Hello @ntshpawar!

    Your solution is looking really good!

    I found some little bugs:

    1. 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 return to your function before the calculation starts if the validations fails.
    2. 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
  • Ikponmwenosa Ediagbonya•140
    @rough-diamond213Submitted 12 months ago
    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.

    QR code component solution, i used html5 and css.

    1
    Ortaly•1,060
    @ortalyartsPosted 12 months ago

    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:

    1. Set the body element to min-height: 100vh; display: flex;
    2. 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
  • Augustine Stephen Abah•60
    @ababaugSubmitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    Frontend Mentor - QR code component solution

    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.

    Table of contents

    Note: Delete this note and update the table of contents based on what sections you keep.

    Overview

    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/]

    My process

    Built with

    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:wght@100..900&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.

    Author

    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.

    QR Code Component

    2
    Ortaly•1,060
    @ortalyartsPosted 12 months ago

    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
    @laladrackSubmitted 12 months ago
    What specific areas of your project would you like help with?

    How can I align the time div to the left?

    NFT card using flexbox

    1
    Ortaly•1,060
    @ortalyartsPosted 12 months ago

    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•70
    @Selik254Submitted 12 months ago
    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.

    Responsive landing page using HTML and Css

    #web-components
    1
    Ortaly•1,060
    @ortalyartsPosted 12 months ago

    Hey @Selik254!

    Congratulations on completing the challenge!

    I have a few suggestions:

    1. 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:auto instead 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).
    1. 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.
    1. 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-face in CSS.
    • You can lear more about it here.
    1. 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
    @Cryptoguy5Submitted about 1 year ago
    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?

    FAQ-accordion-solution

    2
    Ortaly•1,060
    @ortalyartsPosted about 1 year ago

    Hey @Cryptoguy5,

    Congrats on completing the challenge!

    I have a few suggestions:

    1. 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.
    2. 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.
    3. Set cursor: pointer for the div.question, so the user knows it is clickable.
    4. Remove position: absolute from the image.plus, because it causes overlapping of text and image in narrow screens. Instead, to better arrange the div.question, try to use justify-content: space-between. This should place the h4 & the img as in the design file.
    5. 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
  • Abbas Sher•480
    @Abbassher55Submitted about 1 year ago
    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

    Devloper porfolio website using Tailwind css and React

    #accessibility#tailwind-css#react
    2
    Ortaly•1,060
    @ortalyartsPosted about 1 year ago

    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
  • cloudpc7•180
    @cloudpc7Submitted about 1 year ago
    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.

    CSS Responsive design

    1
    Ortaly•1,060
    @ortalyartsPosted about 1 year ago

    Hello @cloudpc7, Good job so far!

    Image issue - the perfume image is distorted. For this are two reasons

    1. 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>

    Read more here

    1. 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 the grid-template-columns: 1fr 1fr for your main.container like explained above.

    I hope you find this helpful! Cheers 😊

    Marked as helpful
    0
  • j7st-ralph•70
    @j7st-ralphSubmitted about 1 year ago
    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.

    nft preview component using flex

    1
    Ortaly•1,060
    @ortalyartsPosted about 1 year ago

    Hello @j7st-ralph,

    Nice job!

    I've spotted some issues with the images:

    1. 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.

    2. 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. ) .

    3. 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
  • Ortaly•1,060
    @ortalyartsPosted about 1 year ago

    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
  • Ortaly•1,060
    @ortalyartsPosted about 1 year ago

    Hello @FabianoTerdenge!

    Nice work!

    I have a few suggestions for you:

    1. 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 to justify-content: center;

    2. 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;
}
    1. 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