vladyslav-shulhach

Latest comments

• 

  Justice Jatau•140

  @JusticeJatauSubmitted about 1 year ago

  

  Newsletter-signup-form with HTML, CSS and JS

  #sass/scss

  1

  20
  

  vladyslav-shulhach•170

  @vladyslav-shulhachPosted 17 days ago

  Great job on your project! It's pretty similar to the suggested design, and I've tested it out and it works well. Your HTML structure is already strong, with semantic elements such as <h1>, <label>, and <ul>. But there are a few areas where you could make your code even better by improving accessibility and maintainability.

  One big thing you can do to make this form more usable is to use a <form> element instead of <div class="form">. This small change makes the form more meaningful and it means that users can submit it by pressing 'Enter', which is easier for them.

  You've got a label for the email input, but adding a for attribute would properly associate it with the input field, which would make it easier for screen readers to interpret.

  <label for="input">Email Address</label>
  <input id="input" type="email" placeholder="email@company.com">
  

  Another key thing to keep in mind is to make sure error messages can be seen. At the moment, when an error message appears, screen readers may not announce it properly. To fix this, add aria-live="polite" so it gets picked up when it becomes visible:

  <span class="txt hidden" aria-live="polite">Valid email required</span>
  

  So, not only is it more accessible, but adopting the BEM methodology can really improve your SCSS structure. For example, some class names are too general, which makes scaling and maintenance more difficult. BEM provides a clear naming convention that keeps styles easy to work with. Instead of this:

  <div class="container">
    <div class="content">
      <h1>Stay updated!</h1>
    </div>
  </div>
  

  Using BEM would structure it more effectively:

  <div class="newsletter">
    <div class="newsletter__content">
      <h1 class="newsletter__title">Stay updated!</h1>
    </div>
  </div>
  

  Your styles could be improved with nesting to make them cleaner and more readable. For example, instead of defining styles separately for <ul> and <li>, you can structure them within a block like this:

  ul {	// Better to use a BEM class like .newsletter__list
    display: flex;
    flex-direction: column;
    gap: 10px;
  
    li {	// Better  &__item
      display: flex;
      gap: 10px;
      list-style: none;
      font-weight: 400;
    }
  }
  

  You're doing really well and these improvements will make your project even stronger. Keep up the good work and happy coding!

  0
• 

  P

  thibault.deverge•310

  @thibault-devergeSubmitted 5 months ago

  

  Article Preview Component - Solution

  #sass/scss

  1

  30
  

  vladyslav-shulhach•170

  @vladyslav-shulhachPosted about 1 month ago

  Great job on your project! The design is excellent – every element fits perfectly into the proposed layout, and your attention to detail is impressive. I was particularly impressed by your well-organised SCSS. It has a clear structure that makes maintenance easier, and it means that we don't have to scroll through endless code to look for or fix things. Your approach is both elegant and efficient, and I'm inspired to adopt similar practices in my own projects, especially the bigger ones.

  Well done on utilising the BEM methodology. It makes the code so much easier to work with, and it's great to see such a well-structured approach in action.

  I have a few suggestions on how you could further enhance your code and workflow in future projects:

  • Accessibility:
    When you're developing a website, it's really important to not overlook accessibility. If you provide meaningful descriptions, it'll improve the experience for users who rely on assistive technologies and it'll also be better for SEO. Instead of leaving the alt attributes empty or using aria-hidden="true", it's better to include descriptive text. For example, rather than hiding the Facebook icon from screen readers, you could add alt="Facebook icon" so that assistive technologies can recognise it.

  • User Interaction:
    The social share panel opens when clicking the button, which is great. But it would be even better if it also closed when clicking outside of it or pressing the Esc key. If you could make it so that JavaScript could do this, it would make it feel more user-friendly.

  Overall, you have done an amazing job. Keep up the excellent work, and happy coding!

  0
