Steven
@stevensunaAll comments
- @Luca-SousaSubmitted 9 months ago
- @TomekWojakSubmitted about 1 month agoWhat challenges did you encounter, and how did you overcome them?
Positioning of elements on the website was a little bit challenging, but I did my best. I will improve some things in the future
P@stevensunaPosted 23 days agoYou're on the right track using Flexbox! To improve positioning further:
- Master Flexbox: Explore
justify-content
, understandalign-content
vs.align-items
for multi-line layouts. - Learn
position
Property: Understandrelative
,absolute
,fixed
,sticky
, and when to use each (vs. defaultstatic
). - Use Margins & Padding Wisely: Choose between them to control spacing effectively.
- Consider CSS Grid: For complex, two-dimensional layouts, Grid can be very powerful.
To practice:
- Do layout challenges.
- Experiment with
position
values in small code examples. - Use browser dev tools to visualize layouts.
- Refer to MDN documentation.
Keep practicing – positioning skills improve over time! You've got a good foundation.
0 - Master Flexbox: Explore
- @ariel172Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I'm proud to have (finally) finished the project, I had completely abandoned it x months ago. I'm also glad to have learned the css grid. Next time I'll try to do a better job with the code and in a much shorter time, I'll also try to make my code look as good as possible in the mock-up (without figma :) ).
What challenges did you encounter, and how did you overcome them?I had difficulties with css grid to overcome this I did some research on youtube and AI.
What specific areas of your project would you like help with?I don't understand the css grid, but I hope that with practice it will get better. If you can give me some resources to learn that would be cool thank you in advance
P@stevensunaPosted 29 days agoFinishing the project after pausing and learning CSS Grid are both achievements to be proud of. Recognizing areas for improvement in code quality and speed is excellent – that shows growth. Using YouTube and AI to overcome CSS Grid challenges is a smart approach.
To deepen your CSS Grid understanding, here are some concise and effective resources:
- MDN CSS Grid: Official documentation, comprehensive and accurate. (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
- CSS Grid Garden: Fun and easy game to learn CSS Grid. (https://cssgridgarden.com/)
- Scrimba CSS Grid (free): Interactive course, learn directly in your browser. (https://scrimba.com/g/ggrid)
- Kevin Powell (YouTube): Clear and practical CSS Grid explanations. Search his channel for "CSS Grid". (https://www.youtube.com/c/KevinPowell)
Advice: Start with CSS Grid Garden to get familiar, then check out Scrimba or Kevin Powell. Use MDN for reference. Most importantly, practice regularly.
Keep up the great work! Ask anytime you need more help.
Marked as helpful0 - @sd3u16Submitted about 1 month agoP@stevensunaPosted about 1 month ago
You've built a functional and reasonably well-structured component. To take it to the next level, focus on:
- CSS Organization: Use an external stylesheet and consider CSS variables.
- DRY Principle in CSS: Reduce redundancy by creating reusable classes and modifier classes.
- Semantic HTML: Explore using more semantic HTML5 elements where appropriate.
- Accessibility: Pay attention to alt text for meaningful images and consider further ARIA attributes if needed for more complex interactions (though likely not necessary for this component).
- Performance: Use <link> for fonts, optimize images.
0 - @Gbw699Submitted about 1 month agoP@stevensunaPosted about 1 month ago
This is a well-executed solution! You've demonstrated a good understanding of HTML, CSS, SCSS, and responsive design principles. The code is generally clean, well-structured, and accessible.
1 - @JuniorGodoyOrtegaSubmitted 3 months agoP@stevensunaPosted 2 months ago
Your code is generally well-structured, and you're using best practices like BEM and CSS variables. However I highly recommend considering these two changes:
- Use dvh for better handling of dynamic toolbars on mobile.
- Explicitly define a media query for the 375px breakpoint to improve code clarity and control. These changes will make your code more robust and maintainable in the long run.
Marked as helpful1 - @isAlvarezDevSubmitted 3 months agoP@stevensunaPosted 3 months ago
Semantic HTML:
You could use a <header> element to wrap the img, h1, and h2 elements. This would group the introductory content of the profile card.
The p tag with the bio could be placed inside an <article> or <section> to group it with related content.
The links could be placed inside a <nav> element, as they represent a navigation menu.
Heading Hierarchy: The h2 for "London, United Kingdom" is semantically a bit odd. It might be better to use a div or span with specific class or p tag since it's not really a heading that introduces a new section.
Link Classes: The repeated use of class="main__a" is not very maintainable. It would be better to use more descriptive and reusable classes if you plan to style other links similarly later.
Attribution Links: The link in the attribution could also have a more specific class for styling purposes
Marked as helpful1 - @elvisEspinozaNSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I’m proud of implementing semantic HTML effectively and using media queries to create a responsive design. Next time, I would focus more on refining hover effects and ensuring a smoother scaling experience across all screen sizes.
What challenges did you encounter, and how did you overcome them?I initially found media queries challenging, especially when stabilizing elements like the card and header image. I overcame this by experimenting with different breakpoints and testing with max-width and responsive techniques like object-fit.
What specific areas of your project would you like help with?I would like feedback on improving my CSS, especially with structuring styles for better readability and scalability. Suggestions for enhancing hover effects and responsive design patterns are also welcome.
P@stevensunaPosted 3 months agoCode Optimization: Consider reducing redundancy in padding and margin values by using shorthand properties.
0 - P@rainbowsurfer137Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I’m most proud of simply completing the challenge as a complete newbie. It was fun to learn how to use GitHub for the first time and see this challenge come together. Next time, I’d focus on finding more efficient ways to approach the process, from managing my code to refining my workflow.
What challenges did you encounter, and how did you overcome them?One challenge I encountered was dealing with a divergent branch. I researched the issue and was able to resolve it by learning how to reconcile the branches.
What specific areas of your project would you like help with?I’d love feedback on how to make my code more efficient and streamlined. Suggestions for improving responsiveness and best practices for structuring CSS and HTML would be helpful.
P@stevensunaPosted 3 months agoI noticed the margin on this <p> tag differs slightly from the design guidelines.
0