RogeanCosta

Latest comments

• 

  Gopal Adhikari•90

  @gopaladhikariSubmitted 5 months ago

  

  A user profile card with avatar, user-details and socials links

  #pure-css

  1

  10
  

  P

  RogeanCosta•150

  @RogeanCostaPosted 2 months ago

  Hi! Congratulation for the result! 👏

  By the way, it seems that Inter is not being applied. Another sans serif is being used instead. I suggest trying to understand why this is happening and perhaps using the font files provided through @font-face. Using @font-face, you just need use this:

  @font-face {
    font-family: 'Inter';
    src: url(../fonts/Inter-VariableFont_slnt_wght.ttf);
  }
  

  The image also appears to be larger in your result than in the design. It is not common to insert the image dimensions through attributes in the img itself; the recommended method is to inform the dimensions through CSS. In fact, a good code practice is to not insert img elements directly into the HTML, but rather to insert them inside a specific div. Then, with this div, you can limit, restrict the image dimensions. Something like this:

  <div class="img-container">
      <img
        class="img"
        src="assets/images/avatar-jessica.jpeg"
        alt="Avatar"
      />
  </div>
  

  .img-container {
    width: 5.5rem;
  }
  
  .img {
    display: block;
    max-width: 100%;
    border-radius: 50%;
  }
  

  Don't give up, continue your studies, always improving your skills! 😁👋

  Marked as helpful

  0
• 

  JSFGDev•40

  @JSFGDevSubmitted 2 months ago

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

  just all in general, documentation, good praxis, etc

  

  blog preview card main

  2

  30
  

  P

  RogeanCosta•150

  @RogeanCostaPosted 2 months ago

  Hi! 👋

  First of All, Congratulation for the Result! 🎉

  I have some recommendations for you 😁:

  1) Design

  There are some parts of the interface you built that don't look very similar to the design. You can see clearly differences in weight and even in the border. This exercise is part of the first learning path, which includes a .fig file what can help you a lot. I suggest you use it to build interfaces that are as similar as possible.

  I saw that you used google fonts to get the correct font. You could also have used the font files provided in the directory files provided. Research how to use them and include them in your interface. Tip: Search for @face-fonts. 😉

  2) HTML

  Your HTML code is very well constructed, I liked it! 👏

  3) CSS

  Your card doesn't seem to be completely centered, you seem to have had some difficulty trying to center it on the body with grid and then apply flexbox to the card itself. For this centering part, I suggest you always keep this resource saved, which I think is wonderful:

  Centering in CSS Guide 😍

  By the way, I like the way you defined the colors as variables! 😊

  Don't give up! Continue your studies, always trying to improve! 🦾

  Marked as helpful

  1
• 

  Mohammed Ali | محمد علي•60

  @macodingwebSubmitted 3 months ago

  

  qr-code-component-main

  #pure-css

  1

  10
  

  P

  RogeanCosta•150

  @RogeanCostaPosted 2 months ago

  Congratulations on the result! It looks very similar to the design. 👏

  I recently did this challenge too, the only advice I can give you for now is to not overuse <div> and always try to use elements semantically, such as <p> for paragraphs and <h1-h6> for titles. 😁

  Try to use <div> only to group elements whose grouping has no specific meaning, there is no element that represents such grouping. For example, for the website header or the introduction of content, we can use <header> instead of using <div>. 👋

  Marked as helpful

  0
• 

  Stephengrammy•60

  @StephengrammySubmitted 2 months ago

  What are you most proud of, and what would you do differently next time?

  Thanks to using the positioning selector in CSS I was able to center the content and make it responsive on all platforms so that helped me skipped the need of writing media query code

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

  First off I had issues with aligning my main-container div to the center of the page I had to look up the best way to position it on and what i found worked like a magic and it made the page responsive on all platforms .

  Secondly getting the perfect width for the image was a little bit tough I had to try a lot number in px and % .

  Padding too was something i had to retry a couple of time cause the sub-container div was gluing to the side of the main-container div

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

  I would love see someone else CSS code and how they structured it

  I definitely don't know to use figma and i was unable to open the figma design tried importing to the figma app but got an error message saying file is unsupported

  

  Responsive QR Code Using HTML and CSS

  2

  30
  

  P

  RogeanCosta•150

  @RogeanCostaPosted 2 months ago

  I just learned from your code a new way to center a container totally in the center, I had never thought of this possibility of using absolute positioning 😮.

  I recently did this challenge too, and I used the tactic of defining a container with a dimension smaller than that of the parent container, the body in this case (which seems obvious when looking at the design provided) and using margin-left and margin-right in auto. Having both in auto, makes them both have the same size and then the container is centered horizontally, however, I couldn't figure out what to do vertically 😅. I did something like:

  .main-container {
  width: 280px;
  margin: 50px auto;
  

  There is also a simple way to center with flexbox, but I believe that this already involves responsive design and is outside the scope of the challenge 🤔.

  By the way, about the .fig provided, I was able to open it in Figma online by dragging it onto the website, WITHOUT HAVING ANY PROJECT OPEN, just on the drafts screen. I don't usually use the application, so I can't give you information on how to proceed, but check if you can open it on the website, the design they provided was a great help to me. ✌

  Congratulations for the result! 😁

  0