Skip to content
OverviewSolutions
13
Comments
210
Alex
@Alex-Archer-I

All comments

  • Alex•3,130
    @Alex-Archer-IPosted 3 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 3 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
    Alex•3,130
    @Alex-Archer-IPosted 3 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
  • edpau•440
    @edpauSubmitted 3 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

    1
    Alex•3,130
    @Alex-Archer-IPosted 3 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
  • Alex•3,130
    @Alex-Archer-IPosted 3 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
  • Alex•3,130
    @Alex-Archer-IPosted 3 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 3 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
    Alex•3,130
    @Alex-Archer-IPosted 3 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
  • Stefan Vetsch•140
    @vstmSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    Styling the spacing of the list items was somewhat tricky, I overcame it by playing around and then finally applying some magic amount of padding to it.

    Also I had a strange difference in the height of the lines in the table (24px in the design and 23.5px in the browser), and I could not find out what it was. The settings were as per the text presets.

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

    If anyone has some tips on styling list-items (/) well, that would be awesome.

    Recipe Page with tailwindcss and some pain

    1
    Alex•3,130
    @Alex-Archer-IPosted 3 months ago

    Hi!

    Can I assume that the most pain was from tailwind? =)

    But actually you did it quite good! (there is a text isn't properly aligned in the table, but that's not a big deal =))

    I see that you are already styled markers for list-items. What exactly do you need to help with?

    1
  • Iceish96•140
    @Taninwat-55Submitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    In this project, I struggled to complete it on my own. I managed to get halfway through before hitting a roadblock that I couldn’t overcome. After spending a lot of time stuck, I decided to look for similar tutorials to help me understand the process better. I attempted to follow along with the tutorials, learning as I went, but I still found it challenging. Despite my efforts, I was unable to display the minus icon when opening a question to close it. This experience has been frustrating, and I’m disappointed that I couldn’t finish it independently. However, I’ve submitted my work to the community in the hope of receiving feedback and guidance. I’m committed to continuing my learning journey and will use this experience to improve in future projects.

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

    As a complete beginner, I think CSS and JavaScript are the things that I need to improve the most at this point.

    FAQ accordion

    1
    Alex•3,130
    @Alex-Archer-IPosted 3 months ago

    Hi!

    Actually it's quite a decent work. You even manage to make them animated =)

    Your way to change images is working, you just overlooked this part in the else if branch =)

    plusIcon.style.display = "none";
minusIcon.style.display = "none";

    But there is more easily way to do it. You can reach src attribute of the image via JS and change it.

    Marked as helpful
    1
  • Artur Neri•230
    @Artur-NeriSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Making the different styles based on the type of notification was kind of what made me lose a bit of time, but I could get it to work in a way that is reusable. I would probably want to polish my BEM markup on the next challenge.

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

    It was a pretty simple layout to build and there was no secret on making the interactivity work, therefore I had no struggles this time.

    Responsive Notifications Page

    1
    Alex•3,130
    @Alex-Archer-IPosted 3 months ago

    Hey!

    Great work! It's cool that you use bundlers (I personally prefer Vite).

    The thing I wanted to notice that you slightly skip the design idea - all clickable elements (I mean names, pictures, comment titles and stuff) are links, so they all should be a elements.

    By the way, in BEM you shouldn't write like this notification__author__picture or notification__author__name. There shouldn't be element inside element. If you want to write double-word name than it looks like this notification__author-name.

    Overall, that cool! Keep doing =)

    Marked as helpful
    1
  • Alex•3,130
    @Alex-Archer-IPosted 3 months ago

    Hey!

    Congrats with your first challenge! Well, first here at least, as I can see you have some exp already =) It's cool!

    Here is a few tips.

    • It's better to use rem values at least for font sizes. It's a relative values which depends on browsers font settings, so users could change them.
    • font-optical-sizing: auto; and font-style: normal; are default values so you doesn't have to specify them.
    • Also as the whole page share one font family, you can apply it once. For example on the container element. All content elements inherited it and you doesn't have to repeat it so much.

    Hope that helps =)

    By the by, I love emoji in commit messages =)

    Marked as helpful
    2
  • aurelien•100
    @pichadeSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I challenged myself to build the entire feature using only CSS with the and tags. It was a bit tricky, but I managed to make it work, thanks to the insights I found in Gustavo Alexandrino's post. His guide was instrumental in helping me fully animate the elements without relying on JavaScript.

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

    The main challenge was understanding how the CSS attribute selector works and how to apply it in a real-life scenario. After some reading and experimenting, I finally figured out how to make everything work.

    FAQ accordion

    1
    Alex•3,130
    @Alex-Archer-IPosted 3 months ago

    When I read about building without JS, my first thought was - details and summary. I looked, and yes, it's details and summary! Very cool! I've wanted to try it sometimes, but somehow I thought that it's impossible to animate them =)

    Why did you put content paragraph aside from summary? As far as I know you can put inside the details. Oh, and also you can make the lines between them with border-bottom and than you doesn't have to create additional divs =)

    Marked as helpful
    0
  • Alex•3,130
    @Alex-Archer-IPosted 3 months ago

    Hey!

    Cool work, congrats =)

    A few tips if you don't mind =)

    Semantic stuff.

    • It is preferable if the h tags follow the hierarchy - so after h1 better to use h2. - - - The links here is a list, so you can put them in the ul and li tags.
    • And every page should contain main tag, but since this project could be part of the bigger page, maybe it's not really necessary here =)

    CSS things.

    • You can more easier center the content by adding flex to the body.
    • I recommend you to use rem for font sizes. It's a special values which depends on the browser font settings.
    • Don't use percentages for border-radius. This property is better keep static.

    Hope that helps! Overall it is great work, keep doing =)

    Marked as helpful
    1