Skip to content
OverviewSolutions
2
Comments
3
Shivian
@Andre-DM

All comments

  • Mackenzie•10
    @mackbairdSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of being able to look at an image of a website and being able to replicate it as closely as possible. I am used to being able to inspect live websites, so building based off a non-interactive image was challenging but fun!

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

    I do feel that there are sections I didn't quite nail, such as the paragraph alignment. And I do think there were potentially easier ways to code certain things, because I do have some repetition in CSS for text styling. I tried my best to use the padding and margin to align the text as close to the given image as possible.

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

    I think what I'd like help with is making this suitable for mobile. I'm getting the hand of desktop but I would greatly appreciate some feedback and help with how to make sure a project still looks right on mobile.

    QR Code

    2
    Shivian•40
    @Andre-DMPosted 7 months ago

    Hi there! I have a couple of tips that I hope you will find helpful! Let's start:

    • Always try to use Semantic HTML, such as <header>, <main>, <article>, because it increases the accessibility of your page, for example: Instead of <div id=“root”> you could use <main class=“container”> or <main id=“container”> (I do not recommend using the word “root” for classes or ids, because in CSS it can be confused with the :root selector.) I'll leave you a link if you want to learn more: W3School - Semantic HTML

    • To avoid repetition in CSS, especially with text styles, you can include rules such as font-family, font-size, or in the case of your specific code, even font-optical-sizing in the body selector.

    • Regarding feedback on mobile, I can recommend that you can start working on the project directly in mobile mode and then switch to desktop via media queries. CSS properties such as min-width, max-width, or min-height and max-height, will help you manage the various elements on smaller screens, preventing them from getting too tight or too large. Perhaps this link can help you: CSS Tricks for Responsive Design

    Anyway, your project is great! I really hope these tips were helpful to you, since I'm still learning too and these concepts were very useful to me!

    Keep up the good work!

    Marked as helpful
    1
  • Shivian•40
    @Andre-DMPosted 7 months ago

    Hello! I might have an advice for you regarding HTML:

    • Text within a <div> should be enclosed in <h1> </h1>, <h2> </h2>, <p> </p>, etc. depending on the purpose.

    Instead of:

    <div class=“blogCard-text”>
  These languages are the backbone of every website, 
  defining structure, content, and 
  presentation.
</div>

    it should be:

    <div class=“blogCard-text”>
   <p>These languages are the backbone of every website, 
   defining structure, content, and presentation.</p>
</div>

    I hope this helped you and congratulations on completing the challenge!

    0
  • Andrew G. Ayad•100
    @andrew-g-ayadSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Attention to small details, adding and altering shadows based on screen size, and pixel-perfect matching.

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

    The challenge I encountered was calculating an adaptive border-radius. I overcame it using calc()

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

    none

    QR-Code Component

    1
    Shivian•40
    @Andre-DMPosted 7 months ago

    Hi! This is my first review, but I think I have a couple of tips that may be useful in the future:

    • It is generally a good idea to use rem units for font size and px for other properties such as width, height, padding and margin. This is because rem units are based on the root element html of the document and are therefore more flexible and responsive than px units.

    • To avoid repetition in the code, properties such as font-family (in this case, a single font for the entire project) can be placed in the body selector, as well default values such as font-style: normal can be avoided, unless they are used to override other previously declared font-styles.

    I hope this couple tips were helpful to you, otherwise your solution seems great!

    Keep up the good work!

    0