Skip to content
OverviewSolutions
3
Comments
9
Lemnsa
@Lemnsa

All comments

  • Eugene Clark•50
    @clarkjr2016Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of using max-width: 100% appropriately for the .cardContainer class.

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

    I had issues vertically centering the text within the a tags. In order to do this I had to ensure that the a tags took up the full width of its parent container li. I then applied display: flex and align-items: center to the li tags and then applied line-height: 60px to the a tags to match the height of the li containers.

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

    I would like some advice on how to make the .cardContainer more dynamically responsive in both height and width. I feel this can be accomplished with media queries but I feel as if there is a simpler way as well.

    Social Links Profile

    1
    Lemnsa•110
    @LemnsaPosted 4 months ago

    Congratulations @clarkjr2016 on completing this task!

    Sure, there is way to easily center texts in a child element found in its parent's.

    General case

    Example:

    Let's say you have a <span> tag inside a <div> tag, and you want to center-align the text inside the <span> tag.

    HTML

    <div class="container">
    <span class="centered-text">Centered Text</span>
</div>

    CSS

    .container {
    text-align: center; /* Center-align text within the container, horizontally */
}

.centered-text {
    display: inline-block; /* Ensures the span takes only as much width as necessary */
}

    In short, applying text-align: center; to the parent, centers the child.

    So in our case, text-align: center is applied to the <li> tag.

    Hope you grab the concept and it solves the problem, even if it doesn't stick, always refer back to your learning materials!

    0
  • Gabriel Iturra•10
    @gabriel-iturraSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to actually finish the challenge, even with everyday obstacles (work, life tasks, and so on), and was able to learn and understand better what I developed.

    I would try actually to develop future challenges faster. For that I would organize my time better in order to finish this, as I am aware that Frontend Developer jobs have a controlled schedule to finish projects.

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

    The responsive aspect was difficult. Most of the times the card element would not 'shrink' properly when using different screen.

    Also, getting to learn about viewport units and Flex, and try them right away, was not easy.

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

    To know any other alternative for achieving responsiveness on the task. For example, was the "clamp" CSS really necessary? Is it better to just use media queries?

    This insight would be appreciated, as I am aware this can help in future projects.

    Responsive QR Code website using Bootstrap and Flex

    2
    Lemnsa•110
    @LemnsaPosted 4 months ago

    Congratulations @gabriel-iturra completing this project

    Using both clamp() and media-queries help with achieving responsive design. They are just twins who have their own roles to play.

    Which is better?

    clamp() is better when:

    You want a single rule that adjusts smoothly across a range of screen sizes. It's great for responsive typography or scaling elements based on viewport size(like font size, margin, padding, etc.).

    example: font-size:clamp(16px, 2vw, 24px);

    Which means the font size will be at least 16px, but grow as the viewport width (vw) increases, capped at 24px.

    Media queries are better when:

    You need to make more significant layout changes or apply different styles based on specific device characteristics (like orientation or resolution). They offer more control over how your content adapts to different devices.

    example:

    * CSS for screens wider than 600 pixels *
@media screen and (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

* CSS for screens narrower than 600 pixels *
@media screen and (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

    These media queries allow you to customize how elements on your webpage look based on the width of the screen.

    So, you can then see that based on this information Media queries will help you reach your goals of different layouts on screens of different sizes.

    Always do more research if the concept is not clear yet!

    0
  • Zainab Adeoje•30
    @ZuwaynibSubmitted 4 months ago
    What specific areas of your project would you like help with?

    I would appreciate help with the desktop design, how to make the label elements (eg first name and last name) appear on the same line

    Contact form using HTML and CSS

    1
    Lemnsa•110
    @LemnsaPosted 4 months ago

    Congratulations :) on completing this task @Zuwaynib

    Sure let's sort things out

    You could separate the two input fields (label with the input) in a container (it can be a div)

    Like so:

    <div class="container">
            <label for="firstinput">firstinput <br>
                <input type="text" name="name" id="name">
            </label>
            <label for="second-input">second-input <br>
                <input type="text" name="name" id="name">
            </label>
    </div>

    But we want to make things under control, so we use CSS to give the children elements in the parent(div) a display: flex

    Doing so:

    • The child elements spacing, positions could be adjusted with gap , justify-content or align-items depending on you.

    Here's a sample CSS

    I am using embedded CSS

    @Zuwaynib hope this helps, and incase you are not still grabbing it refer to your learning materials and it get things done!

    0
  • Lemnsa•110
    @LemnsaPosted 11 months ago

    Hello there @YawBoah Congratulations completing the Challenge!.

    I got a feedback for you, I hope it helps🙂

    The purpose of the design resources given to you when you take this project, is to help you achieve closely the same design ⭐.

    • Let's start with the font-style Make sure it matches the one in the style guide file.

    • Your input field doesn't have a placeholder attribute.

    • Another one, the left space from the checkboxes should be reduced. Incase you used margin or padding property, adjust it.

    • Also, the text color is not the same with the design. The background color is not the same, copy the color code from the style guide file.

    • Lastly, the container holding the two sections , make sure each each section carries half of the container's width.

    You could still reduce each section's width for padding or margin.

    I wish this will not only help you out with this challenge but in any other challenge in the future :).

    Happy Coding 🦾

    Marked as helpful
    0
  • Jared Teng•20
    @jazteng2Submitted 11 months ago

    calculation may be wrong. No validation added.

    Updated:

    • fixed the setinterval (clearInterval wasn't working)
    • center element and changed background

    Age calculator (animated counter)

    1
    Lemnsa•110
    @LemnsaPosted 11 months ago

    Hello there @jazteng2, Good job there 👍

    Let's start with Placing the Age calculator Card at the center of the page. To achieve that with CSS: 1.Set the body min-height to 100vh. 2.Justify-content: center to center it in the x-axis or horizontally, and vertically by align-items: center.

    Let's also change the background to match the design. TIP: I use PHOTOSHOP color-picker tool, to pick the hexadecimal code of the color from the design.

    From, there you can paste it in your background-color: tag.

    I wish it should be of help to you :). Happy coding 🦾

    1
  • Lemnsa•110
    @LemnsaPosted 12 months ago

    Hi @aka_shiguero great job there 👍🏽.

    There is a trick I use if you would not mind,

    1. I create a div element with a background color purple, width and height same with the image's.

    2. I set its position to absolute, so it should have an automatic z-index.

    3. Use the values of left, top to adjust it.

    4. Add opacity to the div class, till the image is same as in the design.

    I wish it helps you.

    Marked as helpful
    1
  • Lemnsa•110
    @LemnsaPosted about 1 year ago

    Nice one @maxGithub0515

    • Add Margin-bottom to body of the Mobile design to shift it up from the bottom of the page.

    • Add some transpancy to the background - color to match the background.

    0
  • Lemnsa•110
    @LemnsaPosted about 1 year ago

    Hey nice work.. Please help me with how to adjust that SVG background. Thank you for your time 🙏

    0
  • Lemnsa•110
    @LemnsaPosted about 1 year ago

    Hi Shrija2, I had issues with that too but I decided to set whole containers position to relative, then used top, bottom, right, left to adjust it's position.

    Marked as helpful
    0