Skip to content
OverviewSolutions
20
Comments
35
Mamadou Mar
@Mar1362

All comments

  • Kal•30
    @CodeCrafter-kalSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    finally I have done it, I think for next time I will see deeply about measurement units and there effect on d/t screen resolution

    QR-Code-Card With [HTMl && CSS]

    2
    Mamadou Mar•550
    @Mar1362Posted 3 months ago

    hi friend this is an awesome work, i really like it, in the render as well as in the code. there is not much to say. i was not so good like that at my begenning you're a genius. here are just some adjustment to think about hope it'll help you improve:

    In the HTML code you must know that the img tag is an "inline" element so you must always put it in a "block" element like, in this case, figure tag which is more suitable in my opinion. Moreover, you don't really need to wrap your heading and paragraph into a div element you can put them directly without the div. If there is something to wrap, it will be card itself into an article element. you can learn more about semantic HTML here. In order to see what i really mean take look at the code below:

    <body>
  <main>
      <article class="card">
          <figure><img class="qr-code" src="./images/image-qr-code.png" alt="A QR code"></figure>
           <h1 class="text-heading">Improve your front-end skills by building projects</h1>
           <p class="text-para">Scan the QR code to visit Frontend Mentor and take your coding skills to the <span>next level</span></p>
      <article>
  </main>
</body>

    here you go. It is just a suggestion and always remember there is not one best way to do stuff in coding. Hope you learned something from this friend.

    At your CSS, you must know that :root{} is the same that html{}. you might think that :root{} is just for declaring css-variable but you must know that :root{} is just a pseudo-class that refers to html{} so there is no need to use both you can use only one: read this. we use to declare css variables at the :root{} so that it can be inherited by all the document since variable are inherited. read this quickly for a better understanding.

    And that's all for me friend. Great continuation genius. Happy codin (:0)

    Marked as helpful
    0
  • Mamadou Mar•550
    @Mar1362Posted 3 months ago

    hi friend i really appreciate the render it's a clean job. Now, in order to change the cursor appearance when you pass over a link you should use the css property cursor: pointer;

    Also, you don't need to wrap the ''London, United Kingdom'' into a <p> tag

    And instead of using div for your buttons you may want to use the following instead since it is a list of link referring to Jessica's social accounts

    <ul>
      <li><a href="#">GitHub</a></li>
      <li><a href="#">Frontend Mentor</a></li>
      <li><a href="#">LinkedIn</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Instagram</a></li>
</ul>

    Hope this help you improve my friend! let's improve together :0

    0
  • Mamadou Mar•550
    @Mar1362Posted 3 months ago

    the code is not available

    0
  • Andrew Raphael•110
    @AndDevISubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    Centralizar a Div

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

    O tamanho do H2

    FlexBox

    1
    Mamadou Mar•550
    @Mar1362Posted 3 months ago

    Hi friend this is a clean code there! I really like the way you coded this challenge. The only thing that i would mention is that it's better using semantic HTML nowadays. I mean, instead of doing

    <div class="img">
        <img src="assets/images/image-qr-code.png" alt="qr-code">
 </div>

    you may want to do the following

    <figure class="img">
        <img src="assets/images/image-qr-code.png" alt="qr-code">
 </figure>

    i did the challenge it's been a while and i was really pathetic at it and i havenn't corrected it yet but now i am improving and i want to share what i learned

    Marked as helpful
    0
  • KennethBerglund•10
    @KennethBerglundSubmitted over 1 year ago

    my css flexbox skills are lacking not sure how to properly center align vertically and horizontally when containers are nested within containers multi containers deep

    Qr code box css flex box

    3
    Mamadou Mar•550
    @Mar1362Posted over 1 year ago

    Hi friend, hope you're doing well ! I visited the site and the code and i think that you did a great job in my opinion i appreciate your work and here is some suggestion to improve the render:

    IN THE HTML

    • first remark is that we may think that you were lost in your code friend i mean your code here is too much nested and awkward according to your class names :
    <div class="mainContainer">
<div class="imageContainer">
<img class="image" src=".\images\qr.png" alt="">
<div class="bottomContainer">
<div class="textContainer">
<h4>Improve your front-end skills by building projects</h4> 
<p>
Scan the QR code to visit Frontend Mentor and take your coding skills to the 
next level
</p>

