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

All comments

  • Alex•3,130
    @Alex-Archer-I

    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
  • jl-stephenson•100
    @jl-stephenson
    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-I

    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
  • P
    edpau•470
    @edpau
    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
    Alex•3,130
    @Alex-Archer-I

    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
  • Alex•3,130
    @Alex-Archer-I

    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 =)

  • Alex•3,130
    @Alex-Archer-I

    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
  • James•120
    @fivetailsdevelopment
    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-I

    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 =)

  • P
    Stefan Vetsch•140
    @vstm
    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

    #tailwind-css
    1
    Alex•3,130
    @Alex-Archer-I

    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?

  • Iceish96•140
    @Taninwat-55
    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-I

    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
  • Artur Neri•230
    @Artur-Neri
    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

    #gulp#sass/scss
    1
    Alex•3,130
    @Alex-Archer-I

    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
  • Alex•3,130
    @Alex-Archer-I

    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
  • aurelien•130
    @pichade
    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-I

    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
  • Alex•3,130
    @Alex-Archer-I

    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
  • Jaime•150
    @Jaimealicante83
    What are you most proud of, and what would you do differently next time?

    I did it quite quickly and with no many problems.

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

    Aligning the content horizontally in desktop version. I used flexbox display row to solve it.

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

    How to improve the look and efficiency of the code.

    Responsive product review with flexbox and sass

    #sass/scss
    1
    Alex•3,130
    @Alex-Archer-I

    Hey!

    Great work, but I really think that you should use img tag here instead of background image. You see, backgrounds good for decorative pictures which doesn't bear any context meanings. And the img have an alt attribute with description for assistive technologies.

    To switch images in the different versions you can use picture tag.

    <picture>
    <source srcset="mobile.jpg" media="(max-width: 900px)">
    <img src="desktop.jpg" alt="">
</picture>

    It contains one (or more) source tags with different media conditions. If no one of the medias will match, the img would be rendered.

    Oh, and also all your media queries have min-width: 1024px. They would be overwrite each other that way =)

    Marked as helpful
  • jl-stephenson•100
    @jl-stephenson
    What challenges did you encounter, and how did you overcome them?

    It's tricky, not being too familiar with CSS Grid, to find the right combination of properties to keep the CSS succinct. I read general documentation and looked at specific uses of Grid to improve my first solution.

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

    Semantic HTML. I chose to code the cards as `` elements with aria-label attributes. Is this a good choice for accessibility, or would a different HTML element be better for this?

    Responsive solution using CSS Grid

    1
    Alex•3,130
    @Alex-Archer-I

    Hey!

    Congrats with first steps with grid! Your work looks neat =)

    There is no need for aria-label tags here. The cards contains text, which will be recognized by screen-readers. The aria-label is helpful when there is no clearly explanation about what this part of the page do. For example, if the button contains only the svg icon.

    Also the purpose of the top-level header element is to bear content which could be repeated on the different pages of the page (like, logo, navigation and stuff) so it shouldn't have the h1 tag. But you can put header inside main or article and it will have different role.

    By the way, why did you make five rows on the grid? I think four will be enough here =)

    Oh, and in the mobile version you can omit rows definition at all - grid creates additional rows when get new elements (it could be helpful when the content changes or generated dynamically =)).

    Overall you did great, keep doing =)

    Marked as helpful
  • Liam Tanfield•260
    @TanDevv
    What are you most proud of, and what would you do differently next time?

    At this point, I have felt confident in making simple HTML/CSS projects after learning for over a year, of course I always appreciate constructive criticism and how to improve for the next project!

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

    I didn't encounter any obstacles during making this project.

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

    Overall criticism in anything from my code to the structure, I like to know how to do something better no matter what it is!

    Social Links Profile (SCSS)

    #accessibility#sass/scss
    1
    Alex•3,130
    @Alex-Archer-I

    Hey!

    That a first time when I see such usage of h1 tag! It's cool finding, but I think a bit redundant =)

    And a few tips =)

    • You can reduce the number of tags you use. For example, you have section tag so there is no need in container div, or, the img tag could be styled directly without wrapper.
    • This is a links, so a tag more suits here than buttons. Also this is a list, so you can use ul and li.
    <ul>
    <li><a href="#">Link here!</a></li>
    <li><a href="#">Link here!</a></li>
    <li><a href="#">Link here!</a></li>
</ul>

    Overall, you did great work, and it's very cool that you are trying to paid attention to accessibility and optimization =)

    Marked as helpful
  • Alex•3,130
    @Alex-Archer-I

    Hi!

    Cool work!

    The problem with images is in the path files which Vite generate by default =) They should be either ./images/file-name or images/file-name.

    I managed to fix this issue by adding base: "" field to vite.config object.

    Hope this helps =)

    Marked as helpful
  • aurelien•130
    @pichade
    What are you most proud of, and what would you do differently next time?

    I'm really happy with how this integration turned out, especially with achieving responsiveness in a clean way, I always have fun working with grids and cards.

    The only thing I might reconsider is the header image; I’m thinking about recreating it entirely with HTML and CSS to practice and further develop my positioning skills.

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

    For me, there were two key challenges in this project. The first was the header image. I wanted it to be responsive while maintaining a balanced and visually appealing layout. I also needed to extend the blue line so it didn’t get cut off, which involved some work with position: absolute and a lot of tries and tests.

    The second challenge was creating the gradient background with hover effects on the buttons. I achieved this by experimenting with pseudo-elements in different ways, ultimately getting the effect I wanted.

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

    I would be glad to receive some feedback on the positioning of my header image. I’m sure there’s a more efficient way to achieve the effect I’m going for, so any suggestions or insights would be greatly appreciated!

    Skilled e-learning landing page

    1
    Alex•3,130
    @Alex-Archer-I

    Hey!

    This is purely decorative image, so the most convenient way to add it - background-image property. And you won't have to create those additional elements. I guess this is a png file, so you can use background-color as well. If this picture was important for context of the page you should use img tag cos it has alt attribute to tell screen readers about this, but that's not the case here.

    Marked as helpful
  • Arnaud Lahaut•200
    @Arnotts33
    What are you most proud of, and what would you do differently next time?

    My first time doing a 'complex' JS challenge by myself. Quite happy but might refactor my code at some point.

    I really need to start using SCSS. But is it widely used in the pro world and is it considered good practice?

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

    Main challenges:

    • Responsive part with switching the image on the right on desktop layout: I used and for the image. Use of flex grid.

    • JS email validation: Took me a while to make the JS file working... forgot to put novalidate in the HTML.

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

    Any feedback or review are welcome!

    Thanks!

    Newletter Signup Form JS

    2
    Alex•3,130
    @Alex-Archer-I

    Hey!

    You stepped on the JS part, congrats =) And I can see that you are using BEM, cool!

    By the way, the action attribute of the form are for url where it will send data, so submit doesn't fit there. And I have a few doubts about novalidate and accessibility.

    Also I like that you think about set focus on the email field! There is an autofocus attribute you can use as well.

    To answer your question about SCSS - it isn't totally must have stuff, but in general the more tools you are familiar to the better. Also a lot of companies use it, so if you will search a job in the webdev field it will be another plus to your portfolio.

    Personally I prefer plain CSS with autoprefix plugin, but I won't say that it is a best way. And If you already have a decent CSS foundation all those tools will be much easier to learn.

    Marked as helpful