Skip to content
OverviewSolutions
12
Comments
4
UG
@0x-UG

All comments

  • MoBlack00•80
    @MoBlack00Submitted 9 months ago

    This is my first challenge using a mobile-first approach. Waiting for your feedback.

    Recipe page

    2
    UG•140
    @0x-UGPosted 9 months ago

    Well done bro! This is clean. I'm following a course and we've not yet begun learning mobile designs yet. I can't wait to start.

    0
  • alexcoy06•30
    @alexcoy06Submitted 9 months ago

    The hardest part of this project was dealing with the buttons, but it wasn't too difficult. Each time I do a project, I try to add something I haven't done before and make a habit of following more best practices. So, after publishing my work online, I decided to run it through Lighthouse. That made me realize I needed to tweak my code so it would be more syntactical.

    Also, if you're not familiar with using clip paths to make a picture round, a super helpful site is https://bennettfeely.com/clippy/. Or, you could always change it in a picture editor like Figma.

    Social Links

    1
    UG•140
    @0x-UGPosted 9 months ago

    Hey bro. You don't need to make your picture round by editing it, you can just use CSS And make the picture have a border radius of 50%,that makes anything round (buttons, pics etc). Also adding new features on any new design is a good idea and something I'll try too. I normally just practice what I know

    0
  • isaac kiplangat•60
    @isaac-kiplangatSubmitted 12 months ago

    HTML/CSS Centering Feedback Request

    What did you find difficult while centering the <div>?

    I found it challenging to [describe the specific challenge, e.g., vertically center the div]. The approach I took was [briefly describe your approach], but I'm open to suggestions on a more effective method.

    Which areas of your HTML/CSS code are you unsure of?

    I'm unsure about the [specific code snippet, e.g., CSS flexbox properties] I used for centering. I would like feedback on whether this is a recommended approach or if there's a better way to achieve the same result.

    Do you have any questions about best practices for centering elements?

    I'm interested in learning more about best practices for centering elements in CSS. Are there any recommendations or considerations I should be aware of based on my current implementation?

    Here's a snippet of my code for reference:

    <!-- Your HTML code here -->

<div class="centered-div">
  <!-- Content goes here -->
</div>

    .main-div {
  background-color:hsl(0, 0%, 100%) ;
  width: 30%;
  margin: 60px auto;
  padding: 20px;
  border-radius: 15px;
}

    QR- code card with description in html and css

    2
    UG•140
    @0x-UGPosted 12 months ago

    What I normally do to make sure divs are centered is to make the whole page body a flexbox, with a column direction and then align and justify to center. It's the most reliable for me body { display : flex; flex-direction: column; align-items : center ; justify-content: center; }

    Marked as helpful
    0
  • Vedant Thorat•60
    @vedant027Submitted 12 months ago

    Why is the button hover state not working for media queries when device width is less than 700px ? Also how can i give the gradient color like the given in the challenge for the left container ?

    Result Summary Component

    1
    UG•140
    @0x-UGPosted 12 months ago

    To give gradient color , select the button in css then use background-color: linear-gradient(to left(or whatever direction you want the gradient to go) , the 2 colors you want to combine separated by commas)

    eg background-color: linear-gradient(to right, blue, red) using hsl colors for gradients are advised tho. Good luck

    0