@loki1205Submitted 8 months ago
Nebil Nejmudin
@Nebil-NejAll comments
- @readj4vvatSubmitted 8 months ago
- @DivasJaglanSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Proud of making this webpage responsive. Next time I would like to use vw and vh units for most of the cases as it helped me a lot for its responsiveness
What challenges did you encounter, and how did you overcome them?I faced a problem in aligning the given nutrition values in the same line. Then I came up with a solution that I can set the width of the nutrition name then give the left margin to nutrition values.
What specific areas of your project would you like help with?I want help with the responsiveness. I think it can be done with less code then the one which I have written
@Nebil-NejPosted 8 months agoI believe the reason why you used to many Media Query code lines is because you were setting the Container at a Fixed Width and heights, mostly when you use dynamic width properties such as, min-width/max-width, the look of the page is not bad on lower screen, or bigger screens, depending on how you are progressing through your project. The thing you do not want to do is giving a Height a Fixed Value, or avoid it all together, because once a height has a fixed value, it will ruin your Responsive Design.
Aside from that, Everything you did was Really Good Sir! Keep it up
Marked as helpful0 - @thisispeterjSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
Matching the final challenge as closely as possible to the design
What challenges did you encounter, and how did you overcome them?This project didn't present many challenges in writing my HTML and CSS. I would like to return to it potentially to refactor using SASS
What specific areas of your project would you like help with?Are there any areas that can be approved for code efficiency and conciseness
@Nebil-NejPosted 8 months agoGreat Work, Sir! only a minor issue, is in the Centering of the Main Content
display: flex; align-items: center; justify-content: center;
put this code in the body by giving the Body width and height of 100vw and 100vh respectively, and it will be perfectly centered.
0 - @Smailen5Submitted 11 months agoWhat are you most proud of, and what would you do differently next time?
I'm very proud that the layout turned out very similar to the original.
What challenges did you encounter, and how did you overcome them?Centering all the elements was challenging.
What specific areas of your project would you like help with?Using a preprocessor like SASS or Tailwind CSS.
@Nebil-NejPosted 9 months agoA really good try, but when the design goes to Desktop mode, it starts to break, i recommend you do not use a fixed value for the Height of the Main Container, and to use a fixed height for the Image, so as it will not break your Design, all together. I believe if you fix the Image, everything will be good!
0 - @JimCoder-DevSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
Speed to get online
What challenges did you encounter, and how did you overcome them?The right amount of margin and padding
What specific areas of your project would you like help with?Using classes or ids rather than styling using the HTML elements
- @vithogigmSubmitted 12 months ago
its my secound turn, using the frontend mentor, and my secound try making "sites", with no help of courses and teachers, give me please one feedback, of what i have to fix
@Nebil-NejPosted 12 months agoHello There My good sir, First of well done on completing the challenge without any Help! Now for fixing some of the issues. HTML
- rather than
<section>tag should of used<Main>for the accessibility and then using a section tag to enclose the qr picture and headings. - it is better to differentiate and enclose the <img> tag in its own section, or in no other section, and the descriptions in its own section to control both them the best way.
<body> <main class="container"> <section class="aba"> <img src="src/img/image-qr-code.png" alt="foto" class="foto"> <section class="description"> //helps to control the look for anything inside more easily <h1> <strong> Improve your front-end <br> skills by building projects </strong> </h1> <p>Scan the QR code to visit Frontend <br> Mentor and take your coding skills <br> to the next level</p> </section> </section> </main>CSS
- first of it is not optimal to use percent value for margins and paddings, better to use values that are not changing like px,rem..etc.
- in the body you limited the width by a value used on Heights, unless there is a valid reason to do so, there is no need to use vh(viewport height) value for your width as the name says.
- in the .aba class you used "-ms- flexbox" for you "display" and you could of just used flexbox, and as well as used percent value's for the margin, and you also did not give it either a min-width or max-width, which lead to the broken look you get when you look at the design to check responsiveness.
hope you will work on and make this project better on your, good luck with other projects as well!
Marked as helpful1 - rather than
- @Gabriel-Gallego-VSubmitted almost 2 years ago@Nebil-NejPosted almost 2 years ago
Good Job on finishing this project, and good job on keeping it responsive. just wanted to say you Should get the "Challenge by ..." part out of the container of the qr-code card. You could use the "position: absolute;" CSS property and with the "bottom: small number here;" property kept it at the bottom of the page, or remove it all together.
Marked as helpful1 - @nzcastilanSubmitted almost 2 years ago
a bit new in front end web development, Like to know if I'm using the @media properly to make the web page responsive for both mobile and desktop application or if there is a better alternative. Thanks!
@Nebil-NejPosted almost 2 years agoi have seen the code and it is good, but I would not recommend a 'margin: auto;' and 'width: 100%;' for this project,as it is in the design that the qr code be center left and right, the width will make it contain all the view width. So i suggest a 'width: 90%;' with a 'margin: 0 auto;'
1 - @vinumanSubmitted almost 2 years ago
Could not create the blue filter on the image. Looking for someone to help with the logic
@Nebil-NejPosted almost 2 years agoIt bothered me as well. but it was actually simple when i found out, just use this: -use the img tag in the html. -then use that section's background-color and opacity to make it transparent.
section { background-color: random-color; opacity: '<1' ; //for the transparency }or you can use the same section, and then add the image inside it.
section { background-image: url(image url); background-color: random-color; opacity: '<1' ; //for the transparency }oww and you did not center the part that needs to be centered, you can do that by using Flexbox centering
body { width: height: display: flex; justify-content: center; align-items: center; }Marked as helpful0 - @Achuyat-JoySubmitted over 2 years ago@Nebil-NejPosted over 2 years ago
@Achuyat-Joy i have seen the code and i believe you did not finish it. Plus:
- change the
divto the<main class=container>for the Accessibility, - and also use
<h1>element for the accessibility, - try and use relative path for the qrcode image.
- and try and remove the
bordertag in the CSS code or chage the color to the same as the container. hope to see a finished version of it.
good coding!
Marked as helpful0 - change the
