Ian Parker

Latest comments

• 

  P

  Srishti Chaudhary•250

  @itsmesrishtiSubmitted 6 months ago

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

  Finishing the project. This is the first time I have worked with json files and it was interesting!

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

  I had some problems in properly accessing the correct key and its value but using console.log() I was able to figure out how to use them correctly.

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

  Any advice is welcome!

  

  Time Tracking Dashboard

  #sass/scss

  1

  21
  

  P

  Ian Parker•200

  @i-prkrPosted 6 months ago

  I really enjoyed looking at your solution!!

  I thought your javascript was clean and concise, it helped me realise I should go back and tidy mine in a few ways!

  One suggestion that came to mind looking at your source code was the 7-1 pattern for Sass that I noticed people using and found this website that was helpful: https://sass-guidelin.es/#the-7-1-pattern. Note some of the content in the site isn't up to date with recent Sass updates, but the concepts are all there. I thought it might help to make your main.scss tidier and easier to find your components scss.

  The solution looks really great and love the attention to detail. I realised I missed small details such as distinguishing between 'hr' and 'hrs', etc.

  Thanks for your solution and nicely done!!

  1
• 

  Marc Francis•730

  @marcfrancissSubmitted 10 months ago

  

  Responsive Newsletter Sign-up Form (SaSS, jQuery)

  #accessibility#sass/scss#jquery

  1

  10
  

  P

  Ian Parker•200

  @i-prkrPosted 7 months ago

  I really enjoyed looking at your solution! It was interesting to see the jQuery approach, and the form looks really nice, I especially like the debounced input!!

  One suggestion I had was to help make the images responsive with media queries, using the <picture> element and providing the two different sized images. I found the web dev article really helpful for these: https://web.dev/learn/design/responsive-images. I think possibly the object-fit property could also be used here to help keep the sizing consistent between screen sizes.

  Thanks for your solution, I hope this might be of some help!

  Happy coding :)

  Marked as helpful

  0
• 

  VictorGerfaud•190

  @JamesLavironSubmitted 7 months ago

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

  I'm proud of the way I decided to fully commit on mobile first. I'm also porud of my use of media queries combined with flexbox/grid layout.

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

  I encountered challenges in order to separate which CSS had to go in which class. I tried to keep generic and specific css separated in order to make easily reusable.

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

  I'd like help with the use of @use instead of @import. If you got some improvements on images management, don't hesitate also :)

  

  Responsive landing page using FlexBox/Grid

  #bem#vue#sass/scss

  1

  20
  

  P

  Ian Parker•200

  @i-prkrPosted 7 months ago

  This is a great solution!! I enjoyed looking at it and it looks very good.

  I am not familiar with Vue projects yet so I am not sure what to suggest, but it appears as though <header-content> images are not changing for smaller devices and is still showing the 'left' and 'right' images meant for desktop. I can see in Vue.app where the isDesktop() function is being used to change the image but it might not be working correctly? I've tried it on chrome and firefox.

  Also with regards to using @use and @forward for sass, I found a video on youtube really helpful, by Kevin Powell. https://www.youtube.com/watch?v=CR-a8upNjJ0

  Great solution!

  Marked as helpful

  0
• 

  Rivaldi Alfiansyah•90

  @CosaldiSubmitted 7 months ago

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

  This is my first time using javascript, the code is not perfect enough but yeah i have to read about DOM and other things.

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

  any feedback are welcome.

  

  Mobile-first Article preview component

  #bem#sass/scss

  1

  20
  

  P

  Ian Parker•200

  @i-prkrPosted 7 months ago

  Great job on the solution, I enjoyed looking at it and liked how you've structured things! It made me consider improvements for my own solution.

  I'm still learning and understanding best practices, but I found this article and used it to try to make the share icon links more accessible. You might find it helpful, I used the method of inserting an invisible screen reader only <span> with each link that can be read by screen readers for improved accessibility. (https://urm.wwu.edu/accessibility/guide/graphics-used-links-and-buttons-need-accessible-names.

  Also I noticed that your font family doesn't have the 'sans-serif' modifier when declared, doing this should help to make the solution look a bit more like the design.

  Nice work!!

  0
• 

  P

  webdevbynight•530

  @webdevbynightSubmitted 7 months ago

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

  I learnt the image-set() CSS function to serve several resolutions of a same background image. For the next time, I will try to create a mixin or a Sass function to manage the image-set() content to avoid some repetitions.

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

  The Figma file does not separate the green filter from the background image on the footer. I overcame by using the image located in the starting folder and applying a background colour on a pseudo-element covering that image.

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

  No particular help requested.

  

  Meet landing page - HTML, SCSS, RWD, flexbox, grid layout

  #sass/scss

  1

  11
  

  P

  Ian Parker•200

  @i-prkrPosted 7 months ago

  Thanks for your solution! I enjoyed looking into your Sass implementation and different approach, the solution looks really nice. Getting more familiar working with images it was helpful to see how you have inserted the images in the solution. I took the chance to look into image-set() so thanks for that!

  I noticed that the images in the photo gallery zoom in and change shape particularly in the larger medium screen sizes, was this intentional? I think it still looks great - but for my own undestanding is this coming from using block-size and object-position on the images to make them uniform given they are different sizes and shapes? Rather than letting the grid size them automatically?

  0
• 

  P

  Sergei Borja•1,100

  @wonderlust101Submitted 8 months ago

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

  Proud of my uses of mixins and made my site more accessible.

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

  The design is rather inconsistent which caused me to create more styles than usual.

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

  None.

  

  Testimonials Grid Section

  #bem#sass/scss#semantic-ui

  1

  31
  

  P

  Ian Parker•200

  @i-prkrPosted 7 months ago

  This is a great solution and I have enjoyed looking at how you have used Sass and BEM, as I begin to get familiar with them myself. I was quickly able to see how mine could be improved so thank you!

  I cannot think of anything that I would suggest to change, however I did notice in the medium screen size layout the bottom card has a large amount of space on the bottom. I tried applying display: flex and justify-content: space-around or justify-content: space-between on the .testimonial class. It helped correct the space but does alter the look of the cards a little - what do you think? Is there another approach you would take instead?

  I also when doing this challenge came across this article that I used to help apply the different background colours: https://blog.favouritejome.dev/lets-build-a-multi-coloured-card-component-using-sass. I'm curious as to what you think! Particularly as while this solution may mean there is less code, I really like how your solution is very easy to read according to the BEM methodology.

  Thanks for a great solution I really enjoyed looking at it!

  0