Skip to content
OverviewSolutions
7
Comments
7

Lord-Zethes

@Lord-Zethes140 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Testimonials-Grid

    Lord-Zethes•140
    Submitted 6 months ago

    I would love to get help with fully understanding the grid and flex layout systems. Specifically, I'd like to know how to center content properly without using extra margins and how to make image and text alignment easier. Any tips on optimizing layouts for responsiveness without relying on excessive adjustments would also be helpful.

    1 comment

  • Four Card Solution

    Lord-Zethes•140
    Submitted 6 months ago

    CSS Grid and Flexbox Layout: Are there any areas where my layout could be more efficient or responsive? I'm still exploring advanced techniques for grid placement.

    Semantic HTML: Is there any other way I can improve the structure of my HTML to make it more semantic and accessible?

    Responsiveness: I’d appreciate feedback on how well the layout adapts to different screen sizes and any suggestions to improve it.

    1 comment

  • Product Preview card

    Lord-Zethes•140
    Submitted 6 months ago

    Spacing and Alignment: I struggled with getting the spacing between elements to match the design, especially when transitioning between mobile and desktop layouts. Any advice on how to better manage spacing using flexbox, margins, or padding would be greatly appreciated.

    Media Queries: While I was able to implement a basic media query to switch between images, I’m not sure if I’ve set it up in the most efficient way. I’d love feedback on how to optimize my media queries for better performance and flexibility across more screen sizes.

    Accessibility Improvements: I’ve made an effort to improve accessibility by using semantic HTML and visually-hidden content for screen readers. However, I’m new to accessibility best practices, and I would like advice on any additional steps I could take to make my project even more accessible.

    2 comments

  • just Html and CSS

    Lord-Zethes•140
    Submitted 7 months ago
    1. Table Styling and Alignment

    Question: I had significant issues with aligning table elements and managing borders and spacing, particularly with ensuring no divider appears on the last row. Can someone review my CSS for the table and suggest improvements or best practices for managing borders and spacing in HTML tables?

    Details:

    My CSS includes properties like border-collapse, border-spacing, and border.
I used :last-child to adjust styling for the last row but encountered issues with consistent spacing and alignment.

    2. Responsive Design and Media Queries

    Question: I struggled with making the page responsive. I tried using rem units and media queries but didn’t achieve the desired effect. Can someone provide feedback on how to effectively implement media queries for responsive design?

    Details:

    I used rem for font sizes and layout dimensions, but the design didn’t adapt well to different screen sizes.
I need guidance on crafting effective media queries to adjust styles for various devices and screen widths.

    3. Using Flexbox and CSS Grid

    Question: I’m interested in learning how to use Flexbox and CSS Grid more effectively for layout management. Can someone review my current approach and suggest how I could integrate these techniques to improve the layout and responsiveness?

    Details:

    My current layout is primarily handled with basic CSS.
I haven’t yet used Flexbox or CSS Grid extensively, and I’d like to know how these tools could help with alignment and responsive design.

    4. General Code Review and Best Practices

    Question: Can someone review my overall HTML and CSS code for best practices? I’m looking for advice on how to structure my code more effectively and any common pitfalls to avoid.

    Details:

    I’m still learning and would appreciate feedback on how to write cleaner, more maintainable code.
    1 comment

  • Social Links Profile

    Lord-Zethes•140
    Submitted 8 months ago

    I would appreciate help with the following areas:

    Precision in Dimensions: I want to improve my skills in accurately determining and setting the exact dimensions of the card. Guidance on techniques for measuring and adjusting component sizes more precisely would be valuable.

Advanced CSS Techniques: While I’ve made progress with basic CSS properties, I’m interested in learning more advanced CSS techniques and best practices, particularly in areas like CSS Grid and advanced Flexbox layouts.

Responsive Design: Although I used a mobile-first approach, I’d like to deepen my understanding of responsive design principles to ensure that all elements of the card adapt seamlessly across various screen sizes and devices.

Cross-Browser Consistency: Ensuring that the card looks and functions consistently across different browsers is an area where I’d like to get more expertise. Tips on effective cross-browser testing and fixing compatibility issues would be helpful.
    1 comment

  • Blog Card

    Lord-Zethes•140
    Submitted 8 months ago

    • Mobile optimization.

    • Ways to keep the HTML from getting messy.

    • Keeping CSS files clean.

    1 comment
View more solutions

Latest comments

  • Lord-Zethes•140
    @Lord-ZethesPosted 6 months ago

    Looks Great

    0
  • Lord-Zethes•140
    @Lord-ZethesPosted 6 months ago

    Layout: Your use of Flexbox and Grid effectively creates a clean, structured design, especially for a feature section. Consistency: Your CSS is organized, and the design is responsive across screen sizes, which is a great achievement.

    1
  • KapteynUniverse•2,900
    @KapteynUniverseSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Learned picture element. I am getting used to use semantics, variables. Also designing mobile first felt odd, i will try it a couple more times but i don't know.

    What specific areas of your project would you like help with?

    For the "PERFUME" word i used figcaption tag first but couldn't figure out how to put it right side on the desktop version.

    Product Card Component

    1
    Lord-Zethes•140
    @Lord-ZethesPosted 6 months ago

    Looks great

    1
  • Lord-Zethes•140
    @Lord-ZethesPosted 7 months ago

    It looks great and very interesting.

    0
  • basitali07•40
    @basitali07Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am very proud of my HTML and CSS skills but unfortunately i am facing difficulty on media quaries! so i want to focus on media quaries nex time.

    What challenges did you encounter, and how did you overcome them?

    I face challenge on the part of the anchor tags i was not able to do the alignment correctly but after thinking and recalling my notes i become capable to do do challenge easily!

    below are the code snippets at which part i face difficulty:

      
            GitHub
            Frontend Mentor
            LinkedIn
            Twitter
            Instagram
          

    a{
    text-decoration: none;
    color:hsl(0, 0%, 100%);
    display: block;
    background-color:hsl(0, 0%, 20%);
    margin-bottom: 10px;
    width:65%;
    margin:15px auto;
    border-radius: 10px;
    padding: 15px 26px;
    font-size: 0.875rem;
    font-weight: 600;
}
    What specific areas of your project would you like help with?

    I need help on the css media quaries!

    Social-Links-Profile-Main by using HTML and CSS

    2
    Lord-Zethes•140
    @Lord-ZethesPosted 8 months ago
    • Fix Tag Mismatch: Correct the closing tag for the <h2> element (</h2> instead of </h3>).
    • Verify Paths: Ensure paths to favicon and images are correct relative to the HTML file location.
    • Enhance Alt Text: Provide a more descriptive alt attribute for the profile photo.
    • Improve Accessibility: Add aria-labels or roles where necessary for better accessibility.
    • SEO Optimization: Consider adding a meta description and keywords for improved search engine visibility.
    • Link Completion: Make sure all social media links are functional or provide placeholders if not available.
    • CSS Styling: Ensure style.css is properly linked and check if styles are correctly applied.
    Marked as helpful
    0
  • Lord-Zethes•140
    @Lord-ZethesPosted 8 months ago

    Hey the solution looks Great, few notes.

    -The rectangle Size is a little small.

    -If you make your "HTML and CSS foundation" an <h2> it will look correct.

    -The name placement of Greg Hooper should be a little lower.

    Marked as helpful
    1
View more comments