Skip to content
OverviewSolutions
9
Comments
11
Ethan John Paguntalan
@dev-ethanjohn

All comments

  • Fernando Mendoza•200
    @whiteknight-devSubmitted 2 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the button component, even though I have quite a lot I think I did a good job.

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

    Changing the functionality of the button depending on the view was the hardest part. (Although I don't know if I did it in the most optimal way). I overcame it by looking for innerwidth property and resize javascript event.

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

    I would like help with the optimal solution of the button and the responsive in my component.

    Article Preview Component using Grid and Flexbox

    1
    P
    Ethan John Paguntalan•180
    @dev-ethanjohnPosted 2 days ago

    Nice job! It works man, but I have few suggestions.

    1. Do not rely much on JavaScript. If you can find solution on CSS to dynamically style or in relation to structuring your HTML more semantically correct, - the better. For example, your JavaScript calculates a lot things by rebinding events on each resize of screen. Also toggling the visibility of an element can be easily achieve by utilizing toggle on JS (ex: button.classList.toggle("active") and use that condition to style your CSS like (button.active ~ .share-options { opacity: 1; visibility: visible } NOTE: make sure your default button style is set to visibility: hidden; just make it visible when on active which is toggled by JS. No need of if else statement unless we need more functionality on each condition.

    2. It is preferable to em for your media query breakpoints instead of px for responsiveness and adaptability.

    3. I noticed a small jump (mobile) when share links appeared. Maybe you can check your positioning on dimensions on that state. Additionally, to make it more fluid, you can add some transitions and animations.

    Nonetheless, great work! Keep pushing and coding!

    Marked as helpful
    0
  • P
    Ethan John Paguntalan•180
    @dev-ethanjohnPosted 19 days ago

    Hi, great job for completing this challenge. I have some issues though while previewing your page. It seems there is a lot going on your layout and positioning. For some screens, the spacing between your hero section and the 1st feature is quite large.

    Within your CSS , you may ignore media query for extra small devices especially when you style mobile first. Your default styling is your mobile layout so no need of media query for that. Use em instead of pixel on your breakpoints. Also, you can explore clamp(), max-width, or width: min() to make your text and containers responsive on different screen sizes. Further, I noticed you put a lot of fixed values like vh / vw and fixed pixel to a lot of your components. Instead of those fixed values, try to leverage padding or grid/flexbox to size and align your contents.

    Apologize if I can't pinpoint exactly all specific fixes you can do, but my recommendations I believe could help you step back a little and play around with these concepts. Good luck!

    Marked as helpful
    0
  • P
    Ethan John Paguntalan•180
    @dev-ethanjohnPosted 21 days ago

    You are almost there! I noticed on tablet screens, you forget to define a specific layout for it using grid (Please check your figma file for reference).

    After checking your code, I made a few recommendation:

    1. Preferably, use HTML semantic tags over divs for better accessibility and SEO. Example such as article, section tags and blockquote tags. If you still unsure what semantic tags to structure your HTML, you can check mine or other solutions in the community.
    2. Use em for your media queries, using px is okay but that doesn't scale. There are a lot of advantages using em like it is relative to the browser's root font-size (usually at 1em = 16px by default). If a user changes the font-size to say 18px on their browser, then 1em = 18px; allowing breakpoints to scale and adapt.
    3. You can stick with grid even at smaller screen sizes. Grid can also do vertical column without needing Flexbox, this allow you to not override your body again on tablet or desktop screens. Moreover, it simplifies your media queries!

    I hope it helps!

    0
  • P
    Ethan John Paguntalan•180
    @dev-ethanjohnPosted 22 days ago

    You are almost there! check out the figma design for the tablet mode. Only few fixes away. You may also resubmit your github link because it isn't accessible.

    0
  • P
    Ethan John Paguntalan•180
    @dev-ethanjohnPosted 24 days ago

    Hey Leo, I hope you are well.

    Your HTML structure looks good and your code is good enough for semantics. Good way you use main for this. There are things I may recommended you to check out.

    1. You can add article or header on your HTML for better semantics.
    2. Using px on media query is valid, but I recommend you use em for better scaling and for accessibility.
    3. I notice on mobile, the image is not displaying, try to fix your src.
    4. It would be better if you try to emulate as much as possible the design specifics even if these are minor styles like line-spacing, your use of font-family on some components, and among other things.

    Wish you success and more power!

    0
  • Gabriel de Azevedo•100
    @gabriel-de-azevedoSubmitted 26 days ago
    What are you most proud of, and what would you do differently next time?

    I'm pretty happy with how simple and organized the CSS ended up.

    Only thing that I kept wondering is if there was another way to style the last table component.

    I'll try something other than Flexbox next time.

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

    It'd been a while since I styled lists and tables.

    I also tried to stay pretty close to HTML defaults and didn't even touch them in my Style Reset so that added a few extra hurdles and quite a bit more research.

    But, with enough Googling, I still managed to keep their styles pretty straightforward.

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

    Suggestions on alternatives to styling tables.

    Responsive recipe page using only CSS

    1
    P
    Ethan John Paguntalan•180
    @dev-ethanjohnPosted 26 days ago

    Hi Gabriel. Your solution looks almost identical to the mockup.

    I have few suggestions.

    1. Explore more robust solutions like Flexbox or Grid when applying spacing between components. However, using flow utility class is also good if we assume the content won't have any complicated structure other than purely text heavy vertical single-column components.
    2. Try to check out some semantic elements like article or sections to group related siblings.
    3. For the table, there are many ways to style it. Your approach is good; but from the design, each row doesn't have vertical padding. In my case, what I did is apply grid to the tbody for that gap, then use ::after pseudo element to style the divider by positioning it to the bottom by -50% of the actual gap of the grid. In that way, we wouldn't rely on paddings or margins with border line to setup the divider between the rows.
    Marked as helpful
    1
  • P
    Ethan John Paguntalan•180
    @dev-ethanjohnPosted 28 days ago

    Your solution is good but you can improve even more by utilizing semantic HTML tags like article, section a header or something semantically correct like wrapping the entire card to a main tag since it is your main content. Also, for your CSS, it would be nice to have some reset styles especially box-sizing.

    0
  • KS_18•40
    @ksWebFrontSubmitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I would try to build everything using grids

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

    there were no difficulties

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

    I don't need help with this project

    adaptive, SCSS, hover animation, BEM, semantics

    #accessibility#animation#bem#sass/scss#semantic-ui
    1
    P
    Ethan John Paguntalan•180
    @dev-ethanjohnPosted 29 days ago

    Hi, your css is pretty dope with SCSS preprocessor (I haven't tried that yet). I have some few suggestions that may help:

    1. Try to use more semantic elements like header, article, main, and many more, try to check any that will be appropriate for this project's use case.
    2. For responsiveness, currently the card's image height decreases as it moves to smaller screen width. For you may check out clamp() for adaptive font-sizing, width: 100% for your images as an add-on to your existing fixed max-width. Or try to use figure element to wrap your image instead of a div, if will help semantically.
    3. Leverage flexbox gap property to space children inside your content instead of relying on vertical margins or even paddings.
    4. Some small designs you forget like border radius, title hover to yellow color, and such.

    I can't put all but these suggestions hope may help!

    0
  • P
    Ethan John Paguntalan•180
    @dev-ethanjohnPosted about 1 month ago

    The UI component fits nicely and identical enough.

    I have suggestion though for you to consider or look at. You can use semantic elements instead of relying mostly on divs in structuring your HTML. for example, you can use an article tag for the overall card. A figure tag to wrap your qr image. And an h1 for the title instead of using div with a descriptive class. This is will any sites to perform better particularly for SEO and accessibility. You may check this https://www.semrush.com/blog/semantic-html5-guide/ for a guide or from MDN/web.dev sites on semantic elements

    Hope it helps!

    0
  • P
    Ethan John Paguntalan•180
    @dev-ethanjohnPosted about 1 month ago

    Hi Roselle, It would be very helpful if your github repo is accessible. Right now the site displays an error.

    0
  • Ilay Zeitlin•180
    @Ilay-IlaySubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    It looks pretty similar.

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

    The biggest challenge is to get started here and fill all of this stuff.

    Challenge one design

    #accessibility
    1
    P
    Ethan John Paguntalan•180
    @dev-ethanjohnPosted about 1 month ago

    Great work friend! Given that this is a first challenge, it is good to see you've taken the steps to replicate the design.

    Well, the use of root on CSS made sure properties inside it are reusable.

    There are some improvement that I suggest you may look into or consider.

    1. You can explore more cases to where you can use native semantic tags instead of relying solely on your classes or attributes on your divs. For example, you can use article as a parent container and some div inside for styling. Or a figure element to wrap your qr image.
    2. Have an external CSS, this way we can have separation. Though given the little amount of content in this project, internal CSS will be fine.
    3. Take a look on some default properties you can implement to make your css styling consistent. For example, setting your padding to 0 and box-sizing to border-box on the * {} universal selector ensures you have more control over your styling and gives you consistent behavior across your elements.
    4. It would be better if you could follow almost all the design values of the sample mockup. For instance, your Card component has more width (due to by not setting box-sizing to border-box). You use h3 for the main text, but remember heading texts are semantics, and since this is standalone component, having h1 as your primary text is more acceptable approach. h3 is fine as long as the component is a child of the larger parent that holds already the h1 and h2 tags. From the design on Figma, there are also specific values for font-sizes, letter-spacing and so forth, you may check them out you can know exactly what to style.
    5. To allow layout flexibility, you can wrap your heading, and paragraph to a new div separating it from the image; and there use flexbox or grid for spacing and alignment.

    Hope it helps mate!

    Marked as helpful
    0