@KelechikizitoSubmitted 25 days ago
Mohaymenul Islam
@nayem567All comments
- @nayem567Posted 25 days ago
Great job. This is looking almost very similar to the original design !
0 - @isadoraguiarSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I am happy that I completed the challenge.
What challenges did you encounter, and how did you overcome them?The challenge was not using the design file.
What specific areas of your project would you like help with?Nothing yet.
- @Vinzz34Submitted 9 months ago
I really struggled with the responsiveness of this as the mobile design is kinda weird any tips would be appreciated
@nayem567Posted 9 months agoYour mobile design is also good. I've checked your code, you can try using less fixed pixels to make responsive easily. Rely more on flex, it will take care the issue. Overall pretty good man
Marked as helpful1 - @aminbd90Submitted over 3 years ago
I would like feedback on my code. please
- @uragunz16Submitted 9 months ago
What to Improve? I'm preparing to use flex-box and grid.
@nayem567Posted 9 months agoYou did pretty good. I see nothing noticeable should be changed. Handled finely. Good Luck man
Marked as helpful0 - @xStephxSubmitted 10 months ago
- @LouisDev23Submitted 10 months ago
I found it difficult to add the icons in the chat app.
@nayem567Posted 10 months agoHello @LouisDev23.
Congratulation on completing this project. Here are some feedback and suggestions on your chat app:
-
Centering First of all, Center your Body Elements vertically. To do this you just have to add a height to your body:
body{ height: 100vh; }. As you are using flex to the body element, giving a height will align its children properly. -
increase padding to the "chatbox" div and to other elements inside of this.
-
chatbox pictures are not clickable, make them clickable with giving them a link. You can use
<a> <img> </a>style, means putting the image inside anchor link. -
yes, adding an icon is little difficult when we start. But it's actually simple when you know the process. There are many Icon library in the internet that you can use. One of the most famous one is "Font Awesome". Just go to their site and follow the documentation. It's pretty straight-forward actually. I'm doing this for you:
in the head section of your html, add Font Awesome CDN:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">Then inside your button add the font-awesome icon:
<button> <i class="fas fa-chevron-right"></i> </button>.-
There needs to be some spacing inside the text div.
-
There is an .attribution div. You have put it inside the text div. Replace the .attribution div out of that text div, this .attribution should come after the text div.
-
In Mobile view, the text section is not aligned properly. make it centered by using margin or flex.
I hope these helps. Let me know if I can help further. Good luck and Thank You.
Best Regards, Mohaymenul Islam
0 -
- @riyas2309Submitted 10 months ago@nayem567Posted 10 months ago
Hello @riyas2309. Congratulation on completing your first project. Your Code is organized. There is not html, css error in your code. Also looks great visually.
- Yes, the solution includes semantic HTML.
- Yes, it is accessible; no specific improvements needed.
- Yes, the layout looks good on a range of screen sizes.
- Yes, the code is well-structured, readable, and reusable. Good Luck.
Marked as helpful1 - @sodiqmmvSubmitted 10 months ago
How can I improve my job?
@nayem567Posted 10 months agoHello @sodiqmmv. First of all congratulation on completing the project. There are some issues that I would like to address to make your template look better.
CSS Validation: First of all validate your css with a css validator, there are few parsing errors in your css.
Container Placement:
A major issue is your "Container" div is out of your HTML "Body". And why this has happened? The reason is that you used :
blog{ position: relative; top: 190px; left: 595px; }.Solution: Don't use position relative in this context. The best use case of this would be using CSS Flex or Grid. I would recommend Flex as to begin with. You can position your html elements according to your needs without breaking the layout of html body, by using Flex.
In Mobile device, your content is not showing. You must have to make your site responsive for mobile. You have to learn this "Responsive Website" topic. There are plenty free tutorial and articles about this topic.
To give a quick fix, follow the previous correction I have provided above. Don't use position relative to the container element, Use Flex to position it.
My advise to you would be check how to position html elements properly with css properly. There are few subjects that you have to get comfortable. These are: CSS Flex, Grid, Position, Media Query.
Take some time learning these, then revisit this project once again to identify your mistakes and make it better.
I wish you good luck on this journey.
If you need any further help, feel free to knock me. Thanks
Best Regards, Mohaymenul Islam
Marked as helpful1 - @MvPorcallaSubmitted 10 months ago
Looking at my code, are there any specific best practices you'd recommend or aspects where I could enhance the code's maintainability, performance, or overall adherence to coding standards?
@nayem567Posted 10 months agoHello @MvPorcalla. Congratulation on completing the project. Your template looks very good and there is also no HTML, CSS error in your code. Here are some tips to make this look slightly better:
Give your body a height of 100vh, so it takes the full height of the page, otherwise the bottom section is having empty white space.
Your can take your "attribution" to the bottom of the page: .attribution{ display: flex; height: 10vh; justify-content: center; align-items: end; }.
As you have given the "card-container" height of 90vh, the attribution should take other 10vh of the remaining height. This way the page height is filled perfectly. Also, consider increasing the font size of the attribution text.In responsive mode, you can give your "card-container" a little more margin to left-right side.
I hope this helps. Let me know if you need any further help. Thank you.
Best Regards, Mohaymenul Islam.
Marked as helpful0 - @CoderHruthvikSubmitted 10 months ago
I would like to rate the efficiency of my code. I am a beginner developer, so if there are any mistakes, I would like to know and learn from them.
@nayem567Posted 10 months agoHello @CoderHruthvik. You have completed the task, congratulations. But There are few issues you can take care of.
To start with, when using 'Display:flex' to a container, you don't need to give the flex child items to 'position:relative' or 'margin-left', 'margin-top' etc. You can position the flex child using various flex properties like 'justify-content', 'align-items' etc. In your code, you have used the 'justify-content', 'align-items' property to the flex child but positioning it with 'display:relative' has conflicted with this and resulted improper positioning.
Then another tip is to avoid giving the element a fixed height if possible. That way the element is going to take only as much space as it needs according to its inner elements. You can take necessary space through margin and padding. You can try this.
In your code, another mistake was using the flex-child as inline-block. Avoid this if possible.
Responsive mode of your template also became unaligned because of the mentioned issues. My suggestions would be take some time to understanding the layout better. Then do the project once again. So you could get near to perfection.
Let me know If you need any further help. Thank you
Marked as helpful1 - @asad1001Submitted 11 months ago
The most difficult part of this project was script. I found it difficult to animate the plus and minus icons. That is why i am unsure about this part. The description of this task provided a desing for mobile as well. So, should I write another html and css for mobile design in this case?
@nayem567Posted 11 months agoWell Done. And no, don't write new html, css for the mobile design. The html are always same. You have to use "media query" for mobile design. It is called Responsive Web Design. You will find good videos and articles all over the internet about this, specially check out Youtube. To be a Web Developer, learning responsive web design is a must. Good Luck
Marked as helpful0
