Arthur Roberts

Latest comments

• 

  Casparas•60

  @termjsSubmitted over 2 years ago

  

  QR code component webpage CSS and HTML

  3

  60
  

  Arthur Roberts•410

  @arfarobsPosted over 2 years ago

  Hey. Great work so far Casparas.

  I suggest wrapping your <div class="qr-code"> with a <main> element. This will improve accessibility.

  When using headings, you should always start with a <h1> and work your way down from there. If your document doesn't have a <h1> heading, then it shouldn't have a <h2> heading. I suggest replacing the <h2> with an <h1> element.

  Hope it helps.

  1
• 

  Arthur Roberts•410

  @arfarobsSubmitted over 2 years ago

  

  Planets Facts Site | Reactjs | Framer-Motion | Testing | Redux-Toolkit

  #jest#react#redux-toolkit#storybook#framer-motion

  1

  61
  

  Arthur Roberts•410

  @arfarobsPosted over 2 years ago

  P.S I've just noticed the planet image size, HTML, and accessibility issues. I will fix them over the next few days.

  0
• 

  Angelo Barbarulo•280

  @JorahhhSubmitted about 3 years ago

  

  Modern Art Gallery | Responsive | CSS Grid & FlexBox Layout

  #itcss

  3

  90
  

  Arthur Roberts•410

  @arfarobsPosted about 3 years ago

  Hey Angelo. I'm currently working on this project myself. I like the hover effects you put on the images.

  I've got a suggestion to neaten up your code with the grid images. It's not good to have three <img> tags for the same picture. This has something to do with accessibility and SEO. I spent hours looking for a solution to this. I will share it with you.

  Instead of this:

  <div class="mobile-grid1"> <img src="assets/mobile/image-grid-1@2x.jpg" alt="grid1"/> </div> <div class="tablet-grid1"> <img src="assets/tablet/image-grid-1@2x.jpg" alt="tablet-grid1"/> </div> <div class="desktop-grid1"> <img src="assets/desktop/image-grid-1@2x.jpg" alt="desktop-grid1"/> </div>

  I'd suggest using this:

  <picture class="img-grid-1"> <source media="(min-width: 1440px)" srcset="./resources/assets/desktop/image-grid-1.jpg"> <source media="(min-width: 768px)" srcset="./resources/assets/tablet/image-grid-1.jpg"> <source media="(max-width: 375px)" srcset="./resources/assets/mobile/image-grid-1.jpg"> <img src="./resources/assets/mobile/image-grid-1.jpg" alt="The galleries main room."> </picture>

  This will avoid confusing search engines. Also, the pictures will automatically change to the correct file without adding them to your media queries in CSS. If I'm correct, I think this will also help loading speeds because the browser will only load the image that it needs, but i could be wrong about that.

  Hope it helps.

  Marked as helpful

  1
• 

  Vedat Sözen•230

  @vedatsozenSubmitted about 3 years ago

  

  I centered divs and included contents to divs

  2

  31
  

  Arthur Roberts•410

  @arfarobsPosted about 3 years ago

  Hey Vedat. It's looking good. I have a few suggestions for you.

  Accessibility:

  1. All of you images should have an alt attribute with a description of what is in the image as a value. For decorative images like the icons, Id suggest giving them an empty alt attribute. https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt

  2. As Shashree mentioned above, your content should be wrapped in a <main> element. I also noticed that you wrapped the heading in a <p> element. I suggest that you change that to an <h1> element. All webpages should have an <h1> element. The link below explains the best practices when using headings. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

  Flexbox:

  1. You said you had issues with flexbox. I will leave two links below. These links are games in which you use flexbox as the controls. They are great for practicing flexbox. They're also quite fun and explain a lot to you. https://flexboxfroggy.com/ http://www.flexboxdefense.com/

  I hope this helps you. I have also completed this challenge. I used flexbox in my solution. Feel free to refer to it.

  Marked as helpful

  0
• 

  Riley Green•10

  @GreenDiggySubmitted about 3 years ago

  

  First attempt at using HTML and CSS

  2

  20
  

  Arthur Roberts•410

  @arfarobsPosted about 3 years ago

  Hey. If i was designing this just from the picture. I would use the text as a method to scale a close size. In the downloaded files for the project there should be one that tells you what styles to use. This will tell you the font sizes, colors, etc.

  In the design picture you can see that the heading is two lines. After the word "front-end" you will see that the line breaks. By looking at it this way you can make a better estimation for the components width.

  In a project like this i think its best to try and style things in relation to the information that you are given in the style guide.

  Marked as helpful

  1
• 

  Angelo Barbarulo•280

  @JorahhhSubmitted about 3 years ago

  

  Single grid component

  2

  30
  

  Arthur Roberts•410

  @arfarobsPosted about 3 years ago

  Hey, Angelo. Great job on learning the basics of CSS Grid. I have a few suggestions for you, mate.

  1. If I was to do this project, I would put the line "join our community" as an <h1> heading. This will avoid the accessibility error in the report.

  2. To fix the issue with the media query, you can change line 126 from this: @media (max-width: 1600px) and (min-width: 800px){ to this: @media (min-width: 800px){ By doing this you are saying that you want your media query to work on all screen sizes with a width of 800px+.

  Marked as helpful

  0