Hello Everyone!!!!! I am a newbie to the front-end learning world and I am starting my journey with solving small challenges from frontendmentor. This is my 2nd challenge.
Kindly review it and let me know where I can improve it.
Thank you
Happy Coding!!!!!!
Hey, nice work you have done there. I would like to suggest a few changes to your CSS:
div with class outerbox, Then just add min-height: 100vh;
display: grid;
place-items: center;
. This will place your component right in middle.
Also I haven't seen you read the full challenge description. You need to add JS etc and another 'Thank You' component also. It's also good practice to separate your CSS and HTML code.
What should I focus on learning or improving next? Do I look ready enough to advance to the junior challenges here at frontendmentor? Is some part of my css longer than it needs?(shortcuts or simpler way to do fix a problem)
Hey, hope you are doing good. I would like to suggest a few changes in your challenge:
In your .card class, remove height and display properties.
In your .rating a class, remove max-width and add width: 50px; height: 50px;, change border-radius: 50%; and padding: 1rem;
Also I have noticed you are using rem and px values mixed up which creates lot of issues. What I have learned is to use rem values for things like padding, margins etc and em values for fonts, which also helps in responsiveness.
Hope I helped, Take care.
Is it needed to put the image inside a div? It still confuses me a bit.
I feel like I'm learning something. It only took me about 20 minutes to build it.
Thanks!
Hope you are doing good. I would suggest you these few quick fixes on your component site.
In your .container you don't need that much of margin you can do is to simplify that property to margin: 0 auto
Then add these properties height: 100vh; display: flex; flex-direction: column; justify-content: center; to your body css, which will center your component.
In .qr-text simplify padding: 1rem;
In your .qr-text__p add max-width: 25ch;
Hey! Hope you are doing good. I checked out your work and it's very good. I would like to point out a few things:
The QR component is not centered, to fix that you can add height: 100vh; display: flex; flex-direction: column; justify-content: center; properties to the body in CSS and it will center it.
Also try to use HTML5 semantic markup as much as you can, for example: instead of your .main-box div you can use main tag instead and for the wrapper you can use section tag.
Hope this helps, Take care! Happy coding. :)
What is the best way to create the background? With my method, the images do not stay in the same position. Was there another way that I could have done it so the images scale with the window size and stay fixed in the same position?
Hope you are doing good. I would suggest that you:
img with a max-width: 100% that will fix your issue.object-fit property on the parent div. Be sure you do some research on these first.Let me know if I can be of any help.
Cheers! Happy Coding. :)
I had difficulty in aligning the h1 and the paragraph, and I think I could have done the image and its resizing in another way, but overall what can I improve?
Hi, good works it almost looks similiar to the design. I think you don't need to change any of it.
.container property setup in CSS, I suggest you set it.qr class add display: flex; then you can align items to center just justify-content and align-items.script tag which isn't used, so remove that.Always try to use semantic HTML5 tags instead of a lot div, it will keep your code cleaner. The rest is good work!
Happy Coding! :)
What are some things that I could do better code wise? How can I get my design to match the mockup more closely.
.trailContainer add width: 65%;.rightContainer and textContainer add flex:1 to both. display: flex; flex-direction: column; align-items: flex-start; properties to .rightContainerThis will fix your issue on larger screens.
Cheers! Happy Coding!! :)
Still struggling with alignment of elements and making component responsive. Any hints would be appreciated.
Also, don't think I got the srcset working right so if anyone has insight that would be good.
Thanks!
Hi, hope you are doing good. I checked out your work and I will say very good work and keep trying but I would like to point out a few of your issues:
In your CSS body, you are doing it the wrong way. You should remove display: grid and the rest of the grid properties. I would like you to try display: flex as it will make your life much more easier in aligning the content in the center of the page.
Also remove card-container class from the body element and wrap your contents from image-box till main-stats in it.
Instead of figure tag you should use picture tag for the hero image inside the card-container
Cheers! Happy Coding!! :)
so all in all seemed was fairly simple project. i'm not sure what i was supposed to do with the desktop and mobile pages. i just did the desktop page. i think a few ways that i fixed text into position was a bit long winded but for my first attempt i'm pretty happy.
Hey, nice work you have done on this challenge. The problem is that QRcomponent isn't aligned in the center. I would suggest you added the following style to your body in CSS which will fix that issue.
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
Also try working on your fonts, e.g: weight, size, family.
Hi, good work. I would like you to give you a few suggestions:
flex to align and adjust the content on your body, which will make your life much more simpler.margin from .BoxTitle and add align-items:center; in your body, which will center your .BoxTitle on cross-axis..centerTextPurple you only need margin-bottom: 2rem;, remove the left and right margins..BoxTitle, change font-size: to 4rem;Also try working on the width of theinput in the form.
Happy Coding! Take care.