Hello, Frontend Mentor community! This is my solution to the News homepage.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
Hi! Great job on finishing the challenge!
Since you feel pretty good in CSS and HTML I have suggestions for you.
Firstly: try adding transitions on active elements like navbars/ hamburger buttons (it can be simple like opacity and scale, or moving from one side using translate X or Y with transitions ease-in/ ease-in-out).
When you feel comfortable with it, try some cubic-bezier effects: here is a playground for it: https://cubic-bezier.com.
After that try animations (like rotating some elements when clicked or sth like that).
When you do that and your projects will become more dynamic- it will be time for some preprocessor like Sass.
Hope this helps, happy codind!
How can I make the responsive design simpler? It's always tiresome to undo the changes from the desktop version on the media query
Hi,
to answer your question: it's a good practice to start from mobile view and it won't be tyresome, it's less lines of code and fun:)
happy coding!
Definitely ran into some challenges with this one that discouraged me and slowed my progress. The first was in correctly positioning the main image since the mobile and desktop versions seemed to be placed in different spots per the design specs. Since using the <picture> tag seems to be a better practice to having two different <img> tags, I used media queries to affect the size, margins, and/or positioning of certain elements & containers to achieve the desired result. Though I'm satisfied with how it turned out, I wonder about best practices in this case.
I also got very slowed down and frustrated in validating the email input since most of my practice projects don't involve Javascript. Took a lot of googling but I found and utilized solutions that I'm very satisfied with. Overall, I'm happy I overcame this challenge and feel like I learned some valuable techniques from having completed it :)
Hi!
Congratulations on finishing the challenge!
You did good job with JS part of validation but please consider that if you share your code on a forum it needs to be cleaned up. Especially if you use such colorful console.logs: DDDD you wouldn't want to share this with someone who would want to hire you.
I would also try not to style anything through JS. It may cause problems in the future because JS styles overwrite CSS styles and it's hard to find in bigger projects. In JS add some class and style this class in CSS.
I would also try to improve responsiveness and get some layout for tablet version and screens bigger than 1440px.
Also fix links in documentation. I know it's a small project but it's a good habit to have (still working on it: D).
Overall good job, you overcome the problems, learn how to search for solutions and get very close to the design:)
Happy coding!
Feel free to point out all of my mistakes and downfalls
Hi!
Congratulations on finishing this challenge!
One question from user's point of view: why is there a default score? Wouldn't it be better not to submit at all and get some error message if the user haven't had picked any score?
I reviewed your repo and must admit: very nice and clean code, good documentation and close to design: )
Keep up the good work and happy coding!
the project was easy. i didnot tackle any problems
i am sure of my code i tested it many times
no
Hi!
congratulations on completing the challenge!
It sure looks good although could be centered as in design. Nice job with theme switcher.
Just tested the live version and there are 4 things that shouldn't be happening:
--if you subtract by 0 you should get an error not Infinity --if a user type 18 signs or more- it starts to overflow in X axis -- if a user try to get even 6 decimal digits and subtract it by another decimal- it starts to overflow in Y axis -- there is a problem with big numbers (I didn't get the result as in my calculator) And from user point of view- calculator should have an option to use with keybord.
Hope this helps:) Happy coding!
Just finished my notifications page. Any feedback is welcome thank you.
Hi! Congratulations on completing this challenge! Looks nice!
I've reviewed your code and have few pointers to improve it in the future:
Remove predefined styles from HTML file. If you use something like styles.css you should keep all the styles in this place. HTML is for markup, css for styling, JS for user experience.
I don't really get why but every markup element is in it's own div. It's bad for accessibility. These tags are really important for search engines and screen readers. Also keep track of your headings, don't fit them to design (like you did with h6)- you can always change fontsize, fit them to their purpose. Also 'Mark all as read' is actually a button.
You left empty classess in few places. It's easier to read code without blanks.
Try not to mix selectors in css, start from html tags and get deeper with specificity. or start from the top of document and get down, but try to maintain one method everywhere.
There are also some conflicting styles like: all the headings get font-size .9rem (probably not the best practice either) and few lines after that class heading (which is on h1) gets font-size 1.3rem.
Practice naming your functions and classes. Should be very descriptive like: function markAsReadHandler instead of read, class spandiel is hard to understand too.
There is a place for a link to your FrontendMentor profile in attribution:)
Good job with responsiveness and making it very close to design!
Hope this helps, happy coding!
Tip calculator challenge. No framework used in project. HTML5, CSS, JS.
Hi!
Congratulations on finishing the challenge!
I have two suggestions based on testing live version:
You did fix the outcome but didn't prevent the user from inputting values like: 123,567789 and they do appear as a tip value as user is typing and overflowing the container.
I can easily set No. of people and bill amount to negative numbers as well as get custom negative tip, you probably don't want that (simple min value on the input field would do the trick).
Overall nice job, happy coding!
So working on this project was very interesting, I also added the feature of not submitting the form without dropping a feedback. Built using React and SCSS/CSS
please drop suggestion and comments
Hi!
congratulations on finishing this challenge:) Looks really nice!
Few things you might find helpful: I would probably split this into two different components in React in order to get more reusable code and more logic to the project.
You are using Sass but you don't use mixins (there is a mixin file but it's empty). It's super helpfull to use them e.g. for media queries. Also variables can by anything you want, not just colors, you can get borders, border-radius, fonts, font-weights in there etc. That way you have more reusable code and make changes only in variables file. It is good practice to use specific file structure in Sass, this article will help you start: https://itnext.io/structuring-your-sass-projects-c8d41fa55ed4
Happy coding!
Hi,
very nice and clean solution:) congratulations!
One thing you might wanna improve: before submission check if a user clicked on any rating. Now you can pass an empty submission and get a thank you card.
Happy coding!
Im not really sure if i did it in the best way possible, so im looking for tips and advices.
Hi,
your solution looks really good, congratulations:)
Few things I might suggest: Use array methods instead of loops, it's more readable, faster and convenient (e.g. looping through buttons, you could use forEach method which is available for HTML collections and Node lists).
For Sass: it's a little overkill using Sass for project so small, but when you are using it: look at your modules structure. Here you can find tips how to structure it: https://itnext.io/structuring-your-sass-projects-c8d41fa55ed4. Kevin Powell has also youtube video on this topic.
And one another thing: with new version of Dart Sass it's not really recommended to use @import. Kevin also has a video on using @use and @forward, it's also available in Sass documentation.
Hope this helps:)
Happy coding!
It was a fun challenge to complete, especially linking the JSON file/data to the cards.
Any feedback would be greatly appreciated.
Hi,
Congratulations on completing the challenge:)
I don't know if you noticed but the data isn't loaded until you click the button. It would be much better if you selected e.g. weekly stats as default.
Very nice job with this one, code is clean, I can easily figure out what you are aiming for. Happy coding!
Any feedback much appreciated:)
Hi,
Yeah, forgot to fix decimals and also about the error message.
Thanks for review, really appreciate it.
Happy coding!
