Skip to content
OverviewSolutions
10
Comments
12
Dilan M Jayawardena
@iamdylanmj

All comments

  • Dilan M Jayawardena•180
    @iamdylanmjPosted about 1 year ago

    You have done great, however these are some areas you can add to improve your component, - give min-width to your main element, that help element not to shrink than specified value. - in your code , rule within the media query only apply when the screen size is above the specified value ( in your code it is 1440px ), until reach that point you can give a max- width to your main element, that prevents stretching the main element horizontally.

    • if it is possible , you can reduce the mind width property value from 1440px to less value. I need to let you know that I am also a newbie like yourself , I am also learning. So I hope this feedback may help you. good luck to your coding journey
    0
  • Dilan M Jayawardena•180
    @iamdylanmjPosted about 1 year ago

    it seems like you are on the right path, I did same when I first start, but I focused more to learn how CSS media query works, specially how min-width & max-width behave within CSS media query. I suggest you to pay more attention to learn those little but important aspects of responsive design. good luck.

    0
  • Muhammad Faizan Soomro•60
    @Muhammad-Faizan-SoomroSubmitted about 1 year ago

    Hey Everyone! This is my solution for Result Summary Component challenge by Frontendmentor.io.

    I am little bit unsure of my styling skills and I ended up creating lots of classes. I know this issue can be resolved by using Tailwind CSS and I am learning it but for now I want some valuable advice on how can I improve my code and create less classes.

    Please review it and give some valuable advice/feedback as feedbacks are highly appreciated and I am open to suggestions on the best way I can solve this challenge. Looking forward to hear the views of other coders.

    Responsive result summary component using CSS Grid and CSS Flexbox

    2
    Dilan M Jayawardena•180
    @iamdylanmjPosted about 1 year ago

    You have done a great job, I am also a newbie like your self, here is what I noticed from your code, you have tried to use svg images directly, it is alright but using image tag is better, because it is less complex unless you don't wanna change svg colors. The other things is, considering media queries min-width is suit for larger screens , assume you set min-width value as 700px, then the css rules only apply when the screen size equal to 700px or greater than 700px., and considering max-width, if you set max-width as 375px , the rules are gonna apply when the screen size is equal to 375px or less. So if you need to add specific screen size between two values like you tried to do in your media query the minimum value should be max-width:375px and maximum value should be min-width:1439, this will cause to apply css rules when the screen size between 375px and 1439px. I did my best to explain. overall you did a good job, please see how other people have completed the same challenge, you will have lot to learn. good luck.

    2
  • Dilan M Jayawardena•180
    @iamdylanmjPosted about 1 year ago

    As it is your first project, you have done great, I am also a newbie like you, good luck your coding journey.

    0
  • Dilan M Jayawardena•180
    @iamdylanmjPosted about 1 year ago

    you tried well, I checked your code carefully, what I found that you did not specify width for your container , it cause to spread whole container across the viewport. I like your approach you have taken to give a responsiveness to the page, please note that min-width property used for larger screen normally, let's say you specify 600px as min-width, it means screen sizes either should be similar to 600px or higher to apply specified rules.I hope this may be helpful to you.

    0
  • Dilan M Jayawardena•180
    @iamdylanmjPosted about 1 year ago

    You have done absolutely great, as a newbie like your self, let me share some ideas with you. In your media query you use min-width as 1440px and also you have specified body width to 1440px under that media query. In media query , min-width is used for larger screens and the opposite, max-width is used for smaller screens. So your rules within the media query will apply screen width greater than 1440px. If it is not what you need you have to reconsider it, and also specifying body width to 1440px within the media query may give horizontal scroll. here are some resource that helped me my learning journey . https://www.youtube.com/watch?v=2KL-z9A56SQ, https://www.youtube.com/watch?v=yU7jJ3NbPdA. I hope this may help you.

    Marked as helpful
    0
  • Dilan M Jayawardena•180
    @iamdylanmjPosted about 1 year ago

    As a newbie I would like to say this is great, I do not have much to say cause I also beginner like yourself, it seems like you have not included fonts the design recommended. And also when you feel free, check how other people have done the same challenge , there will be lot to learn, I am learning so many things from other people's codes. good luck.

    Marked as helpful
    0
  • mary1308•10
    @mary1308Submitted about 1 year ago

    Olá,

    Esta é apenas a segunda página da web que construo. Usei CSS e HTML simples. Achei difícil tornar o design totalmente responsivo em diferentes larguras de navegador e evitar espaços em branco excessivos na caixa de texto, mas acredito que consegui produzir algo aceitável no final.

    Fique à vontade para fornecer comentários, críticas ou conselhos.

    Desafio utilizando HTML e CSS

    2
    Dilan M Jayawardena•180
    @iamdylanmjPosted about 1 year ago

    you have done great, as a newbie like yourself to this, There were some points to learn from your code, and also there was something that I noticed, that it seems you forgot that you do not need to write some CSS rules you already wrote within the media queries unless you overwrite them. good luck for your coding journey, I hope this may help.

    Marked as helpful
    0
  • Dilan M Jayawardena•180
    @iamdylanmjPosted about 1 year ago

    you have almost reached the design, I am also a beginner like yourself, if I compare your project with mine, we both did the almost same way. It seems like you have used internal CSS than external CSS, I have heard many times that is not a good practice. Buddy I wish you all the best for your coding journey, make sure to check other how other people do the same challenge, trust me you will have lot to learn.

    Marked as helpful
    0
  • Dilan M Jayawardena•180
    @iamdylanmjPosted about 1 year ago

    I really like how you use semantic html tags for the markup and I also excited the way you used changing color of the svg view icon (the eye shape). thanks.

    0
  • Ignacio A. Rumbo•40
    @ignaciorumbodeskSubmitted over 1 year ago

    hi! this is my second challenge. I think the css code can be much better.

    well.. i have been many problems with the position of the blue box. his position over the white box.

    and handling the list element and his elements inside, positioning them on the right place.

    what do you think?

    i apresiate your feedback!

    Result Summary Component - Css/html - beginer

    3
    Dilan M Jayawardena•180
    @iamdylanmjPosted over 1 year ago

    I just check your code, I am also beginner like you, you did great, it is looks like you haven't specify list item width, just check it out ,

    1
  • Caroline Ray•160
    @CaroliineRaySubmitted over 1 year ago

    If you have any ideas on how to improve the code, I would be really happy to hear that.

    Result Summary Card

    1
    Dilan M Jayawardena•180
    @iamdylanmjPosted over 1 year ago

    I just watched your code, to icons I used boostrap icons, there is also fontawesome, but it was easy for me to implement boostrap icons, becase it is almost free.

    1