Skip to content
OverviewSolutions
7
Comments
8

Xianort

@xianortSaudi Arabia170 points

An aspiring web developer.

I’m currently learning...

HTML, CSS

Latest solutions

View more solutions

Latest comments

  • P
    ImMushroomsWeTrust•140
    @ImMushroomsWeTrust
    What are you most proud of, and what would you do differently next time?

    I'm proud about making adaptive grid, using Tailwind However, next time, I wouldn't create a hard-coded 3x3 grid, but rather prefer create it on the go, using col-start and row-start

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

    I was struggling a lot with the TailWindCSS, after I've turned it off for the night, since I didn't add a proper watch to the input.css file. and it was working very weirdly npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

    Responsive Mobile-First content-grid

    #tailwind-css
    1
    Xianort•170
    @xianort

    Hello Mushrooms. You hardcoded almost everything. Why not customize your Tailwind theme? Would have saved you some, if not a lot of that hardcoding.

    I don't know if you'd like some advice, but I'm gonna give you some anyway.

    Hope you find this useful.

    Marked as helpful
  • Grecco Oliva, Franco•290
    @GreccoOliva-Franco
    What are you most proud of, and what would you do differently next time?
    • Accomplish a "good enough" result for me
    • I would try it again and measure my time to delivery
    • Build almost everything with Tailwind CSS by default and using some tailwind css variables augmentation to facilitate color usage
    What challenges did you encounter, and how did you overcome them?
    • I've acknowledge that acquiring an eye for details is quite important and I don't pretend to be perfect on the first try.
    • Designing is quite difficult for me right now but I will improve it over time
    What specific areas of your project would you like help with?
    • Developing an intuition of designing concepts:
      • Why the colors provided
      • Why the spacing
      • Why padding and not margin and viceversa
      • Why green is 500 and green accentuation is 700 (200 diff) and not 800 (300 diff)
      • ETC...

    NextJS, tailwind

    #next#tailwind-css
    1
    Xianort•170
    @xianort

    Hello Grecco Oliva, I like your solution, but I don't understand what you want help with. Are you asking why they provide you with those values in the style guide?

  • Christian Zigah•40
    @zigahchristian
    What are you most proud of, and what would you do differently next time?

    ** Mobile Responsive

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

    Without the Figma File was very challenging guessing image size, padding and margin.

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

    Responsive Design

    RECIPE PAGE

    #tailwind-css
    2
    Xianort•170
    @xianort

    Hello Christian, I have some points that I hope you'll find useful.

    1. Element Selection

    • The recipe name ("Simple Omlette Recipe") can be the page's main heading (<h1>).

    • The list in the instructions section <ul> can be an ordered list <ol> as cooking instructions are followed in order unless stated in the content otherwise.

    • The series of <div>s in the nutrition section can be a <table>. The description above the table can be a <caption>.

    1. Styles

    • There's no need to define width and height for an image or to use the object-fill class. That's why the image looks distorted on the mobile layout. The image, by default without width and height styles, will resize based on its container and maintain its aspect ratio, and thanks to Tailwindcss's base styles (preflight), the image's size will never exceed its resolution.

    • There's no need to use em space (&emsp;). You can use list-outside to set the markers outside the list element and then use padding to adjust the spacing.

    Hope you find this useful.

  • Moose05•50
    @Moose05
    What are you most proud of, and what would you do differently next time?

    The growth I am seeing in my projects is very big and motivational, i approach problems in a different way now and learning as much as i can.

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

    Having to include Jscript in making the buttons work and take you to the specific site without writing multiple functions for each table. I used AI to have a conversation about how to approach this and then implemented after I had understood.

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

    If there is any other way that i could have used Jscript to make my buttons to work and take you to the links then I would appreciate it.

    Social media links page

    2
    Xianort•170
    @xianort

    Hello Moose, I like your solution; it is unique.

    I have to ask, why not just use the <a> element?

    If you already knew about it and just wanted to try something different, then please ignore my question. But if you didn't, then I advise you to read about it and use it in your solution.

    Marked as helpful
  • Xianort•170
    @xianort

    Hello @Nikhil-Neware, I like the blue shades on your solution.

    Just some advice to help your HTML be more accessible.

    • Enclose the page's unique content with the <main> element.

    Using landmark elements like <main> in your HTML enables users of assistive technology to quickly identify and navigate to large sections of the document.

    • Use <a> elements instead of <div> for links.

    I noticed you're using divs instead of as for the social links. Think about how this component would be in a real setting. It would have links to that person's socials so why not mark it up as links?

    • Use <ul> element to make a list of links.

    While you're at it make a list of out of those links as well to make it easy for assistive technology users to get a count of how many items are in the list and navigate to a particular item.

    Hope you found this useful.

    Marked as helpful
  • xgb•150
    @xgbdev
    What are you most proud of, and what would you do differently next time?

    The simple styles

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

    Nothing.

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

    The exactly positions of the elements.

    Simple blog preview card

    #tailwind-css
    1
    Xianort•170
    @xianort

    Hello, your solution looks good! I only have one point.

    In general, your HTML pages should each have only one <h1> tag. Having no <h1> or more than one can confuse screen reader users as they depend on headings to construct a table of contents for the page.

    For more info please read MDN's article about HTML headings.

    Marked as helpful
View more comments