py-code314

Latest comments

• 

  daniel•205

  @danielashjariSubmitted 27 days ago

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

  I'm proud of...

  • my js file, it was my first time working with promises and json files
  • my design got better and closer to the given task
  • using svg in more responsive way

  Things I'd do differently...

  • use aria variables
  • use libraries and frameworks but i gotta get there first

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

  • how to show data from json file in my html -> use promise and async functions

  async function populate() {
      const requestURL = "dist/js/data.json";
      const response = await fetch(requestURL);
      const data = await response.json();
      dailyBtn.addEventListener("click", () => {
          populateDaily(data);
      });
      ...}
  
  function populateDaily(data) {
      data.forEach(item => {
          ...
          time.innerHTML = `${item.timeframes.daily.current}hrs`;
          lastTime.innerHTML = `Last Day - ${item.timeframes.daily.previous}hrs`;
      });
  }
  

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

  in styles mostly and how to center vertically

  

  Time tracking dashboard

  #sass/scss

  1

  20
  

  py-code314•430

  @py-code314Posted 25 days ago

  Hello,

  Congrats on finishing this project 🎉. I like that you added tablet design too for the project 👏🏼

  I have a few suggestions hopefully can improve your project

  FUNCTIONALITY

  1. On page load cards are empty. Here you might want to populate the cards with daily stats on page load so that user can understand it better
  2. At some screen size widths there’s no gap between dashboard and sides of the page. You can add some padding to body so that it looks better on every screen size
  3. Add styles to the active button for visual clarity. They all look the same right now even user clicked a particular button
  4. You might want to change the sentence from ‘Last Day’ to ‘Yesterday’ as that makes more sense

  HTML

  1. I see that you’re using <object> tag for image but as per MDN

  “The <object> HTML element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.”

  and I believe that the image isn’t from an external source here. You might want to do some more research and decide for yourself

  2. It may be more appropriate to use <p> in place of <div> for .time and .last-time

  CSS

  1. I noticed that there are some CSS reset properties through out your code. It might be convenient to use a CSS Reset at the beginning of your CSS file such as Josh Comeau's or Andy Bell's
  2. With selectors like article .wrapper .container .downer .time if you change class names in future that's gonna break the styles of your elements at multiple places
  3. Instead of adding font-family at 2 or 3 places you can just add it to body and reduce the number of lines

  JS

  1. I like the simplicity of your JS functions, though I have a small suggestion - May be you can write just one function that can populate the data based on the button clicked? Then you can have only one function instead of three and you can avoid repeat code

  Cheers and All the Best!!

  0
• 

  P

  Sebastian•220

  @AbestianSubmitted about 1 month ago

  

  Newsletter Form (SASS+JS, RWD)

  #sass/scss#bem

  1

  10
  

  py-code314•430

  @py-code314Posted about 1 month ago

  Hi Sebastian,

  Congrats on successfully completing the project 🎉

  I have a few suggestions I think might help you improve your code

  HTML

  1. For 'card list' it seems like you are using <div> for .paragraph-with-icon rather than the semantic HTML element <ul>. Same with <p>, you should instead use <li> for list item here as it's important to use semantic HTML elements for the purpose of screen readers and SEO
  2. I think you should use the image ‘icon-list.svg’ for list item decorative markers as they are already optimized for this purpose
  3. Also you can leave ‘alt text’ empty for images in list items as they are purely decorative
  4. Consider adding aria attributes to relevant elements for Accessibility
  5. Using <form> element for Success message is incorrect in my opinion as there are no input or label elements inside the container

  CSS

  1. It’s probably better to use <picture> element to swap the card images instead of doing it by CSS as screen readers won’t have access to the image. I believe that the main card image is not just decorative
  2. I think we are supposed to style Success message for mobile view differently. That's why in mobile view 'form' is not taking up the whole available height and at 320px screen width Success message is getting cut on both sides
  3. Just a minor issue - Indentation doesn’t look good in your _card.scss file. Adding editor.tabSize: 2 in VS Code's 'settings.json' file fixed it for me

  JS

  1. You might want to show different error messages to the user depending on the type of error
  2. Try to hide the 'form' when Success dialog is shown
  3. You can add 'Esc' key support for dismissing Success message dialog if you want

  I hope these suggestions are helpful to you. Happy coding!

  Marked as helpful

  1
