Mohaymenul Islam
@nayem567All comments
- @Kelechikizito@nayem567
Great job. This is looking almost very similar to the original design !
- @isadoraguiarWhat 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.
@nayem567perfectly done. good job
- @Vinzz34@nayem567
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@nayem567
Beautifully done bro
- @uragunz16@nayem567
You did pretty good. I see nothing noticeable should be changed. Handled finely. Good Luck man
Marked as helpful - @xStephx@nayem567
well done 👏
- @LouisDev23@nayem567
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:
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
-
- @riyas2309@nayem567
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 helpful - @sodiqmmv@nayem567
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:
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 helpful - @MvPorcalla@nayem567
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@nayem567
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@nayem567
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@nayem567
It's good
- @akshaymagrani@nayem567
Where is source Code ? Github page error . Correct your github page