I took Bob's Ziroll amazing Learn React Course on scrimba last week and this challenge was perfect for me to practice every notion I learned. I was the first time I build a React app from scratch and I learned a lot about components, props, states, localstorage, effects, dark mode (even if I didn't spend much time on it) etc. I tried to add a few functionalities like the possibility to download your document once saved, or delete a doc by clicking the icon on the sidebar (when the sidebar is open, the button in the header was hidden). I didn't care much about CSS and I feel like my code isn't very great, but it wasn't the purpose of this challenge for me. In the future, when I'll forget about my code, I'd like to rework on this project to improve it and see if it's clear enough for someone else. I use React-mde package and would like to replace it and code my own solution for the editor. Saving with cmd+S would be a nice little feature to add too. Every feedback is welcome! Have a nice day, Rémy
ViyanMd
@ViyanMdAll comments
- @remyboireSubmitted over 2 years ago@ViyanMdPosted over 2 years ago
No problem! Could you share some info where you’ve learned how to implement the “download” module ?
0 - @remyboireSubmitted over 2 years ago
I took Bob's Ziroll amazing Learn React Course on scrimba last week and this challenge was perfect for me to practice every notion I learned. I was the first time I build a React app from scratch and I learned a lot about components, props, states, localstorage, effects, dark mode (even if I didn't spend much time on it) etc. I tried to add a few functionalities like the possibility to download your document once saved, or delete a doc by clicking the icon on the sidebar (when the sidebar is open, the button in the header was hidden). I didn't care much about CSS and I feel like my code isn't very great, but it wasn't the purpose of this challenge for me. In the future, when I'll forget about my code, I'd like to rework on this project to improve it and see if it's clear enough for someone else. I use React-mde package and would like to replace it and code my own solution for the editor. Saving with cmd+S would be a nice little feature to add too. Every feedback is welcome! Have a nice day, Rémy
@ViyanMdPosted over 2 years agoHey bud. Found an interesting bug for ya :) If you open a new file and refresh the page, the website goes down. Don't have much time to check what's the issue, so maybe you'd want to check on that yourself. Anyways, you've done an amazing work ( i'm impressed it's your first react app) !
0 - @Christ-KevinSubmitted almost 3 years ago
I have some questions about my challenge. I recognize that I still need to make progress in responsive design and responsive images using CSS and I have some questions concerning these topics. The first one is rather vague and general. Can you please tell me how you have improved your responsive design skills? In fact I'm curious to see how you have progressed in this domain and if you have any tips to share with me in the field of responsive design and responsive images. The second question is about the site I just shared. Indeed I would have liked to have a media-query with "min=540px". But unfortunately it was not possible because when I reduced the window below 750px, the flex on the bottom left of my container did not have enough space. Do you think it's not a problem if my media querie is set to "min=750px" instead of "min=540px" as i did? Or do you think I should consider reducing the font size of this flexbox? Or do you have an alternative solution? Thank you in advance to all the team. Thanks frontendmentor
Translated with www.DeepL.com/Translator (free version)
@ViyanMdPosted almost 3 years agoHi there! I am not an expert, but here's what worked well for me:
- Watch some Kevin Powell Youtube videos on responsiveness, layout and css units and media queries.
- Start with something simple. I am talking about literally practicing with one div or img, then combine an img and a div, the add some text. On each step make sure elements behave exactly how you want.
- As soon as you feel comfortable with something really simple, you can go ahead and start newbie challenges here.
- In programming curiosity is the key. You can ask Slack community for css resources and just go article after article. In most cases authors use simple examples to demonstrate what they are doing. After reading an article, try to repeat it by yourself without looking at the author's code.
Marked as helpful1 - @Nang-Su-Bway-NiSubmitted almost 3 years ago@ViyanMdPosted almost 3 years ago
Well done! A couple things to fix to make it perfect :)
- Increase the padding for your "right" element.
- Fonts are a little off, so going with a different font size or weight would be great.
- The animation you've added looks great! (I've done something very similar). If you can, make it faster, because if feels like it's lagging.
- The mobile version is a little different from the desktop one, try to match the original design.
If you have any questions, feel free to ask!
0 - @BramMortierSubmitted almost 3 years ago
Getting more and more comfortable with responsive design. Learned a lot about flex wrap and the grow and shrink propreties. My CSS is also getting way more organised and i will try SASS very soon. Happy with some more progress!
@ViyanMdPosted almost 3 years agoHey! I'm glad you are making progress! A couple things about this project. The desktop version is stretched out both on x and y. Adding max-width and max-height or playing with flex-basis (if you are into flexbox) should solve the problem. Mobile version looks more or less better, but you should check your padding for the outer element as well. Also, the color of the input is a little different from what is in the control design, but that's an easy fix. Now, in regards JS. I assume you've decided to go with default 1 person, it solves the issue but if I put 0 in it, it doesn't give me the error message. I know no one will ever put 0 in there, but that's what the challenge is and you should challenge yourself to make it happen. Also, the tip amount gives "Nan" in some cases, so you should check values you are passing throughout the app. That's all I've found yet (don't have much time to go through you code at the moment), wish you good luck and happy coding. Feel free to ask questions.
Marked as helpful0 - @Richard2957Submitted almost 3 years ago
Interested to know, how long does everyone spend on a project like this?
@ViyanMdPosted almost 3 years agoHey bud! Nice work! It took me about two hours to finish it, but I had to come back to it and add some animations + fix a couple things. One thing I've noticed is that you should fix the color of the text. The rest of it looks great. Also, 7 "ACCESSIBILITY ISSUES" is a little too much, but is easy to fix. Good luck!
0 - @IndanarishiSubmitted almost 3 years ago
- @salahudheen007Submitted almost 3 years ago
Any suggestions?
@ViyanMdPosted almost 3 years agoYou could’ve added simple animations to make it feel smooth, but you nailed it anyways. Well done!
0 - @LogvnRSubmitted almost 3 years ago@ViyanMdPosted almost 3 years ago
State is simply a way to store and share information. There’s not much you can do to avoid reusing it over and over in child components. Your code looks good at first glance, so you don’t have to worry about that, at least for now, because there’s still a couple bugs you can fix (like “Infinite” number and some design flaws :) Well done though! Happy coding :)
0 - @alosoftSubmitted almost 3 years ago
Any comments and suggestions are welcome
@ViyanMdPosted almost 3 years agoYeah, sure. For the mobile version you should change bottom border radius of your 'div class="section"' back to 0, as it breaks the wholeness of the component and simply looks weird :) The desktop version looks a little stretched out vertically, so maybe play around with margins and paddings to make it "narrower". That is all I've noticed. Good luck!
1 - @aparajitdotbeeSubmitted about 3 years ago
Dear Folks,
I would like to understand the difference between importing the image from HTML and that from CSS. As always, you are welcome to criticise the output as I am new and learning.
And, how to generally decide which component must have position: absolute with respect to its parents with position: relative?
@ViyanMdPosted almost 3 years agoAlso, just a hint, you can totally do this project without both of these in your code :)
0 - @aparajitdotbeeSubmitted about 3 years ago
Dear Folks,
I would like to understand the difference between importing the image from HTML and that from CSS. As always, you are welcome to criticise the output as I am new and learning.
And, how to generally decide which component must have position: absolute with respect to its parents with position: relative?
@ViyanMdPosted almost 3 years ago@aparajitdotbee Gotcha. Basically, you use absolute positioning when you want to determine exactly where you want to put your element. Nowadays people use position: absolute when it’s impossible to position the element with other tools like flex box, grid, etc. I would recommend reading a couple articles on how it exactly works, but it’s pretty simple. Position relative is mostly used for an element inside which you want to place an absolute positioned child element, which becomes relative to it’s parent. Same thing, the theory is rather simple, so check any article on that as well.
0