<div class="attribution">
<p>
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" 
target="_blank">Frontend Mentor</a>. 
Coded by <a href="#">Ken the Dev</a>.
</p>
</div>
</div>
</div>
</div>
</div>

    here what you did is creating a mainContainer in which you put an imageContainer that have not only the image but another container the bottomContainer etc. that is what your code is ordering to do. Maybe you're not using an adapted code editor in order to be able to format automaticly your code. Indeed, your code was not formated at all and that can lead to some error of interpretation for the coder. And if this is how you choosed to code your card then know that this is not a way from the infinite way to do it. So here is what i suggest you:

    <div class="mainContainer">
<div class="imageContainer">
<img class="image" src=".\images\qr.png" alt="">
</div>
<div class="bottomContainer">
<h4>Improve your front-end skills by building projects</h4> 
<p>
Scan the QR code to visit Frontend Mentor and take your coding skills to the 
next level
</p>
</div>
</div>  

<div class="attribution">
<p>
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" 
target="_blank">Frontend Mentor</a>. 
Coded by <a href="#">Ken the Dev</a>.
</p>
</div>

    As you can see i removed the attribution div outside the main container because it is not a part of the card. Actually, we can get better than that with semantic HTML let's take a look of what i suggest:

    <main class="mainContainer">
<figure class="imageContainer">
<img class="image" src=".\images\qr.png" alt="">
</figure>
<h4>Improve your front-end skills by building projects</h4> 
<p>
Scan the QR code to visit Frontend Mentor and take your coding skills to the 
next level
</p>

</main>  

<footer class="attribution">
<p>
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" 
target="_blank">Frontend Mentor</a>. 
Coded by <a href="#">Ken the Dev</a>.
</p>
</footer>

    As you can see i removed the bottomContainer Because it is not needed to wrap the heading and the paragraph in a container since the beginning. Now let's jump to the css and if there is any question or contribution then i will be glad to answer.

    AT THE CSS Here we won't comment the css according to my suggestion but to yours so here how we code the HTML doesn't matter.

    1. in your body element:
    body.weedContainer {
width: 1250px; 
background-color: hsl(212, 45%, 89%);
display: flex;
justify-content: center;
font-family: outfit;
text-align: center;
}

    • you gave a fixed width of 1250px to your body and even if you use media queries never do this again. Indeed, if you do this then in screens with less than 1250px of width, your page overflows and even your centered card will might be offscreen. So avoid this method and i think that the <body> always fit the navigator's window screen width (viewport) automaticly but if you want to be sure then feel free to use the following instead width: 100vw; so that it'll fit the viewport width.

    • Moreover, if you want to center your card you must know that the <body> doesn't fit the viewport height so if you center vertically your card won't be at the center of the viewport vertical axis. So, first thing first make your <body> get the 100% of the viewport height like this height: 100vh. With that done you must center the card at both main and cross axis of the flexbox container like the following justify-content: center;(main axis) align-items: center; (cross axis). So your code becomes:

    body.weedContainer {
width: 100vw; 
background-color: hsl(212, 45%, 89%);
display: flex;
justify-content: center;
align-items: center;
font-family: outfit;
text-align: center;
}
    1. In your mainContainer element
    .mainContainer {
height: 350px;
width: 225px;
background-color: white;
flex-direction: column;
border-radius: 10px;
display: flex;
justify-content: center;
margin-top: 100px;
     
}

    when i look to this then i guess that you don't master yet the flexbox methodology then i will just demand you to continue improving it but what i want to notice you here is never center with margins use flexbox or grid or even positionning to center. Moreover, don't give to an element a fixed height in px like you did here if you want it to be responsive and bear in mind that we never use fixed height in frontend developpement because if the content is well coded then the height will follow.

    I would rather exchange a lot with you but i don't have a lot of time but i intent and hope that this will help you improve your coding skill friend. Keep Improving. Happy Coding :)

    0
  • Mamadou Mar•550
    @Mar1362Posted over 1 year ago

    Hi there! Hope this message found you well. I jumped to your source code and here is some suggestion:

    • never throw an <img> element directly, always put it in a <figure> element or in a paragraph

    • i found that everywhere where the cursor becomes a "hand pointing" you make a link with the <a> element. Well, sometimes they are not link at all and even if you set the refering attribute to the following href="#" it is not the best way to do it because it reload the page and it doesn't help semanticly. So here is how you could change the appearance of the cursor in css by just using the cursor: pointer;

    • now let's get to your main question here. Before everything else wrap your <img> into an <figure> and then in your css delete everything about that image styling. So, first thing first, we make the figure relatively positionned so that whatever inside it with an absolute position will be positionned inside it and not outside so that it still in the same place of the image. After that we'll use the ::after selector to the figure at hover to make the eye icon appears that is why you should wrap your image inside a <figure> tag otherwise it won't work with the ::after . It will be usefull for your next projects to learn about ::before and ::after css selectors. Here is the code:

    // this is just to make the image fit the figure element so that it won't overflow