• 

  ChinaLiuXinXin•80

  @ChinaLiuXinXinSubmitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  I learned both grid and flex well now.

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

  How to make set difference area for cretain box, but eventually i fixed that.

  

  Responsive loading pages using CSS Grid

  #sass/scss

  3

  30
  

  vladyslav-shulhach•170

  @vladyslav-shulhachPosted 2 months ago

  Great job on your project! You’ve made a solid effort with the layout. Here are a few tips that might help you take it to the next level:

  • Nice use of semantic HTML. It’s good to see you using elements like main and article. These tags make your code more meaningful and easier to read.

  • Be careful with identifiers. I noticed that some ids, like user-profile, user-name, and user-status, are used more than once. In HTML, id is supposed to be unique for each element. If you reuse it, it might cause problems, especially when you start working with JavaScript. It’s better to use class for cases like this.

  • Accessibility is important. Adding alt attributes to your images can really improve the experience for people using screen readers. For example, instead of leaving the alt attribute empty, you could write something like alt="Profile picture of Daniel Clifford". It’s a small change, but it makes your site more user-friendly for everyone.

  • Responsive design tips. Your layout looks great on desktops and very small screens (like under 375px), but on larger smartphones and tablets, it could use a bit more balance. Sometimes the grid gets too narrow or overflows. Fixing this will make your site look good on all devices.

  • Try a mobile-first approach. Have you thought about designing for smaller screens first? It can make things easier because you start simple and then add styles for larger screens using media queries. Here’s a quick example to show what I mean:

    /* Default styles for mobile screens */
    main { 
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 4rem 0; 
    } 
    
    /* For tablets */ 
    @media (min-width: 768px) { 	
        main { 
    	        /* Use two columns for better readability on tablets instead of four */
            grid-template-columns: repeat(2, 1fr); 
        } 
    } 
    
    /* For desktops */ 
    @media (min-width: 1440px) { 
        main { 
            grid-template-columns: repeat(4, 1fr); 
        } 
    }
    
    

  These adjustments will make your project look even more professional. You’re doing great, so keep it up and happy coding!

  0
• 

  Lauren Delmar•100

  @lrdelmarSubmitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  I am really pleased with the layout and look. My main struggle was figuring out how to align the elements on the grid. Spent a bit of time at the beginning working on the SASS architecture. The code itself didn't really take me so long, I spent a lot of time doing research and looking at different ways to get the result.

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

  I think I spent most of the time on the cards, how to make the layout and spacing work for them. I had a look at other peoples solutions which was interesting to see how it could have been done differently. Also the box-shadow was fiddly, I made a custom colour because the lightest one provided was too dark.

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

  I chose to keep everything inside the grid. I have a min height and width on the cards which made grid alignment a little trickier. I wasn't sure if there was another way to fix the height/width of the cards without affecting the grid layout. I didn't want them to grow/shrink but wondering if I could have used a different method to achieve the same results. Thought about putting the headings outside the grid but the gap was too big. Also I was assuming this would be the component within a page so it should be all in one container.

  

  Four Card Feature with SASS

  #sass/scss

  1

  30
  

  vladyslav-shulhach•170

  @vladyslav-shulhachPosted 3 months ago

  Great job on your project! Here's what I noticed:

  • Your project is true to the original design and the attention to detail is great!
  • I'm impressed with your SCSS setup. Using a folder structure makes your code more organised and scalable, while I still use a single SCSS file.
  • You've used advanced SCSS features such as @use and logic, which add flexibility and maintainability to your code. This is something I haven't explored much yet, so it's inspiring to see it in action!

  However, I do have one small suggestion. To improve accessibility in your HTML, make sure you include alt attributes for images. This will help visually impaired users understand the content of the images through screen readers.

  To be honest, I can't give you any more suggestions for improvement because your SCSS code looks more advanced than mine. I feel like I can actually learn a lot from your approach!

  Keep up the great work, and happy coding!

  Marked as helpful

  0
• 

  espxdev•60

  @espxdevSubmitted almost 2 years ago

  

  Responsive landing page using CSS flex property

  #sass/scss

  1

  60
  

  vladyslav-shulhach•170

  @vladyslav-shulhachPosted 3 months ago

  Great job on the project! I have a couple of suggestions that might help improve your code and make it even more efficient.

  First, I noticed some unnecessary lines in your html and universal selectors. For example, you're using -webkit-box-sizing and -moz-box-sizing, which are pretty much obsolete these days because most modern browsers support the standard box-sizing property. Simplifying this would make your code neater. Also, you're setting box-sizing in both the html selector and the universal selector, which is unnecessary. You can just keep it in the universal selector for a cleaner, more maintainable approach. I've put together a revised version for you:

  *, *::before, *::after {
      box-sizing: border-box; /* Universal box-sizing */
      margin: 0; /* Reset margins globally */
      padding: 0; /* Reset padding globally */
  }
  

  This setup means you don't need to set line-height: 0; to fix spacing issues between images and text. It's simple and gets the same result.

  Secondly, I noticed a proportional layout issue on tablets. When resizing the screen, the image and product description lose alignment because the max-width of the image and .product container are both set to 100vw. This creates an imbalance where the image width stays the same, but the content can expand beyond it.

  To fix this, you could set the width of both the image and content (.product_description) sections to 100% within the .product class. Avoiding max-width in this case ensures consistency and better responsiveness. Here's an example of how you could refine the layout:

  .product {
      width: 21.5rem; /* Fixed width (or adapt as necessary) */
  
      &_descriptions {
          padding: 26px; /* Ensures consistent spacing */
          width: 100%; /* Not necessary, but ensures that it reaches the container */
      }
  
      &_image {
          width: 100%; /* Scales the image with the container */
          &__img {
              width: 100%; /* Maintains proportions */
          }
      }
  }
  

  You're doing a great job, and with just a few minor changes, your design will be even more polished. Keep up the great work and happy coding!

  0