• 

  Tunde Abdulhamid Sanusi (Tuham)•190

  @tuhamworldSubmitted 2 months ago

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

  The sharing popup box was a bit tricky, as I intended to use the same share icon to listen to click events and show different behaviors for both mobile and PC.

  What I would do differently next time is to sketch on paper how I would work on the solution

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

  I initially was using CSS media query to hide and show elements but then eventually used Javascript for the results

  

  Interactive Article Preview Component

  #sass/scss

  1

  20
  

  py-code314•430

  @py-code314Posted about 2 months ago

  Hello, Congrats on finishing the project. 🎉 I find it a bit tricky implementing the interactive features. As I've gone through your code I noticed some issues and wanna share them with you

  HTML

  1. If you are using two images for drawers it's better to use <picture> element.
  2. You should provide alt description for the images as they aren’t decorative
  3. You can’t skip h1, h2 and use h3 for card title. It's semantically incorrect
  4. SHARE text should be in lower case and converted into uppercase using CSS
  5. I think social media icons should be wrapped in a <div>, not <span>
  6. Social media icons should be inside <a> tags as user expects to go to that specific website when clicked on
  7. Aria attributes should be added to Social media icons container and Share button for accessibility as popup box shows up only when the button is clicked
  8. Consider changing <span>s to <div>s in class rhs-meta__share
  9. Text 'Michelle Appleton' should be a <p> not a heading
  10. There is repeat code for Share Icons Box in index file. May be you can use position property to place the box at different places without repeating the code?

  CSS

  1. You should have a max-width on the card so that it doesn’t get too big
  2. You can center the card using flex instead of using margins
  3. Card title & description font look bigger than the text in design files. May be you are using higher font-size values!
  4. At 1440px width there’s too much empty space below card footer
  5. Main image is getting squished vertically when I gradually decrease screen width (most prominent at around 800px). It's probably because of display: flex on main container
  6. Share Icons Box isn’t taking the whole width of the card at around 750px screen width and overflowing at around 320px width

  JS

  1. I suggest adding features to hide Share Icons Box when user clicks anywhere outside of Share button or uses Escape key
  2. I am not able access Share button using TAB key. Adding Aria attributes should fix that. Make sure user can access Social media icons in the box using TAB key when it's open

  Hope these suggestions are helpful to you. All the best!!

  Marked as helpful

  1
• 

  achallett•160

  @achallettSubmitted 7 months ago

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

  Managed to get it working pretty well and close to the design. I think my card numbering is off so would make sure that is correct in mobile first before starting desktop

  

  Responsive Testimonials Using Grid

  #bem

  1

  20
  

  py-code314•430

  @py-code314Posted 5 months ago

  Hello,

  Good job working on the solution 👏🏼. It looks good on both mobile and desktop screen sizes. Kudos for good use of CSS Grid

  As I went through your code I thought I could make some suggestions to improve the code. Here they are:

  HTML:

  1. For .card class you can use <figure> instead of <div> if you wanna use semantic HTML tags. Then you can use <figcaption> for .card__user_profile
  2. You can also wrap testimonial text inside <blockquote> and two <p>s instead of two separate <div>s to make it more accessible
  3. The images are mostly decorative so you can leave 'alt' empty. I believe it's not a good practice to use 'picture' or 'photo' in alt text

  CSS

  1. You can add more custom variables like 'font-size', 'font-weight' and 'spacing' variables in :root if you wish
  2. I suggest to use a global CSS reset either by Andy Bell or Josh Comeau
  3. Around 600 - 800 px screen width some cards have too much gap between second paragraph and bottom border and I guess it's because of min-height you have in .card
  4. Border around images looks a little thicker in design files. You can probably use 2px there

  Don't have too many suggestions 😁 and hopefully these are helpful to you. Wish you all the best!

  0
• 

  P

  Untest57•80

  @Untest57Submitted 6 months ago

  

  Four card feature section solution

  #sass/scss

  1

  10
  

  py-code314•430

  @py-code314Posted 6 months ago

  Hello,

  nice job with the project. Thought I could give you some suggestions regarding your code.

  1. I noticed that your /src folder contains all the projects. Aren't we supposed to make separate repos for different projects?
  2. It's better not to use <br> in h1. Please refer to this MDN article . Instead you can use display: block on <span>
  3. Is there a reason you used two different methods when defining the colors in colors.scss?
  4. I think rather than limiting the width of <body>, better approach would be using justify-content: center. You also don't need margin: 0 auto
  5. Text in .header__description taking up whole width of the screen when screen size goes below 768px. I think it's a bug and you can use max-width in ch units to fix that
  6. It should be 4 rows in the grid with height - auto on them in desktop view
  7. We shouldn't give fixed width and height to cards. Width should be defined in grid-template-columns property and contents of the card should determine the height
  8. .cyan & .blue should be occupying middle 2 rows, .red should be occupying top 2 rows and .orange bottom 2. I can't figure out how 'cyan' & 'blue' sitting in the middle like that lol
  9. Border radius can be increased to match the curve in design

  These are just suggestions and hopefully helpful. All the best

  Marked as helpful

  1
• 

  Antonio Riccelli•80

  @Antonio-RiccelliSubmitted 6 months ago

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

  I'm happy that I used a preprocessor like SASS for the first time in a project. I knew of it but never quite managed to use one for something.

  Next time I would plan a bit more the HTML structure ahead of starting.

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

  The real challenge was finding the right sizes and values for certain properties and making the whole layout responsive and coherent.

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

  • I would like to know if my choice of HTML semantic tags was correct.
  • I'd like advice as to whether my SASS code can be simplified.

  Also, a piece of advice:

  • I keep getting an error in the HTML report saying

  Element "p" not allowed as child of element "hgroup" in this context. (Suppressing further errors from this subtree.)

  This doesn't seem to make sense, as the hgroup header exists precisely to wrap these type of tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup

  I could be wrong though!

  

  Recipe page - HTML, CSS, SASS

  #sass/scss

  1

  20
  

  py-code314•430

  @py-code314Posted 6 months ago

  I also got the same error and then I found this post from 'stack overflow'. I am still confused to use it or not 😀

  1