Skip to content
OverviewSolutions
65
Comments
131
P
Lo-Deck
@Lo-Deck

All comments

  • Lo-Deck•2,710
    @Lo-DeckPosted 15 days ago

    Hi well done for this challenge.

    There is a 404 error when I click on viewCode link.

    You need to use more semantic tag to improve your HTML, it's better for screen-reader and SEO.

    Use a div when there is no other choices, you can use section, article...

    Hope to be helpful.

    0
  • Lo-Deck•2,710
    @Lo-DeckPosted 28 days ago

    Hi well done for this challenge,

    I'll give this link you check out the mistake for HTML and CSS. 3WC validator. like Duplicate ID talk <p id="talk"> you can't set several ID it's only one.

    You need to use more semantic tag to improve your HTML, it's better for screen-reader and SEO.MDN

    like <div class="container"> to <main class="container">.

    It's better to use em or rem instead of px. FreeCodeCamp. FreeCodeCamp.

    And try to center your website, I just add this to center it :

    body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

    Hope to be helpful.

    Marked as helpful
    0
  • Naveen K•50
    @naveenkkannanSubmitted 28 days ago
    What are you most proud of, and what would you do differently next time?

    I’m proud to have achieved a nearly flawless design. Moving forward, I plan to explore alternative methods to further enhance responsiveness and adaptability.

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

    I initially faced challenges with achieving responsiveness, but by refining each component with targeted media queries, I successfully reached the desired outcome.

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

    In the mobile view, there is a small gap between the image and its container. I’ve tried several methods to resolve it, but adjustments tend to disrupt other alignments. Assistance in removing this gap without impacting the overall layout would be greatly appreciated.

    Product preview card component

    2
    Lo-Deck•2,710
    @Lo-DeckPosted 28 days ago

    Hi well done for this challenge,

    It's better to use em or rem instead of px. FreeCodeCamp. FreeCodeCamp.

    I don't understand why you set a lot of @media (min-width:768px) , usually you set it just once. So It's hard to read your code, keep it clear, after it's a mess when you need to debug it or someone else try to read your code.

    Hope to be helpful.

    Marked as helpful
    0
  • roobiwebdev•530
    @roobiwebdevSubmitted 28 days ago
    What are you most proud of, and what would you do differently next time?

    Today’s project is another exciting one.

    Project Name: Newsletter Sign-Up Form with Success Message

    This project is all about creating an engaging and user-friendly newsletter sign-up form with a success message feature. It’s sleek, interactive, and perfect for gathering subscribers! Plus, it has error state handling to guide users when they enter invalid email addresses.

    Technologies Used #HTML

    #CSS

    #JavaScript

    HTML Structure The HTML file sets up a clean layout with a form for users to sign up for a newsletter. It includes fields for email input and a success message section.

    CSS Styling Font Import: Used Google Fonts to import the "Roboto" font for a clean and modern look.

    Global Styles: Sets default padding and margin, box-sizing, and specifies the font-family for consistency.

    Layout: Utilizes Flexbox for a centered and responsive design. The layout includes a vibrant background, intuitive form fields, and a polished success message.

    Interactive Styles: Adds hover effects and responsive states to enhance user experience.

    JavaScript Functionality Email Validation: Ensures users enter a valid email address.

    Interactive Feedback: Displays a success message upon successful email submission.

    Error State Handling: Provides feedback for invalid email entries, guiding users to enter correct information.

    User-Friendly: Allows users to dismiss the success message and reset the form easily.

    • Enjoyed every moment coding this!

    • Completed 40 out of 100 challenges so far—keeping up the momentum!

    • Feedback is always welcome—would love to hear what you think—drop your thoughts, guys! Let’s grow together!

    Responsive Newsletter-sign-up-form

    1
    Lo-Deck•2,710
    @Lo-DeckPosted 28 days ago

    Hi well done for this challenge,

    I'll give this link you check out the mistake for HTML and CSS. 3WC validator.

    You need to use more semantic tag to improve your HTML, it's better for screen-reader and SEO. Use a div when there is no other choices, you can use section, article... MDN

    like <div class="all"> to <main class="all"> and <div class="content2"> to <section class="content2">.

    It's easier to start with a mobile-approach FreeCodeCamp.

    It's better to use em or rem instead of px. FreeCodeCamp. FreeCodeCamp.

    Hope to be helpful.

    1
  • Lo-Deck•2,710
    @Lo-DeckPosted 28 days ago

    Hi well done for this challenge,

    I'll give this link you check out the mistake for HTML and CSS. 3WC validator.

    You have some mistake you can avoid just by checking before releasing your website.

    It's easier to start with a mobile-approach FreeCodeCamp.

    Another link It help me a lot when I need to do a form. MDN.

    Hope to be helpful.

    0
  • Lo-Deck•2,710
    @Lo-DeckPosted 28 days ago

    Hi well done for this challenge,

    I'll give this link you check out the mistake for HTML and CSS. 3WC validator.

    And you see your mistake like : Element p not allowed as child of element ul in this context

    It's easier to start with a mobile-approach FreeCodeCamp.

    Try this way and I think you 'll find this method easier to set your website.

    The button there is a problem when you want to hide the item. It's not working, when you meet this problem it's often a z-index issue.

    .preview-card__share-button-container {
  height: fit-content;
  width: fit-content;
  z-index: 1;  \\Add this line
}

    Hope to be helpful.

    0
  • Lo-Deck•2,710
    @Lo-DeckPosted 28 days ago

    Hi well done for this challenge,

    I'll give this link you check out the mistake for HTML and CSS. 3WC validator.

    It's better to use em or rem instead of px. FreeCodeCamp. FreeCodeCamp.

    It's easier to start with a mobile-approach FreeCodeCamp.

    And take care of the README file, the README-template is the one you need to add after you modificated it to fit your solution.

    Hope to be helpful.

    Marked as helpful
    0
  • Uzair Bajwa•330
    @bajwacodesSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    My first landing page ever, super happy with the progress.

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

    Can anyone guide what's the ideal way to scale up that big computer image on bigger layouts? For me, it wasn't big enough even at width: 100% so I had to force it to get bigger using min-width:130%

    Clipboard Landing Page

    2
    Lo-Deck•2,710
    @Lo-DeckPosted about 1 month ago

    section or article needs a h2 or h3 I mean a title, look with the 3wc validator it explains the mistake. If there is no other choices use a div but a section need a title. MDN. It's not obligaory but it's good practice for SEO.

    Marked as helpful
    0
  • Lo-Deck•2,710
    @Lo-DeckPosted about 1 month ago

    Hi well done for this challenge,

    Take care of the link view code head toward a 404 page not found.

    0
  • Lo-Deck•2,710
    @Lo-DeckPosted about 1 month ago

    Hi well done for this challenge,

    Take care of the link view code send a 404 page not found.

    Hope to be helpful.

    Marked as helpful
    0
  • Lo-Deck•2,710
    @Lo-DeckPosted about 1 month ago

    Hi well done for this challenge,

    You need to use more semantic tag to improve your HTML, it's better for screen-reader and SEO.

    Use a div when there is no other choices, you can use section, article...

    It's better to use em or rem instead of px. FreeCodeCamp. FreeCodeCamp.

    Hope to be helpful.

    Marked as helpful
    1
  • Lo-Deck•2,710
    @Lo-DeckPosted about 1 month ago

    Hi well done for this challenge,

    It's better to use em or rem instead of px. FreeCodeCamp. FreeCodeCamp.

    When I looked at your website the image doesn't correctly fit the container :

    .illustration-hero {
  position: relative;
  border-radius: 20px 20px 0px 0px;
  width: 100%;  ! I need to add this line!
}

    Hope to be helpful.

    0