Looking to hire developers?
@nayem567
@isadoraguiar
Submitted
What 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.
@nayem567
Posted
perfectly done. good job
@Vinzz34
Submitted
I really struggled with the responsiveness of this as the mobile design is kinda weird any tips would be appreciated
@nayem567
Posted
Your 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 helpful
@aminbd90
Submitted
I would like feedback on my code. please
@nayem567
Posted
Beautifully done bro
@uragunz16
Submitted
What to Improve? I'm preparing to use flex-box and grid.
@nayem567
Posted
You did pretty good. I see nothing noticeable should be changed. Handled finely. Good Luck man
Marked as helpful
@xStephx
Submitted
@nayem567
Posted
well done š
@LouisDev23
Submitted
I found it difficult to add the icons in the chat app.
@nayem567
Posted
Hello @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:
<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
@riyas2309
Submitted
@nayem567
Posted
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.
Marked as helpful
@sodiqmmv
Submitted
How can I improve my job?
@nayem567
Posted
Hello @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:
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.
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 helpful
@MvPorcalla
Submitted
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?
@nayem567
Posted
Hello @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 helpful
@CoderHruthvik
Submitted
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.
@nayem567
Posted
Hello @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 helpful
@asad1001
Submitted
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?
@nayem567
Posted
Well 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 helpful
@dahmide
Submitted
Feel free to share your feedback!
@nayem567
Posted
It's good
@akshaymagrani
Submitted
@nayem567
Posted
Where is source Code ? Github page error . Correct your github page
