Priyanshi Somani• 100
@Priyanshii677
Submitted
Hey!! Please review my code and do share your your feedback :)))
Usanase Makala
@usanCode
All comments
- Usanase Makala• 330
@usanCode
Posted
@priyanshii677, Hello. How are you doing? I have viewed your webpage on mobile and I have to say it is nicely displayed. Just the background images are not there and even in your GitHub code , you do even not mention about them in the @media screens for mobile versions. Something else, the gap between the various sub-containers is too big, especially the one between the intro and the first rating. You can try solve this with paddings/margins. About the desktop version, the intro should be written above the two main blocks below in order for the webpage to look more like the model. Personally, I prefer make use of CSS grid containers. Maybe should l introduce them to you ? Here is an interesting link about that:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout.
Also try to fix the issues found in the report. For that ,you have just to read the links provided into that same report.
Good luck!!
0 - Jose Daniel• 270
@J0SEED01
Submitted
welcome to feedback
Usanase Makala• 330@usanCode
Posted
@JOSEEDO1, Hello, how are you? I have seen your webpage's mobile version. And it is nicely displayed!! Good job!! Just fix that accessibility issue found in the report. I have also viewed your GitHub code. By taking a look at it , I get to know something..like the @media(hover).
Congratulations for this challenge and good luck!!
Marked as helpful
0 - Cephas• 160
@28cephas
Submitted
All feedback is welcome
Usanase Makala• 330@usanCode
Posted
hello Cephas,
How are you? This challenge is a bit difficult! I have taken a look on your webpage and github code. About how your webpage is displayed, I have zoomed it on Google Chrome on higher and smaller values. I have noticed you've started to design your webpage for mobile version for higher values and when zooming for very small viewports' widths , the desktop presentation is displayed while the contrary should have been presented.
About the image's color of the right side, I advise you to choose an option that make the color to be more darker.
I have noticed in your code you like using flex containers. Maybe I should introduce you to grid containers. Here are some helpful links to better understand the topic:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
https://www.w3schools.com/css/css_grid_container.asp
I really hope this help! Good luck!!
Marked as helpful
0 - Mathew Maro Joseph• 20
@jos-me
Submitted
Usanase Makala• 330@usanCode
Posted
Hi Mathew,
Nice work! This project is a bit challenging. I have viewed your webpage and github code. As you know there is a background color that has to be added to the image in the left side of the container. You can do this with the background-blend-mode property and verify which option is good for that and add of course a background color . Here are some links that can help to better understand the background-blend-mode property:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode
https://www.w3schools.com/cssref/pr_background-blend-mode.asp
Something else, Try to zoom in Google Chrome into smaller values and see how your webpage is presented. The content of the left side of the container gets expanded and gets smaller and smaller. Try to fix that.Still concerning that issue, you've made for higher devices's viewports the design for the mobile version. As you know, We have to present two versions of the webpage: mobile and desktop. So try to make the correct adjustments.
To fix the issues generated in the report, read carefully the links provided into that same report and make all the needed corrections and then generate a new one to see if there still some errors to fix.
Marked as helpful
0 - Mathew Maro Joseph• 20
@jos-me
Submitted
Usanase Makala• 330@usanCode
Posted
Hello Mathew,
How are you! Nice work indeed! You've forgotten to add a background color in the body of the webpage and the background image also. About the background image, it is a bit tricky,.. because that image has to be repeated but on one side only. For that, try the background repeat property and see which option is suited for this. Here are some links to can help to better understand that:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
https://www.w3schools.com/cssref/pr_background-repeat.asp
Something else, when zooming in Google Chrome to higher values, the main container tends to collapse with the footer of the webpage. Try to fix this problem.
There are also issues generated in the report,..you have to solve them. You can do so by reading carefully the links provided into that same report and find the appropriate solutions. After that, generate a new report till there is no more problem.
Good luck!
Marked as helpful
0 - Hariz• 100
@sj0n
Submitted
Usanase Makala• 330@usanCode
Posted
Hi Hariz,
How are you! This is a very special challenge for a newbie. Keep up the good work! I have viewed your webpage and github code. Concerning your webpage, try to zoom in Google Chrome to lower and higher % , you will notice the sizes of the containers at the bottom of the webpage get expanded. The width and height of each of these should be defined. About the reviews at the top right corner of the webpage, in order for them to be displayed correctly try to make use of margin/ padding. I have not been able to read your CSS code , but I have to tell you that I like to make use of grid containers when designing webpages. i am sharing with you some useful links about grid containers:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://learncssgrid.com/
About solving the accessibility issues in the report, you should read carefully the links provided into that same report and generate a new one after correction till there are no more issues.
Good luck!
1 - Yokke• 640
@Jexinte
Submitted
Usanase Makala• 330@usanCode
Posted
Hello Yokke,
How are you? Nice work!! keep up the good job! You've forgotten to add a background-color to the body of the webpage. The container should be put in the middle of the webpage. Something else, There are some issues generated in the report. You can fix them by reading carefully to the links provided into that same report and when you've updated your code , generate a new one till there are no more mistakes.
Marked as helpful
0 - Ben• 40
@bws3028
Submitted
I had some issues with the method that I created this. I believe I should have utilized a mobile first approach so I wouldn't have to reuse CSS nth-child() selectors within my media query
Usanase Makala• 330@usanCode
Posted
Hello Ben,
How are you? This challenge is a very difficult one. I have viewed your webpage and github code. And I have noticed you've written a code for mobile version rather than to start for desktop version . I say this because in the requirements for this project, there are two designs we have to present :Desktop and mobile designs. Just take a look on the "design" folder of the project.
I have also noticed in your Github code there is no @media screen written into your CSS code in order to determine how the webpage should be displayed into various devices' sizes. You should add them. Here some links that can help you to better understand that :
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I have also noticed you prefer using flex containers.It is fine but personally I use grid containers to better determine the position of each element of a webpage. Hereare useful links about grid containers:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://learncssgrid.com/
I have also noticed your github folder for this project does not have a README file. It should have one and written according to the README template provided by FrontEndMentor.
https://learncssgrid.com/
Something else , your webpage expands when zooming to smaller or higher values of the viewport in Google chrome. Try to fix that.
Good luck!
0 - Daniel• 170
@Catalyst497
Submitted
Which grid layout tips do you know that could have improved my styling here with lesser code? Also, which frameworks do you think are the best for css which could drastically improve my css and are easy to learn?
Usanase Makala• 330@usanCode
Posted
Hello Daniel, How are you? First of all congratulations for completing this challenge. Keep up the good work! I have viewed the webpage and github code. I have noticed you've written the CSS code inside the HTML sheet, it is okay but it is advised to put that code into an external CSS sheet. Something else I have noticed, there are many issues reported into the report. You can resolve them by reading carefully all the links provided into that same report . After having made the necessary adjustments, generate just a new report and that till there is no more issue to fix.
Good luck!!!
Marked as helpful
1 - ZaChiDev• 40
@zachidev
Submitted
Did at EU-PL training Dont even know which font was used
Usanase Makala• 330@usanCode
Posted
Hi Zachidev,
How are you? I have seen your webpage and github code. Keep up the good work! The main container of the webpage should be placed right in the it. I see it has been centralized horizontally but it has also to be centralized vertically. Try to use margin-top for instance. I have found some a link about that
https://blog.logrocket.com/13-ways-vertically-center-html-elements-css/
You can also read about that on MDN or w3schools for example.
Good luck!!!
Marked as helpful
1 - Tic_Tac1602• 360
@TicTac1602
Submitted
I remeber that it was the first time using grid. Please tell me I didn't messed up ? :')
Usanase Makala• 330@usanCode
Posted
Hello/Bonjour TicTac, How are you? comment ca va? I have taken a look on your webpage and github code. Well it is fine. I don't know if you have taken a look on the outcome of your work. First , when viewed on smaller screen'sizes on Chrome, the container changes it shape while it should remain the same.
And there are some accessibility issues to fix. For that, you just have to read carefully the links provided in the report.
Good luck and all the best!!
Cordialement votre,
Usan
1 - Emmanuel Onuorah• 60
@Emmanuel-webDev
Submitted
Usanase Makala• 330@usanCode
Posted
Hello Emmanuel, How are you? I have viewed your webpage and github code. Keep up the good work! Only there are some issues to fix:
-First, when zooming on Chrome to smaller sizes, you will notice the main container and all its elements get expanded. I got the same problem too when doing my previous challenges. I resolved that by setting the width and the height.
-In the main paragraph just right after the title, you've got confused about the text. You have to correct that.
-About the README file of your github code, it should be written according to the model presented in the README-template file.
-And finally, you have to fix the issues presented in the report. For that, you will have to read carefully to the explanations provided in the report.
So good luck!!!
Marked as helpful
0 - Nkwor Jane• 120
@Nkwor-Jane
Submitted
Usanase Makala• 330@usanCode
Posted
Hi @Nkwor-Jane, How are you? I have seen your webpage and Github code! Keep up the good work! I have noticed something when reducing the size of the screen on Chrome(chrome-zoom), the main container of your webpage gets extended. I also faced the same problem too in my previous challenges. the width and height of the main container should be defined. that is how I solved this issue.
Also find a way to fix the problems found in the report.
Marked as helpful
0 For this challenge I used:
- Screenreader only text
- Pseudo-elements for background images and borders
- The
zwnj;method to make the stats list keep it's semantics even using Voiceover in Safari - Scss and BEM naming
Usanase Makala• 330@usanCode
Posted
Dear @Grace, How do you do! I have done this challenge too. I have noticed in your webpage, the two main background-images just stay in their initial positions even when reducing the viewport's width . My approach about this issue was to define the background-image property for each of these two images. The result is not quite satisfying.
0- Moris Tibenkana• 160
@tmoris
Submitted
Any best practice advise that can improve my skills is calmly welcomed. Here is another mini project forwarded for assessments. Thanks, and best regard community.
Usanase Makala• 330@usanCode
Posted
Hi Moris,
How are you ? I have read your code. And what one can say from it is that you did all your best to do this job!! That is really amazing. My opinion is that the width of the main container should be a bit reduced and you should find a way to place it in the middle of the web page. Something else, the README .md should be written according to the model provided by FrontEndMentor in the README-template.md tab. It is just a great job!! Congratulations once again.
0 - szam• 800
@k-stopczynska
Submitted
Any feedback much appreciated:)
Usanase Makala• 330@usanCode
Posted
Hi szam, How are you? Great job! The webpage appears to be nice and there is no issue in the report! Well done! I say this because you've imported the fonts for the social networks' links and no issue is reported in the report because of that.
But try to zoom in Chrome to lower sizes, you will notice the right div container get expended as the viewport's size get smaller. Just check it out! You will understand what I am talking about. The width and height of that container should be set in order to fix this problem.
0 - Reinaldo Bustamante• 90
@ReinaldoBustamante
Submitted
Usanase Makala• 330@usanCode
Posted
Hello Reinaldo, How are you? The outcome of your work is fantastic!! What I like in your webpage is that the two background-images do not move from their positions when changing the size of the viewport. In Chrome, I have zoomed to lower and higher values and the positions of these two images stay the same. Only , I have noticed in your github code that you use negative values and FrontEndMentor definitively require to not use them. My approach was to use the property of "background-image position" https://developer.mozilla.org/en-US/docs/Web/CSS/background-position but the result is not as good as I want it to be.
Something else I have noticed in your work is that the last background-image, the one that has to be placed at the bottom right of the container is displayed before the latter and this is not required. It should be behind not before the container. Another thing , I have appreciated is that the main elements of the webpage are placed really in the middle.
Marked as helpful
0 - Chaiyut Kongprawat• 170
@ChaiyutK
Submitted
Usanase Makala• 330@usanCode
Posted
Hello, The result seems to be nice only,..I have noticed when viewing your site that when reducing the width of the screen,..the two background-images get extended. Just try in Chrome to zoom to 25% and you will understand what I am talking about. There are also some accessibility in the report to fix too.
0 - Modah• 50
@Modar-Mulla
Submitted
Usanase Makala• 330@usanCode
Posted
Hi Mudah,
How are you? I don't know if you've noticed,..but your webpage gets expanded when reducing the size of the screen. Try to reduce the size of the screen on Chrome and you will see that. I got that same problem too. To fix that, you will have to set the width and height of the main container. I also advise you to learn about grid/flex containers, that helps to make webpages responsive. You have also to fix the issues found in the report. Here are some interesting links : https://webdesign.tutsplus.com/articles/flexbox-vs-css-grid-which-should-you-use--cms-30184
And also check what MDN says about that: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
0