• 

  Gina•30

  @ZoooriielSubmitted 4 months ago

  What are you most proud of, and what would you do differently next time?

  I am proud of how quickly I was able to complete this challenge, and I’m particularly happy with how much neater my CSS turned out compared to previous projects. For next time, I’d like to experiment with using a CSS framework like Bootstrap.

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

  One of the main challenges I faced was with the images not loading on the live site. I spent a few hours troubleshooting, thinking the issue was with the paths or something else, but eventually realized that I hadn’t used git add to commit the image files to the repository. Once I added the images to GitHub, the problem was resolved.

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

  I’d love some guidance on using a CSS framework, specifically Bootstrap. I want to learn how to incorporate it into my projects to improve the overall responsiveness of my designs.

  

  Recipe Page: HTML and Responsive Design Challenge

  1

  40
  

  vladyslav-shulhach•170

  @vladyslav-shulhachPosted 4 months ago

  Great job on your project! The design is looking really close to the original, and it's clear you've put a lot of effort into it. I have a few suggestions that might help you take your code to the next level, making it even cleaner and easier to maintain. Here are a few things to consider:

  1. Embrace semantic HTML

  You're already doing a great job, but adding a little more semantic HTML can make a big difference. Using tags that describe the content (not just its appearance) can make your code easier to read, more accessible to visually impaired users, and better for search engines (SEO).

  For example:

  • Instead of <div id="recipe_background">, consider using <main> to wrap the main content of the page.
  • Swap <div> elements for sections of content with <section> for ingredients, prep time, or instructions.
  • You might also consider using <footer> instead of <div class="attribution"> for attribution content.

  These small adjustments can help anyone to read your code understand the purpose of each part. You can find a useful guide to semantic HTML here and here.

  2. Simplify styling with reusable classes & CSS variables

  I noticed you've got a lot of small classes in your HTML that are just for styling, like colour or font weight adjustments. While this approach works, it can make the code a bit harder to manage in the long run. Instead, creating reusable classes or using CSS variables can save time and keep things tidy.

  For instance:

  • Instead of using individual classes for every little styling tweak (<h3 class="brown_800 youngserif_font header_fontsize">), you could create one class like .subheading that combines those styles.

  • You can also use CSS variables at the top of your stylesheet with :root {} for colours, fonts, or other constants:

    :root {
      --brown-800: hsl(14, 45%, 36%);
      --young-serif: "Young Serif", serif;
      --header-font-size: 24px;
    }
    

    Then, use the variables with var() to keep things consistent:

    .subheading {
      font-family: var(--young-serif);
      font-size: var(--header-font-size);
      color: var(--brown-800);
    }
    

  This will make it easier to make changes later on, as you'll only need to update the variable instead of looking for each and every single instance in your stylesheet.

  3. Better use classes instead of IDs for styling purposes

  Using IDs for styling is fine, but they're best for unique elements because they have higher priority in CSS, which can make changes harder later. IDs are great for JavaScript, but for styling, classes are usually a more flexible and reusable choice.

  4. Try to explore Flexbox & Grid for layouts

  Using Flexbox and Grid can make your layout work much easier. These are powerful tools for organising the page layout without any unnecessary positioning tricks. If you haven't used them yet, you might want to give them a try. They give you more control over how elements are placed and aligned.

  Here are a couple of great resources to get you started:

  • Flexbox Guide on CSS-Tricks
  • Grid Guide on CSS-Tricks

  There's also a fun game called Flexbox Froggy that’s perfect for learning Flexbox interactively: Flexbox Froggy.

  Again, great job on your project! Keep up the good work and I'm sure you will get better and better. We are all learners, so let's grow together!

  0