Skip to content
OverviewSolutions
25
Comments
17
A1ex
@a1excpunk

All comments

  • A1ex•500
    @a1excpunkPosted 9 months ago

    Great job, I have one little piece of advice, and because you are keen on details, I think you'll like it :) About list item disc styling, you can change colour, size etc. by using ::marker pseudo-element on the li tag.

    Marked as helpful
    10
  • A1ex•500
    @a1excpunkPosted about 1 year ago

    Hello there, congrats on completing this challenge,

    • one thing I would suggest is to use grid {display: grid;} instead of flex. flex can be very useful and easy to use but in some cases, it makes more "trouble" than good.
    • the reason I'm suggesting a grid is that, on screen size change cards squish and space between cards becomes uneven. with the grid it gonna be smoother and easier. you'll need only one parent container and 5 cards that's it, no additional containers and headache on how to position them correctly.
    • A Complete Guide to CSS Grid This is a very good source for understanding grid, for any level.

    Keep going, keep learning and of course keep coding.

    0
  • A1ex•500
    @a1excpunkPosted about 1 year ago

    Good start, keep on practising. About suggestions:

    • about media queries, less is better and in this case, you don't need 2, write "main" and go from there to desktop or to mobile screen size (depends on which one you'll make the main one). browsers are doing a good job of making everything responsive so there is less styling code needed from developers regarding that aspect.
    • the fixed width is messing a lot for responsiveness, try relative units like %, rem, em and so on. Also, max-width and min-width can be your friends.
    • lastly, if you have media queries (especially several), don't copy the whole block of code, set initial values and when media queries are needed (on specific width for example) they will override only the part that is different for that width and needs to be changed.
    Marked as helpful
    1
  • Lira•190
    @lirapanciSubmitted over 1 year ago

    This is another challenge that I've completed. This time I used WordPress and Advanced Custom Fields (ACF) to develop the website. As well as on other projects, I've been using Tailwind CSS and Vanilla Javascript.

    Due to restrictions about where a project can be uploaded, I had to generate an HTML version of the WP theme I developed and uploaded it on a separate repository.

    I'd really appreciate your feedback.

    WordPress website using Advanced Custom Fields

    2
    A1ex•500
    @a1excpunkPosted over 1 year ago

    Good job, but some style issues were noticeable,

    1. on the main page cards text is shifted to the side, if the width of the screen is more than 1440 (I was not checking intentionally, it happened that I saw your solution on a bigger screen.)
    2. same issue as above but on the stories page, but here not the text is shifted but the whole cards grid behaves a bit off.

    I guess it was a 1440 limitation in the guidelines, but if you put a limitation, put it globally, so some parts "don't know" screen is wider. (in this case, the grid container knew so it went on but the cards didn't adjust)

    and 3. on the pricing page, the toggle transform between monthly and yearly is a bit off.

    keep going and once again, good job.

    Marked as helpful
    0
  • A1ex•500
    @a1excpunkPosted over 2 years ago

    Good job on the desktop version but the mobile version looks a bit off.

    1. image borders.
    2. width.
    3. transition from desktop to mobile.

    Good luck and keep coding 🤘🏻

    0
  • Barney•370
    @waikooSubmitted over 2 years ago

    I found it challenging to find a logical place for the attribution. I enjoy taking a zoomed in look around the proportions and scales of things, but placing them on the canvas can get tricky. I may have found a working solution of simply using flexbox and centering things that way, with the html getting a 100% height, this works really well for single item presentations.

    When there's not too big of a visual difference in the mobile vs desktop view, it can get tricky sometimes to tell the difference but I enjoyed it very much.

    Any feedback is appreciated!

    Order summary component

    3
    A1ex•500
    @a1excpunkPosted over 2 years ago

    Good job, but one thing that stood out is height when the screen is shorter than the component, the component doesn't scroll, top part "disappears".

    tip_1: Use, in your case, body{min-height:100%;} instead of just height. tip_2: Add some body padding to separate the card from the edges a little bit.

    Good Luck and Keep Going 🤘🏻

    Marked as helpful
    1
  • Han•340
    @hcxwebSubmitted over 2 years ago

    Hello everyone, this is my 10th challenge, which feels like another level due to its larger size and an addition of tablet view. I spent quite some time trying to make it as close as possible on all screen sizes, and I'm happy with the result. Like always I appreciate any suggestions. Thanks!

    Meet landing page using Sass

    1
    A1ex•500
    @a1excpunkPosted over 2 years ago

    Great job! <3

    0
  • A1ex•500
    @a1excpunkPosted over 2 years ago

    good static component, but responsiveness is ... well not even a trend but a necessity. also, there are some small details, like

    • anchor tag instead of a button tag (for some it might be a preference thing, but when it's a button it should be in the button tag)
    • button background colour
    1
  • A1ex•500
    @a1excpunkPosted over 2 years ago

    Good trick on image opacity and background <3

    1
  • A1ex•500
    @a1excpunkPosted over 2 years ago

    Good job,
    although small details can be improved, "bg-pattern-1.svg" this one creates a horizontal scroll under 1440 and kinda makes the whole thing a bit off. :)

    1
  • A1ex•500
    @a1excpunkPosted over 2 years ago
    1. some parts are missing, like - the word "advice", hashtag, quotes, divider lines.
    2. button doesn't call the method to fetch API, so there is only one call, on page load and that's it.
    Marked as helpful
    1
  • A1ex•500
    @a1excpunkPosted over 2 years ago

    Pixel perfect is kinda "not a good idea" with responsiveness because your work won't be seen on the same dimension devices so if the user misses that "sweet spot" everything scrambles. Plus, you tried pixel perfect with "responsive" units like % and rem, if you want to make pixel perfect work it's a better idea to make it static for both, desktop and mobile versions.

    Marked as helpful
    1