Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions11Comments26

All comments

  • Rémy Boiré• 350

    @remyboire

    Submitted

    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

    React In-browser markdown editor with file download

    #react

    2

    ViyanMd• -40

    @ViyanMd

    Posted

    No problem! Could you share some info where you’ve learned how to implement the “download” module ?

    0
  • Rémy Boiré• 350

    @remyboire

    Submitted

    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

    React In-browser markdown editor with file download

    #react

    2

    ViyanMd• -40

    @ViyanMd

    Posted

    Hey 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 Kevin Touga Watat• 270

    @Christ-Kevin

    Submitted

    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)

    stats-preview-cards using Flexbox and other CSS custom properties

    2

    ViyanMd• -40

    @ViyanMd

    Posted

    Hi there! I am not an expert, but here's what worked well for me:

    1. Watch some Kevin Powell Youtube videos on responsiveness, layout and css units and media queries.
    2. 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.
    3. As soon as you feel comfortable with something really simple, you can go ahead and start newbie challenges here.
    4. 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 helpful

    1
  • ViyanMd• -40

    @ViyanMd

    Posted

    Well done! A couple things to fix to make it perfect :)

    1. Increase the padding for your "right" element.
    2. Fonts are a little off, so going with a different font size or weight would be great.
    3. 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.
    4. 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
  • Bram Mortier• 260

    @BramMortier

    Submitted

    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!

    Tip Calculator App

    1

    ViyanMd• -40

    @ViyanMd

    Posted

    Hey! 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 helpful

    0
  • Richard Marks• 240

    @Richard2957

    Submitted

    Interested to know, how long does everyone spend on a project like this?

    HTML and CSS

    2

    ViyanMd• -40

    @ViyanMd

    Posted

    Hey 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
  • ViyanMd• -40

    @ViyanMd

    Posted

    Mobile version is completely broken :(

    0
  • ViyanMd• -40

    @ViyanMd

    Posted

    You could’ve added simple animations to make it feel smooth, but you nailed it anyways. Well done!

    0
  • ViyanMd• -40

    @ViyanMd

    Posted

    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
  • ViyanMd• -40

    @ViyanMd

    Posted

    Yeah, 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
  • Aparajit Balaji• 50

    @aparajitdotbee

    Submitted

    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?

    Profile Card Component using HTML and CSS

    3

    ViyanMd• -40

    @ViyanMd

    Posted

    Also, just a hint, you can totally do this project without both of these in your code :)

    0
  • Aparajit Balaji• 50

    @aparajitdotbee

    Submitted

    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?

    Profile Card Component using HTML and CSS

    3

    ViyanMd• -40

    @ViyanMd

    Posted

    @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
  • ViyanMd• -40

    @ViyanMd

    Posted

    Hey bud! The functionality is great, the design is a little bit off though both on mobile and desktop :)

    0
  • ViyanMd• -40

    @ViyanMd

    Posted

    You should work a little more on design and test all the functionality. I’ve used it for a couple tries and wasn’t able to get the error message when the number of people is 0. Well done, but there’s still room for improvement :)

    0
  • Aparajit Balaji• 50

    @aparajitdotbee

    Submitted

    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?

    Profile Card Component using HTML and CSS

    3

    ViyanMd• -40

    @ViyanMd

    Posted

    Usually, we use background-image when it's not a part of the content, but for design purposes. It also increases loading speed. Check this article on StackOverflow: https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image In regards to the second question, it's not really clear. Could you describe what was the issue? Maybe I could help if I know the context.

    0
  • Dragosh Gheceanu• 140

    @dragoshcode

    Submitted

    Hey mate!

    1. Is there another option to make inserted through CSS background-images responsive, beside the method with a lot of media queries to give an explicit size whenever images stretch?

    2. As you can see I am using pretty much media queries for setting the padding for paragraphs, that's mainly because of clamp(), but also just because of the design - so is it a bad practice and does all these padding media queries cut something out like page speed, load in a website etc?

    3.When doing the last part of the website with all the responsiveness and testing stuff, I am very concerned and waste a lot of time about the website looking the same as in given design layout (the figma file). Mainly for the paragraphs to be on the same lines as the another paragraph on that line, or for example the heading to be on 2 rows as in the mobile layout design, not on 1, so I'm playing over a lot with these small stuff. TL;DR: Is it worth to make it all almost perfect, or am I overthinking on it?

    1. What do you think about my git commits - are they too less, and should I write the message in a more descriptive way maybe?

    2. What would you also advice regarding to responsiveness, or to some bugs on the site?

    Fluid Landing Page with HTML, SCSS & additional hover effects

    #accessibility#bem#sass/scss#gulp

    2

    ViyanMd• -40

    @ViyanMd

    Posted

    P.S. Overthinking might be a problem, but if you know you can do better, then simply do. Write down a list of things you want to fix, fix them and forget about 'em :)

    Marked as helpful

    1
  • Dragosh Gheceanu• 140

    @dragoshcode

    Submitted

    Hey mate!

    1. Is there another option to make inserted through CSS background-images responsive, beside the method with a lot of media queries to give an explicit size whenever images stretch?

    2. As you can see I am using pretty much media queries for setting the padding for paragraphs, that's mainly because of clamp(), but also just because of the design - so is it a bad practice and does all these padding media queries cut something out like page speed, load in a website etc?

    3.When doing the last part of the website with all the responsiveness and testing stuff, I am very concerned and waste a lot of time about the website looking the same as in given design layout (the figma file). Mainly for the paragraphs to be on the same lines as the another paragraph on that line, or for example the heading to be on 2 rows as in the mobile layout design, not on 1, so I'm playing over a lot with these small stuff. TL;DR: Is it worth to make it all almost perfect, or am I overthinking on it?

    1. What do you think about my git commits - are they too less, and should I write the message in a more descriptive way maybe?

    2. What would you also advice regarding to responsiveness, or to some bugs on the site?

    Fluid Landing Page with HTML, SCSS & additional hover effects

    #accessibility#bem#sass/scss#gulp

    2

    ViyanMd• -40

    @ViyanMd

    Posted

    Hey! Haven't looked through the code, but I've finished this project a week ago or so and can say that flex with all it's functionality works great here. Some media queries are inevitable, but if you feel like there's too much, you're probably right. Flex allows you to make the website much more responsive if used right. Anyways, when I doubt my decisions, I usually look through other peoples solutions to find both worse and better solutions and after that get back to my own code with fresh and usually better ideas. In regards the bugs: hamburger menu doesn't work for me (iPhone 13)

    Marked as helpful

    1
  • ViyanMd• -40

    @ViyanMd

    Posted

    Hey bud! You've done a great job, but you should at least go through HTML issues from the report and fix that. Also, I would recommend to go through some theory on semantics and tools to help you always guess the right size of the element. Overall it looks good if not comparing it with the control version.

    Marked as helpful

    1
  • ViyanMd• -40

    @ViyanMd

    Posted

    Hey @musikhood! Everything works great, but there's still room for improvement. First of all, the design is a little bit off. You can use different tools and extensions to help you with that. Also, I wasn't able to get the error message at the times when the number of people is 0. I've done this project with React as well and it's a great project to practice. You've done a good job, but to make it perfect, I'd advise you to test it more and fix the bug I've mentioned above. P.S. I haven't looked through code, but fingers crossed it's fine :) Happy coding.

    Marked as helpful

    0
  • ViyanMd• -40

    @ViyanMd

    Posted

    It all looks great, but for the custom tip button (it doesn't do anything). That should be an easy fix. Well done!

    0
  • C Lewis• 110

    @casserole27

    Submitted

    I previously completed the order component summary card, and I feel I have improved on this project, especially flexbox, responsiveness, and accessibility. Any feedback is appreciated!

    NFT Preview Card CSS Flexbox

    2

    ViyanMd• -40

    @ViyanMd

    Posted

    Looks great, even though the size is a little bigger than it should've been. Well done! P.S. using classes instead of id's is a better practice. You can read this article: https://css-tricks.com/the-difference-between-id-and-class/

    Marked as helpful

    1
  • ViyanMd• -40

    @ViyanMd

    Posted

    Looks great, works great. I've done the same challenge with React and struggled a lot with the form part, you've done the right choice choosing vanilla js

    Marked as helpful

    0
  • ViyanMd• -40

    @ViyanMd

    Posted

    Nice work! I would recommend to do the whole card a little smaller and change the font color to the one that is provided in style guide. Also, the picture looks oval rathen than round, so you might want to play more with border-radius.

    0
  • Rohit• 330

    @Rohitgour03

    Submitted

    Here is my solution to this challenge. I am facing the problem of placing the computer image with the side text. How to do that? Your suggestions and feedbacks will be really helpful for me to impprove. Thanks in advance. 🙏

    Clipboard landing page using HTML and CSS

    2

    ViyanMd• -40

    @ViyanMd

    Posted

    use overflow hidden also, your container is narrower than the screen, so you need to fix that

    Marked as helpful

    0