@vinitk201104
I'm trying to better my career through learning front-end development by utilizing online resources and by building projects. I am available to help out with projects, just reach out!
I’m currently learning...HTML, CSS, Vanilla JS, and hopefully react.js in the near future.
Latest solutions
Responsive 3-column preview using vanilla HTML5/CSS3
Submitted 2 months agoI'm trying to figure out better breakpoints for the media queries and not having to repeat styling tags.
Responsive, mobile-first ping coming soon
Submitted 8 months agoAny glaring issues that I can fix would be greatly appreciated!
Latest comments
- @Jbugglin
Firstly, great job, this looks awesome!
Some things to consider moving forward; try to use semantic HTML, and remember to include an alt attribute in your image tags. For projects further along your journey, consider using em/rem units to help with responsivity.
Resources: https://www.w3schools.com/html/html5_semantic_elements.asp https://www.w3schools.com/TAGS/att_img_alt.asp https://www.freecodecamp.org/news/css-units-when-to-use-each-one/
Marked as helpful - @RahmaBahaa@Jbugglin
Hey, this is a great start!
Just going off of the screenshots, be sure to use the correct background color on the body that was given in the style guide.
It looks like there was some difficulty centering the main card to the screen, as the previous comment stated, you can use grid, there's an alternative called flexbox. To use it, you will have to specify a width and height on the parent element/container, it should look like:
body { height: 100dvh; width: 100dvw; display: flex; justify-content: center; align-items: center; }Here's a resource to help learn about flexbox more: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Be careful of which units to use, possible screen size problems may occur if not taking into account for the address bar and buttons at top and bottom of the screen on most mobile devices. https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4
Another thing to try out or be aware of, try to utilize using the :root pseudo-class for variables (such as colors for headings, text, etc.). Using :root makes having to alter those colors a bit easier once you get into larger projects.
Some reading on the :root pseudo-class: https://developer.mozilla.org/en-US/docs/Web/CSS/:root
Also, play around with more responsive units for your text instead of sticking with pixels. https://www.w3schools.com/cssref/css_units.php
Lastly, try to use semantic HTML, I noticed that you had a <div id="container">, where you can use <main id="container"> and avoid a html/accessibility report error. Same issue with the <div class="sections">, you can just utilize <section>.
A bit more reading: https://www.w3schools.com/html/html5_semantic_elements.asp
Overall, great work! Keep at it!
Marked as helpful - @KacproshhWhat are you most proud of, and what would you do differently next time?
I'm very proud of myself because finally i did clearly and easy to read code. Next time I'll do better elements in html like <div> and use <id> .
What challenges did you encounter, and how did you overcome them?The hardest part of this challenge definietly was separate links from itself in CSS
What specific areas of your project would you like help with?Definitely a help in using the flexbox
@JbugglinYour submission looks great, a few things to consider: -You might want to utilize semantic html instead of using .div for everything.
Resource: https://www.w3schools.com/html/html5_semantic_elements.asp
-Don't use <p> for elements that should be links, likewise about using p1 through p5 for classes. If you're going to do that, use id instead, classes want to be grouped together whereas id wants to be unique. A better way to have done this would to use an unordered list for the navigation of links, such as <nav>
<ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> </ul> </nav>Resource: https://www.geeksforgeeks.org/difference-between-id-and-class-attributes-in-html/#
-Also, doesn't seem like there is a cursor:pointer; under any of the p1-p5:hover stylings.
-The name, or <h1> looks a bit heavy on the font-weight front.
-The border radius on the main card is too round, where the design appears to be sharper, a decrease of the border-radius value should fix that. The border-radius on the buttons need a more rounded corner so the opposite should get that closer.
Resource: https://www.w3schools.com/cssref/css3_pr_border-radius.php
As for flexbox, you need to set a size for the height and width of the parent element, so that when you try to use display: flex; it will react correctly. For example, to center your main card: body { width: 100dvw; height: 100dvh; display: flex; justify-content: center; (aligns card vertically) align-items: center; (aligns card horizontally) }
Resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You did a great job putting this out there to be reviewed, keep learning and pushing forward!
Marked as helpful - @GunnarOliveira@Jbugglin
Very nice work!
Outside of the obvious height/width issues that the design comparison tool is showing, your submission looks good!
Try to adjust your box shadow on your main card a little bit and try to extend it further down the y-axis and blend it more. The width on your h1 element could be adjusted to bring it down to the designed 2-lines instead of wrapping into the third line.
I also noticed that the border-radius of the main card (or .card-container) is set to 1.5rem, while the .card-banner (img) is set to 0.8rem. While it still looks decent, adjust the .card-container value down some to make that corner appear sharper (probably closer to 1-1.2rem). Then adjust the .card-banner border-radius to half of that value to give a better appearance of a consistent-thickness throughout the corner or 0.5-0.6rem.
To wrap up, you did fantastic, and keep going!
Resource: https://www.uidesign.tips/ui-tips/border-radius-consistency
Marked as helpful - @MrBlueA@Jbugglin
Your main card is both too tall and wide, possibly utilize max-width on that to keep it from upscaling too much or give the card a size to not scale past.
The border-radius on the image should be 1/2 of that of the main card to look more consistent.
Try to add a box-shadow to the main card, and the font weight is making the current text look like it's running together.
Source: https://www.uidesign.tips/ui-tips/border-radius-consistency
Marked as helpful - @hkaur108What specific areas of your project would you like help with?
I have tried fixing semantics,, Please let me know if anything can be done to improve the solution.
@JbugglinThe border-radius on the main card looks to be a bit too sharp, might need to increase that value to get a more rounded corner. I like to take the value for the outer radius on the main card and halve it to get the inner radius for the image. That way the corner looks to be a more consistent thickness throughout.
Source: https://www.uidesign.tips/ui-tips/border-radius-consistency
Your box-shadow is a bit too dark, not blended as much as the design calls for, nor drops as far down. The values you have is 0px 0px 7px 1px $paraColor. If you want to apply a simple box-shadow, remember that the first value is the offset-x, second is offset-y then blur-radius value and color, no need to overcomplicate it.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
As for the h1 and paragraph elements, just adjust the width of the elements to match that of the design.
You did a great job and keep it up!
