Skip to content
OverviewSolutions
20
Comments
9
Darionas
@Darionas

All comments

  • Darionas•320
    @DarionasPosted 7 months ago

    Hey, You have made excellent coding. I like you peace of work. But you should follow accessibility pattern. *There should be header, main, and footer on the page. *In one of the mentioned elements must be just one h1 element. *As links navigate to another view, <a> element should be used as a button element.

    Happy coding ;)

    0
  • Darionas•320
    @DarionasPosted about 1 year ago

    Hey, JakMiro!👋

    Congratulation on completing this challenge. 🎉

    Here are some suggestions:

    • Page is not fully responsive. If you open Web developer tools on browser and check on 280 x 650 device size you will see that your page is out of screen.
    • It will be good practice to have Readme.md file. It will be good introduction to your repository. How to use Markdown, which tools to use: online editor or regular code editor.
    • Instead div's use semantic elements for accessibility (header, nav, main, aside, section, footer), because of people diversity. Disable people will be able to use your page.
    • On page must be at least one h1 heading. Sometimes it makes sense to add content just for screen readers (hide heading). This is such a case. A common practice is to use a CSS class .sr-only, where sr means screen reader. For that heading set class 'sr-only', and on CSS file hide it. It is a matter of accessibility.
    • If you add a decorative SVG image with the <img> element, you must add an empty alt attribute (on icon-music.svg image).

    I hope this helps. Happy coding! 👍

    0
  • Darionas•320
    @DarionasPosted over 1 year ago

    Hey, j-ferber. You have done god job. It works for mobile layout god as well. But there are same points for improvement:

    • Instead of '<h1><h2>Improve your front-end skills by building projects</h2></h1>' two headings in one declaration, use just one h1 heading. One h1, two h2, three h3, more than three h4 and so on headings, per page. It is as rule.
    • img element must have alt attribute.

    Happy coding ;)

    0
  • visualdennis•8,375
    @visualdennissSubmitted over 1 year ago

    🔥 Here is my 30th Challenge! This was fun and tricky! 🔥

    • Built in React and made use of Context API for state management.
    • App is fully responsive for all devices.
    • As usual the data JSON is being hosted online on npoint.io so i fetch using axios. Sometimes the server is overloaded, you might need to refresh couple times.

    I've added some more features to the challenge:

    • You can switch between logged in users by clicking avatars top-right. So you can create comments, replies from perspective of different users.
    • I've developed a VOTE system (was the trickiest part for me), so multiple users can vote, change their votes and when switched users, the vote scores and the users vote are persisted between user switches. (Votes are stored as an object)
    • Added some cute loader animation on initial load.
    • You can toggle Dark/Light modes.

    This is still a work-in-progress, next i plan to refactor my code using useReducer and tidy up the function, improve accessibility/semantic stuff, localStorage implementation, perhaps a notification system for users when they are being replied to, a function for real/dynamic timestamps.

    If anyone interested in how i've built this step by step, i recommend checking MY WORKFLOW

    Hope you guys like the final result ♥️

    👾 Animated Interactive Comments | React | Dark Mode | Switch Users 👾

    5
    Darionas•320
    @DarionasPosted over 1 year ago

    Hey. I like it. One think especially 'desktop-design-breakdown.jpg'. Could I borrow this method from you?

    Thanks in advance. Happy coding ;)

    1
  • Diego Pasaye•570
    @DiegoPasayeSubmitted almost 2 years ago

    Hi guys, this is my solution, i have a question... What unit of measurement do you use?, i try use % and vw but they tell me it's wrong

    articlePreview

    2
    Darionas•320
    @DarionasPosted almost 2 years ago

    Hei there, Avoid using of pixels, use rems, vw, ems. They let's scale better, what is very important for responsive design (RWD).

    Happy coding.

    0
  • Patryk Sz•210
    @dedkuSubmitted almost 2 years ago

    Hi there!

    Here's my solution for this challenge. It is my pleasure to hear your feedback.

    Question: How to hide images under the background? Im missing somethinh here.

    Cheers!

    FAQ accordion card

    1
    Darionas•320
    @DarionasPosted almost 2 years ago

    Hei. For hiding image or its part, use css z-index property. But here is one very important moment. This property has to be set with position property. For more details read here: https://www.w3schools.com/css/css_z-index.asp

    0
  • Laissaf•60
    @faissal-aLSubmitted almost 2 years ago

    I didn't know how to change the color of the icon, can anyone tell me how to do it? any other feedback is also welcomed. Thank you all !

    article preview component

    2
    Darionas•320
    @DarionasPosted almost 2 years ago

    Hei. Open svg file with code editor and change fill property with desirable collor, and save it as amother file. Make path to this file. Tada, color of your icon will be changed. Happy coding and Marry Cristmas.

    1
  • Darionas•320
    @DarionasSubmitted about 2 years ago

    Hello. I am not confortable with choosing which responsive layout system to use when I start new webpage. There are several of them with some advantages and disadvantages. Mey be somebody knows the source where I can read more in details about that. Thanks

    Responsive web image

    2
    Darionas•320
    @DarionasPosted about 2 years ago

    Thank you @tak124 and @Phil from Discord w3schools server for some notes. Code was updated according all notes. ;)

    0
  • Darionas•320
    @DarionasPosted about 2 years ago

    Hello @javina89, congratulations on your solution! The result look good. You did a good job here. I’ve some suggestions for you:

    1. It is good practice to set Solution URL to provide community members see your code and make feedback for your. It is several ways to do that https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248
    2. Card container is not centered vertically. The one of the way to do this is using flexbox method. It lets center elements horizontally and vertically. Read here: https://www.w3schools.com/howto/howto_css_center-vertical.asp

    I hope this helps you and happy coding!

    0