@haloviiSubmitted 26 days ago
What specific areas of your project would you like help with?
Is there a reason why the main component is not vertically centered? and how do I fix it?
M Asim Saeed
@asimsaeed353All comments
- @asimsaeed353Posted 26 days ago
Hi @hallovi, Are you asking why your whole card component is not vertically centered?
0 - @Irene-JurnaSubmitted 27 days agoWhat are you most proud of, and what would you do differently next time?
I finished my first frontendmentor challenge!
What I'd do differently next time: keep the media-queries consistent, understand rem/em/px better, learn more about grid.
What challenges did you encounter, and how did you overcome them?Accessibility was a new topic, that was challenging to work with. It was also hard at first to be able to make the content dynamically rendered. As I used Angular, I couldn't use the javascript tutorials for that. For the same reason, I got stuck with the menu navigation. But now it works!
What specific areas of your project would you like help with?Feedback on the major things to improve. I'm a junior frontend developer. What are things in the structure of the project that could use improvement?
- @Hasani-SediqaSubmitted 28 days agoWhat are you most proud of, and what would you do differently next time?
To complete this solution and learn using GitHup, and for next time i would think about the solution before to start it, and I'll search about the CSS layout.
What challenges did you encounter, and how did you overcome them?I had a problem when uploading the files in the GitHup, the Live linke did not works then I searched about it and I figured it out that the index.html file should be in the root directory of the branch that I selected for GitHub Pages.
@asimsaeed353Posted 28 days agoCongratulations on your first design. Keep learning and keep coding cool layouts!
0 - @kaveeshagimSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I'm mostly proud of how quickly i was able to create the html skeleton and finish the project by adding styles even without the help of the figma file. Definitely an improvement from the past projects
What challenges did you encounter, and how did you overcome them?i was struggling a bit with centering the main container and applying a max width
What specific areas of your project would you like help with?I would like to know how well i did in overall considering the fact that there was no figma file and i had to eye ball most of the measurements.
@asimsaeed353Posted about 1 month agoGreat design and very clean and simple code. To center the main container, you can use
body{ display : grid; place-items : center; min-height : 100vh; }And you did an amazing job. Keep up the good work!
0 - @Outstandinggirl13Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
Learning Progress:
- Worked with a high-quality Figma design file, which helped me achieve near pixel perfect accuracy.
- Improved coding skills and understanding of BEM methodology.
- Used meaningful names for elements.
Development Insights:
- Encountered and resolved issues styling the preview image.
- Used flexbox to center the image.
Responsive Design:
- Implemented a clamp() function for dynamic width adjustments between mobile and desktop views.
HTML Enhancement:
- Wrapped the publication date in a tag for better accessibility.
- @haloviiSubmitted about 1 month ago@asimsaeed353Posted about 1 month ago
Impressive effort and yeah GitHub is confusing sometimes haha. I have a suggestion, add styles to your
<a>for hover and focused state. That'll improve the design for sure. Keep up the good work!1 - @elisecomputingSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
This was fun to do! I customized it to me
What challenges did you encounter, and how did you overcome them?I am getting but at the hover effect!
@asimsaeed353Posted about 1 month agoGreat design impressive improvisation. You can apply padding on link elements to maximize their width. And apply
text-decoration : none;and give them colors according to your design.0 - @nataliab94Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I am proud of this project, because it is my first one.
What challenges did you encounter, and how did you overcome them?The most difficult thing was to adjust the website to make it responsive on smaller screens. I just kept trying until I succeeded.
What specific areas of your project would you like help with?I want to know what I still need to work on. Where is the biggest problem in my code.
@asimsaeed353Posted about 1 month agoCongratulations on your first design. To make the design responsive, avoid having fixed heights and widths of the elements. You can use '%' to set width of the element, so the element's size will increase or decrease depending upon the screen size. Keep your design game up! :)
Marked as helpful0 - @cristiensenSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I am proud that this is my first completed challenge, even though it is a very simple one.
What challenges did you encounter, and how did you overcome them?One challenge was that the cards changed their size depending on the number of text rows. For example, if one card had 5 text rows, and the other cards had only 4, the one that 5 rows increased slightly in size, making the cards seem disproportionate. Fixed that by applying "align-items: stretch;" to the flex container. This makes all the cards have the same size as the tallest item.
What specific areas of your project would you like help with?I am sure that there are lots of ways to improve my code. I would really like to know what improvements I can make to my code, especially for CSS.
@asimsaeed353Posted about 1 month agoCongratulation on this great design. To have equal columns, you can try grid. It's less complicated to deal with when you want to design layouts which has equal columns/boxes.
Marked as helpful0 - @MdZaferEqbalSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
This is my first take on responsive design. And any feedback regarding the responsive design that I can improve or I did any mistakes will greatly help me. Thank you.
@asimsaeed353Posted about 1 month agoCongratulations on solving this challenge. The design is great on large screens. However, there is some gap between the product preview image and the content in small screens.
Also, you can add the styles for hover state of the interactive element. Try avoiding fixed heights. And you can be a little more careful about the font sizes. Keep up the good work! :)
Marked as helpful0 - @dylanguaquierSubmitted about 1 month agoWhat challenges did you encounter, and how did you overcome them?
I do not touch grid that much, it was pretty great to learn, i wish there is more grid training on the website
@asimsaeed353Posted about 1 month agoYour skills are very impressive. The design is great and responsive. I wanted to take a look at your code but the link to your code is not working.
0 - @SamreensabaSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I am particularly proud of the clean and responsive design of the Social Links project. It effectively showcases my ability to create a visually appealing user interface while ensuring compatibility across different devices. The use of CSS for styling and layout, resulted in a smooth user experience. Additionally, the project demonstrates my understanding of web accessibility principles, making it user-friendly for a diverse audience.
@asimsaeed353Posted about 1 month agoThe design is great, and code is very clean and simple to read. I have a suggestion, you can make the social link elements interactive by using
<a>instead of<p>in your<div class="section3"> <div class="links"><p class="link">GitHub</p></div>And also, you can change the style of these interactive elements for their hover and focus state. That will make the design more attractive.
I hope these tips will be helpful :)
Marked as helpful0
