Skip to content
OverviewSolutions
5
Comments
5
ZenCode95
@ZenCode95

All comments

  • ZenCode95•110
    @ZenCode95Posted about 3 years ago

    Wow, this an outstandingly well put together solution! Capital job, sir. Well done.

    Marked as helpful
    1
  • Suman Sahoo•15
    @suman-somuSubmitted about 3 years ago

    how can i remove the padding that comes when we apply paragraph tag and head tag ?

    html css

    3
    ZenCode95•110
    @ZenCode95Posted about 3 years ago

    Looks like you've grasped most of the details in the template design (colours, fonts etc.) I would say to consider increasing the padding for the nested divs. You can just experiment with it until your design looks basically the same as the template.

    The middle part with the "Annual Plan", the price and also the "change" link was the toughest part when I did this challenge, but getting this part to look right goes a long way. Best of luck!

    Marked as helpful
    0
  • ZenCode95•110
    @ZenCode95Posted about 3 years ago

    This is definitely one of the best solutions I've seen for this challenge. Great job!

    1
  • Eugene•135
    @Eugene44-hubSubmitted about 3 years ago

    Please i need a feedback about the design, and also an easier way for code optimization. Thank you

    flexbox

    2
    ZenCode95•110
    @ZenCode95Posted about 3 years ago

    Hello sir, I think you've done pretty well with this challenge so far, but there are some things that I'd like to suggest:

    Spacing - by studying the template design for this challenge, you can see that pretty much everything within the order summary card has a certain amount of spacing around it (whether that be with margins or padding) and if you want to get your project to look as close to the original as possible, paying attention to spacing will be a big part of that. For example, there is more space than is required around the div that contains both the h2 element with the text of "Order Summary" and the paragraph element below it, so you might want to try reducing the padding around both of these. That's what I would say about spacing. Remember that you don't have to get it perfect, you only have to try and get it as close as you can with your level of ability.

    Centering - So, for the h2 and paragraph element you've done the right thing by using 'text-align: center;' but for the next div it seems that two of the three nested divs called "sub" and "link" aren't centered. Now, admittedly I had some trouble figuring this out myself, but got there in the end. I would recommend thinking about the various ways you can use both CSS Grid and Flexbox, and remember that you can use flexbox within a grid container! It's very useful for centering divs. Also keep in mind that you can set flexbox items as flex containers themselves so that the content inside those child items affect their their own child items in turn.

    Fonts and styling - using the right styling will go a long way in making your project look as close to the challenge template as possible, so remember to pay close attention to the documentation for the design, which is found in the 'style-guide.md' when you download the starter files. The thing that I learned while working through this challenge is that there are details about this design that aren't immediately obvious to you and there's no hand-holding! For example, in the template design the text of "Order Summary" isn't colored black but is actually using a particular color that is provided in the style guide. You'll just have to look at the template and see for yourself what colors are being used when and where, which is good because it teaches you to think and work through things inquisitively and scientifically.

    For optimising your code: you want to go through your HTML and CSS and check for any mistakes like having two of the same thing and also poor structuring. As an example, after taking a look at your css file I noticed that you have two element selectors for both h2 and p tags. The better thing to do here is to simply include all styles for h2 elements in just one css element selector. Generally speaking, it's a good idea to always try and find ways of shrinking the amount of markup/code we initially write so that things run smoothly and efficiently. Think of the saying "less is more"; that's essentially the goal.

    Best of luck!

    0
  • ZenCode95•110
    @ZenCode95Posted about 3 years ago

    Hey there, this looks pretty good so far. If I could offer a couple of suggestions:

    1. the order summary card original template is pretty generous with its width, so you might consider increasing the width on yours for a closer resemblance.
    2. the challenge includes a specific font to be used in the documentation (check the 'style-guide.md' file in the starter files) I recommend using the required font to achieve a closer resemblance.

    Other than that, it looks good! Best of luck to you.

    Marked as helpful
    0