Skip to content
OverviewSolutions
1
Comments
3
MaRou
@MaRou-Code

All comments

  • MaRou•80
    @MaRou-CodePosted over 3 years ago

    Great job ! But it seems to me that this is not responsive. Your layout is only optimized for two screen dimensions (the one mentionned in the style guide) and nothing else. I think that it can be partially solved by applying your background gradient to the body instead of to your .outer-container div. And the box, in the desktop layout is not laways properly positioned.

    Marked as helpful
    0
  • SmoothCrimminal•135
    @SmoothCrimminalSubmitted over 3 years ago

    This is my first challenge and I'm kindly asking for feedback containing which tools should I start to use in my code, and which tools should I avoid using creating card like this, also I wonder how can I make separate model of card for mobile devices and PCs. Thanks in advance for all replies

    Clear HTM and CSS

    1
    MaRou•80
    @MaRou-CodePosted over 3 years ago

    Hello there, I'm a newbie and I've never taken this challenge but here are some advice that I think might hopefully help you.

    • First of all, get rid of the text with no tag at the beginning of your body tag.
    • Avoid inline styling at all cost. It's not maintainable, especially on larger scale projects.
    • Concerning the image overlay, there is a very usefull and effective technique : background: url(#) repeat color; You should obviously replace the hashtag with your image url and the color with the color of your choice.
    • I think a grid approach could be pretty effective for this kind of layout. Here you will find a complete guide to grid. Your layout will be more responsive with this approach.
    • For even more responsiveness, try to use media queries to adapt your layout to all screens.
    • By default, the browsers display your content from left to right, so I think it's a best practice to do the same when organising our tags. I would definitely put the image after the other div's, just because it seems more easy to read and to understand for someone else and even for you in a few month. (My apologies if you speak a language which is read from right to left, this approach would seem probably less "logical").

    I hope these comments will be helpfull to you. Keep having fun programming !

    2
  • sunil-sharma-999•405
    @sunil-sharma-999Submitted over 3 years ago

    In the cards layout i tried multiple codes until it worked. so i would like to know, how should i do the layout effectively? what CSS properties should i use or how should i approach the layout problems? any tips would be appreciated, Thanks for reading!

    HTML5 and CSS

    1
    MaRou•80
    @MaRou-CodePosted over 3 years ago

    Hi there, I'm a newbie as well but I think I might have some advice for you. I might be mistaken since this is just my own undestanding of the readings I've been through to overcome some of the challenges I've taken.

    1. HTML
    • You shouldn't be using so many classes, especially classes like .main, .h3, ... They're useless since you could simply use the plain selector in your CSS (main, h3, ...)
    • You sometimes seem to get classes and Id's mixed up (.para-1, .h2-1, #container, ...). A class should be reusable while an id is unique. Therefore, creating a class for one unique component, as specific as the 1st paragraph for example, is not very usefull and especially not what a class is meant for. In the contrary, an id should be so specific as not to be used twice. Furthermore, it is not considered as best practice to include id's in your CSS, so we should use them sparsely.
    • Now, focusing on the pure structure of your HTML, I noticed two elements that could be improved : .para-2 and .para-3. **Para-2: ** In my opinion, you should avoid using break lines when you could simply and more effectively use two separate paragraphs. **Para-3: ** you should use an unordered list instead of the one paragraph you divided with break lines.
    1. CSS
    • They are many ways to be very specific in your CSS that prevent you from using so many classes - which will lead to a mess on larger scale projects - such as child selectors, descendant selectors, combinators, and so on.
    • I used the grid approach to obtain the card layout and the flexbox approach to center horizontaly and verticaly the card.

    I've noticed some other minor details but in order to keep it relatively short, I would suggest to adress these issues first.

    Have fun programming !

    1