Skip to content
OverviewSolutions
9
Comments
9
Prashant Uniyal
@mod-prashant

All comments

  • 6alactico•350
    @6alactico
    What are you most proud of, and what would you do differently next time?

    I am most proud of making the newsletter interactive. I am unsure what to do differently next time, but I will continue strengthening my knowledge of HTML, CSS, and JavaScript to make my code more efficient.

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

    The main challenge I encountered was implementing JavaScript to make the newsletter interactive. I overcame this challenge by understanding the project goals and referencing materials.

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

    Any feedback is welcome.

    Newsletter Sign-Up With Success Message

    1
    Prashant Uniyal•170
    @mod-prashant

    I think you have made a perfect copy of the design. But there if there is one thing you could do is adding some JavaScript to make the email user inputs appear inside the success message like this

    for HTML add a class to the bold tag inside your paragraph of success container.

    <b class="userEmail">ash@loremcompany.com</b>.

    for JavaScript make a function to assign input value to the class you made.

    // assign email
function Assign_Email(email){
  const userEmail = document.querySelector('.userEmail');
  userEmail.innerHTML=email;
}

    and call that function when you display success container.

        // If valid, proceed
    const formData = new FormData(e.target); // Form data object
    const data = Object.fromEntries(formData.entries());
    Assign_Email(emailValue);
    newsletter.classList.add('hidden');
    success.classList.remove('hidden');
});
    Marked as helpful
  • P
    Petar Rakocevic•280
    @PetarR21
    What are you most proud of, and what would you do differently next time?

    I learned how to toggle popup on click, in different ways, depending on a screen size.

    Also I learned how to position the popup, and how to create triangle shape using CSS.

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

    Biggest challenge was to toggle popup on click, and to make it popup differently on mobile screens.

    Also, I spend quite some time figuring out how to make triangle shape using CSS.

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

    I would like to improve the code, so it is more robust and clean.

    Also, I would edit a project, in such I way that I will use provided SVG-s for the social icons, not Font Awesome icons.

    Responsive Article Preview Component | Using Flexbox and Media Queries

    1
    Prashant Uniyal•170
    @mod-prashant

    It's Perfect from my Perspective.

    The only advice I can think of is editing the drawer image for desktop

  • Prashant Uniyal•170
    @mod-prashant

    I think for background color you could use "Purple50" give in styleguide.md

  • Prashant Uniyal•170
    @mod-prashant

    I think you can change the Background color for the cards. And I am not a professional, so I don't know for sure but I personaly like making ID or Class instead of this section:nth-child(2).

  • Prashant Uniyal•170
    @mod-prashant

    Hello, I think your code is close to the design, But

    • you could try using css grid intead of flex to center the parent
    • For <h1> Use Font Family mentioned in style-guide.md to make it more accurate to the design
  • Prashant Uniyal•170
    @mod-prashant

    I think to make it more like the design.

    You can add styles to headings And, you can add left padding to lists like

    ul{
    padding-left: 1rem;
}
ul ::marker{
    color: var(--Rose800);
    font-weight: 600;
}
ul li{
    padding-left: 1rem;
}
    Marked as helpful
  • Prashant Uniyal•170
    @mod-prashant

    Here are some suggestions to improve your code :

    1. Semantic Elements

    • Instead of using generic <div> tags for every section, try to use more semantic HTML elements like <article>, <section>, and <header>. This makes the code more readable and improves SEO. 2. Accessibility Improvements
    • Add 'alt' attributes to the '<img>' tags to describe the images for screen readers. 3. Use Variables for Consistency Define common colors, font sizes, and spacings as CSS variables in :root. This ensures consistency and makes future adjustments easier.
    /* STYLE.CSS */

:root {
    --font-base: 1rem; 
    --font-small: 0.75rem;
    --font-large: 1.3rem;
    --line-space: 1rem;
    --image-side: 5rem;
    --image-radius: 2.5rem;
    --btn-padding: 0.7rem 5rem;
    --btn-radius: 0.5rem;
    --btn-spacing: 0.8rem;
    --btn-weight: 600;
    --Green: hsl(75, 94%, 57%);
    --White: hsl(0, 0%, 100%);
    --Grey700: hsl(0, 0%, 20%);
    --Grey800: hsl(0, 0%, 12%);
    --Grey900: hsl(0, 0%, 8%);
}
  • JosephArifin•60
    @JosephArifin
    What are you most proud of, and what would you do differently next time?

    I am proud of using rem and em units for more consistency which I believe is better than pixels (please correct me if I am wrong). I would try to do this project a bit faster. Any general tips on time saves would be nice.

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

    On the author div section, I couldn't figure out why flex-direction row wasn't working and I realized that for display I had put flexbox instead of flex.

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

    Tips on how to save time in general. Maybe how I can catch stupid errors faster. Also some tips on how I can improve my code would be nice :)

    Used rem and em for relative consistency(I think its for relative con)

    2
    Prashant Uniyal•170
    @mod-prashant

    First of all, I want to commend you on the excellent work you've done with your project. As a beginner myself, I can clearly see the effort you’ve put into it.

    Here are some suggestions to improve your code :

    1. Semantic Elements

    • Instead of using generic <div> tags for every section, try to use more semantic HTML elements like <article>, <section>, and <header>. This makes the code more readable and improves SEO.

    2. Accessibility Improvements

    • Add 'alt' attributes to the '<img>' tags to describe the images for screen readers.

    3. Avoid Repeated ID Selectors for Styling

    • Use class-based selectors for reusable styles instead of IDs (#tag, #title, etc.), as IDs are specific and limit reusability.
    • IDs should be reserved for unique identifiers that are referenced by JavaScript or anchors.

    4. Avoid redundant class

    • Avoid redundant class names like 'class="inside-card"' for each child element of '#card-container'.

    5. Simplify Complex Rules

    • Simplify overly specific selectors and avoid redundancy. For example, #content #title:hover can simply be .title:hover.

    6. Use Variables for Consistency

    • Define common colors, font sizes, and spacings as CSS variables in :root. This ensures consistency and makes future adjustments easier.
    /* STYLE.CSS */

:root {
  --primary-color: hsl(47, 88%, 63%);
  --secondary-color: hsl(0, 0%, 7%);
  --light-gray: hsl(0, 0%, 42%);
  --white: hsl(0, 0%, 100%);
  --font-family: 'Figtree', sans-serif;
  --border-radius: 20px;
  --shadow-color: black;
  --font-small: 0.875em;
  --font-base: 16px;
  --font-large: 1.5em;
  --spacing: 1.5rem;
}
    Marked as helpful
  • Prashant Uniyal•170
    @mod-prashant

    Your github link is not to available to me so, Iam not able to check your code