img{
width: 100%;
object-fit: cover;
}

figure{
position: relative;
}
figure:hover::after {
content: ""; // this is necessary
position: absolute; //it'll be placed inside the figure space since that one is in position relative
inset: 0; // this set the top right bottom left position property to 0 so that the content strecthes
background: url(icon-view.svg) no-repeat center; // set the background to it
cursor: pointer; // this is just to change the appearance of the cursor try it
}

    i use the inspector and it works try it and I'll be glad to help again friend if there is any other issue. Happy Coding :)

    Marked as helpful
    0
  • Gia•130
    @panyingiaSubmitted over 1 year ago

    It take me a while to finish this project , a little bit bootstrap (grid system) to line up the layout , well ,I'm done anyway XD sometimes I find disturbing while I'm using pure CSS and bootstrap at the same time It's just me or ??

    news-home-page-UI

    1
    Mamadou Mar•550
    @Mar1362Posted over 1 year ago

    Hi friend, Personnally i don't like bootstrap i prefer using pure css :0

    and actually with css grid and flexbox system it becomes easier rather than learning bootstrap (i learned it just to know what it is but i don't use it at all :0)

    another way to layout these kind of layout is by using HTML table but i don't prefer :)

    If you wan't to use both bootstrap and pure css on your projects consider using the !important tag in the last one to override the bootstrap effects

    Good Things to you! Happy Coding! :)

    Marked as helpful
    1
  • Mamadou Mar•550
    @Mar1362Posted over 1 year ago

    Hi hope you're doing well! your wrapper is not centered vertically because the body element, by default, only get a minimum content height. <body> element doesn't fill the full page height by default it just get the required height to show the content inside it. In order to force it fill the full viewport height you should add the following line inside your body selector: min-height: 100vh. Indeed, by making it fill the full viewport height, if you vertically center his content it will appears right in the middle of the viewport (the page) height. here is an opportunity to learn about some extra css units like vw vh em rem etc. Try it friend. Happy Code! :)

    Marked as helpful
    1
  • Mamadou Mar•550
    @Mar1362Posted over 1 year ago

    Hi hope you're doing well! really good render here, i like it. And it will be more cool if the opened tab closes itself when another one is opened. Thanks! Happy Coding:)

    0
  • Ro•20
    @DevRomuSubmitted over 1 year ago

    What I found difficult about this project was looking at CSS and organizing everything to work, any tips and tricks on improving my CSS would be appreciated.

    Used basic HTML to code out the web-page, I used stacked overflow to help code out everything.

    Basic CSS and HTML On vscode

    1
    Mamadou Mar•550
    @Mar1362Posted over 1 year ago

    Hi, i congrats you for finishing the challenge your code is cool. And here you go with few suggestions. Hope it will help you improving.

    • you don't need as much div as you added. I think that just one would be ok. Of course, if you do so you have to set the paddings so the content will be centered in the card as it is shown in the design
    • #Bolded_Paragraph and #Paragraph have same font-size in your code but they normaly don't according to the design
    • You must center your paragraphs as you can see it in the design. In order to do so, you have just to use the property text-align with the value center like that text-align: center;. Just add it to the paragraphs and you're done.

    Happy Coding ;)

    Marked as helpful
    2
  • Mamadou Mar•550
    @Mar1362Posted almost 2 years ago

    hi, nice layout! but it should fill the window's width i think.

    0
  • Mamadou Mar•550
    @Mar1362Posted almost 2 years ago

    I suggest you adding type attributes to your inputs

    0