Alex

Latest comments

• 

  Eugen•180

  @Fender60Submitted 7 months ago

  

  CSS Flexbox

  #sass/scss#bem

  1

  21
  

  Alex•3,130

  @Alex-Archer-IPosted 7 months ago

  Hey!

  Good work!

  A couple of suggesting =)

  • Try to use more semantic tags. For example, the main tag for content of the page, h1 and p tags for text.

  • Also you doesn't have to wrap image into the div - you can style it directly.

  • And it's better to use rem for font size properties.

  Hope that helps! Congrats with your first challenge here, keep doing =)

  Marked as helpful

  0
• 

  jl-stephenson•100

  @jl-stephensonSubmitted 7 months ago

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

  I didn't enjoy this one... It was tricky to position the hero image(s) and using absolute positioning caused some headaches.

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

  Positioning. Researching more about how to use position: absolute in combination with Grid was useful and good learning.

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

  • More maintainable ways to use different flavours of position. Or alternative solutions...
  • Responsive images - what CSS properties are good to set to make the code maintainable and which are to be avoided;
  • Feedback on CSS organisation. Following the CUBE CSS methodology - there are some grey areas - when is it best to use utilities, when blocks?

  

  CUBE CSS-inspired solution

  1

  40
  

  Alex•3,130

  @Alex-Archer-IPosted 7 months ago

  Hey!

  Well, I can't see the template, so I can't be sure what the main design idea with those images, but if you need to align them with the text you can use grid child's properties - aling-self and justify-self to place them in the corners of grid cell. Also, since those images have no context meaning, you can set them as backgrounds of the divs and than align them with background-position - but it'll be close to absolute positioning.

  By the way, you forgot to put section inside the main =)

  And besides all difficulties you did great job!

  Marked as helpful

  0
• 

  P

  edpau•470

  @edpauSubmitted 7 months ago

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

  I am proud of my efforts to improve accessibility. I used aria-label attributes to enhance the experience for visually impaired users. I ensured that screen readers would inform users when a link opens in a new browser tab, without adding redundant visible text that could clutter the interface for sighted users.

  If I were to approach this project again, I would explore additional accessibility features.

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

  • Please comment on the semantic html structure I used.
  • Please suggest accessibility features I should explore.

  

  Responsive social links profile using flexbox

  #accessibility

  1

  30
  

  Alex•3,130

  @Alex-Archer-IPosted 7 months ago

  Hey!

  You did quite good work with semantic and accessibility!

  The only things that could be improved in semantic - is a list of the links. I mean you can put links inside ul and li elements. Also the aria-label attributes aren't necessary here - the screen reader can read the text inside the link.

  I wonder, what the purpose of the rel attribute in the links? Never have seen them before =)

  Marked as helpful

  0
• 

  persanu13•120

  @persanu13Submitted 7 months ago

  

  hover effect and media screen

  2

  20
  

  Alex•3,130

  @Alex-Archer-IPosted 7 months ago

  Hi!

  Good job =)

  It's a couple of semantic thing you can improve here.

  At first - use a semantic tag in general. Like the main tag for the main content of the page (in this case it's the whole content), The h1 and p tags for texts.

  And second - there is a list of links here. So you should use a tag for the links themselves and put them into the ul and li tags. Like this:

  <ul>
      <li><a href="#">Link here!</a></li>
      <li><a href="#">Link here!</a></li>
      <li><a href="#">Link here!</a></li>
  </ul>
  

  Hope that helps. Neat work, keep doing =)

  0
• 

  BaileyJaydon•50

  @BaileyJaydonSubmitted 7 months ago

  

  QR Component using CSS & HTML

  2

  61
  

  Alex•3,130

  @Alex-Archer-IPosted 7 months ago

  Hey!

  Congrats with your first challenge here =)

  I can give you a few tips of how you can improve it.

  You are already use flex on the body tag for centering, so there is no need in margins for container element. To center it properly add min-height: 100vh property to body. That way it will stretch to the height of the screen and the content will be exactly in the center (don't forget about aligh-items as well).

  Than I suggest you to use semantic tags - the h1 tag for the main text, p tag for second text and main tag for the whole content.

  And for font sizes it's better to use rem units instead of pixels. It is a special relative units which depends on the user's font settings. By default most browsers treats 1 rem as 16 px.

  Hope that helps! Overall you did cool work, keep doing =)

  Marked as helpful

  1
• 

  James•120

  @fivetailsdevelopmentSubmitted 7 months ago

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

  Very happy with how this turned out without using Figma design files.

  Also happy with how easy it was to adjust from a mobile-first build.

  Want to explore better use of custom variables for streamlining media query changes and making it easier for others to understand the code.

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

  I had some issues with sequencing and synchronicity - some of the media queries weren't taking effect. This was solved by moving the media query to the end of the CSS file.

  

  Responsive Design Product Preview Card

  2

  41
  

  Alex•3,130

  @Alex-Archer-IPosted 7 months ago

  Hey!

  It's a cool work - the code is neat, mobile-first approach is good stuff, semantic tags are on their places =)

  The one thing is the button. It's content not in the center. I suggest you use a flex to properly center it, also it allow you to use a gap - a bit more convenient tool to create spaces between elements than margins =)

  Hope that helps, keep doing =)

  0