Skip to content
OverviewSolutions
11
Comments
6
Dieu Donne
@d-donne

All comments

  • Dieu Donneβ€’150
    @d-donnePosted about 1 year ago

    I notice my design is smaller, I now realize the design images are not to scale πŸ˜”. I will change my dimensions on it.

    0
  • mavβ€’90
    @xmavvSubmitted over 1 year ago

    Hey, I learn a lot from this one, I was doing it with youtube videos, to improve my semantic HTML, and CSS skills. Soo my question is what does do the max-width rule in my section from CSS? I heard that this is done, for not being too big (the section tag), but when i tried to test it i could not find the practical solution. The 50%, 100% values have the same result if i stretch horizontally my page. I mean why I cannot leave it empty, just not use it, would it be any difference? Another question is where do I should use background image, color, etc, in my main tag or just body, does it make any difference at all, except that bg in main is only in main and when I move page away i can see the empty bg (when bg image is in main), or normal bg img (when bg image is in body) Hope someone can explain! Have a good day

    Intro component, form validation

    1
    Dieu Donneβ€’150
    @d-donnePosted over 1 year ago

    Hi @xmavv. Great job on this project.

    Concerning your question on max-width

    Block level elements like div, section, main, footer, etc already take the full width of their parent element, so in most cases, it's not necessary to set width: 100%.

    The max-width property tells the browser the maximum horizontal space the element can cover. As such you may not see it's effect if the element itself is not big enough to cover that space. It is however useful if the element, say an image has a width that can grow to be greater than that of the parent element. This will make it able to shrink, but not grow past its parent.

    concerning background image

    If the image's primary role is to serve as a background, then you should use the CSS background-image property. If it's an image that adds meaning to the page, then use HTML <img src="" alt=""> tag - and always remember to add alternative text for semantic reasons. That being said, it is sometimes difficult to manipulate certain images when used as background-image, hence the img tag is used in these situations and manipulated in the CSS.

    I hope this helps.

    Marked as helpful
    0
  • Dieu Donneβ€’150
    @d-donnePosted over 1 year ago

    Hi there, Shimaa, good job so far. I've looked at your code, and I have some notes that could be of help to you. These are more of opininons based on what I know so far that I think will help.

    NOTES

    I've noticed you've used a lot of divs in your HTML. Since the div element has no semantic value, there's no need to use it unless you need to group certain elements together to help in styling or any other purpose.

    img - you have specified the dimensions of your image a bit too big looking at the design.

    HTML

    <main class="container">
    <div class="container-image">
        <img src="image-qr-code.png">
    </div>
    <div class="container-body">
        <h1>Improve your front-end skills by building projects</h1>
        <p>
            Scan the QR code to vist Frontend Mentor and take your coding sills to the next level
        </p>
    </div>
</main>

    For accessibility reasons, you could change your container div to main.

    The container then can have two divs nested in it, one with a class of container-image for QR code image, and the other with class of container-body for the heading and text. This will help if you want to you use flexbox or grid, and the naming will also help easily identify them.

    After setting the width of the container, you don't necessary need to give the image a seperate width. and the texts will also follow to suite the width. You can then add some padding for the internal spacing. I usually like to do `box-sizing: border-box', so my padding and margin don't increase the containers size. like so before any other styling:

    CSS

    * {
  box-sizing: border-box;

body {
     width: 100vw;
     height: 100vh;

    /* center the container */
     display: flex;
     align-items: center;
     justify-content: center;
}

.container {
    display: flex;
    width: 50vw; /* edit to suit design */
    padding: 15px; /* edit to suit design */

h1 {
   font-weight: 700;
}

    To make it easier to follow, your CSS selects should be in the order they appear in the HTML or page, and grouped according to sections in the CSS file.

    Also, the font-weight CSS proper does not take any units.

    I hope this helps, @shimaaosama. Please ask more questions, if needed.

    You can look at my solution here

    0
  • linaβ€’20
    @Lina-HamoSubmitted over 1 year ago

    i'm wondering how how to push the name and age to fit as the design

    using html css

    1
    Dieu Donneβ€’150
    @d-donnePosted over 1 year ago

    Hi @Lina-Hamo, to answer your question

    you could give your profile div a margin-top of negative values. Say

    .profile {
    margin-top: -2rem;
}

    this will move it up

    1
  • Damian Marutβ€’10
    @MarutovskySubmitted over 1 year ago

    Hi!

    1. Is it ok in this case to use html elements in my css file instead of using classes?
    2. What with the mobile design? I didn't do nothing to get it, but when I resize the screen it looks good.
    3. I'm curious about the way I pushed footer to the bottom of the page.

    Feel free to leave any feedback, thanks!

    QR Code first solution

    2
    Dieu Donneβ€’150
    @d-donnePosted over 1 year ago

    To answer your question on using elements (Tag names) as CSS selectors, there's actually nothing wrong with it if you want elements of that type to have a general styling.

    Class Names Have Higher Specificity Than Tag Names.

    When you give that element a class name, the CSS styling using the class name will override the Tag name's styling affected by that CSS property.

    For instance:

    HTML

    <p class="text-red"  id="text-green">

    CSS

    p {
  background-color: black;
  color: white;
}

.text-red {
  background-color: yellow;
  color: red;
}

#text-green {
  color: green;
}

    If this paragraph is styled using the CSS, it'll actually show a green text with a yellow background, because IDs are more specific than class names, and class names than Tag names.

    Here is an article I found: Importance of CSS Specificity

    Marked as helpful
    0
  • Dieu Donneβ€’150
    @d-donnePosted over 1 year ago

    Hi. Good job so far. You could use border-radius on your container to make the edges rounder.

    Font

    The link to the font used in the design is in the style-guide file. Better still, just add this to the the top of your css: @import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;700&display=swap";

    and then set the font-family as

    body {
font-family: "Public Sans", sans-serif;
}

    This should bring the design closer. Also ask questions if you need more clarification.

    0