Sean Gray
@seangray-devAll comments
- @AdrianoEscarabote#next#redux#styled-components#typescript#axios@seangray-dev
Nice work bro! I'm currently working on this one myself with Vite.
I love the hover effects you added as well as the loading page that was a nice touch 👏
Some small details I think could help to look into some layout issues when adjusting screen sizes for example one was on the homepage zx-9 speaker.
Otherwise I really enjoyed this, good work!
Marked as helpful - @hanzala-bhutto@seangray-dev
Hey Hanzala,
Similarly to a previous comment. Here is some of my CSS for this challenge:
- Setting the parent element to position relative:
.card-top { border-radius: 15px; overflow: hidden; position: relative; } .card-top img { width: 100%; display: block; }
- And then the overlay image to take up the entire space of it's parent element while hiding it:
.img-overlay { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: hsla(178, 100%, 50%, 0.3); display: none; } .img-overlay img { position: absolute; width: 50px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
- And then to show it upon hovering:
.card-top:hover .img-overlay { display: block; }
Hopefully this helps. Keep it up! 😁
Marked as helpful - @Batikann@seangray-dev
Hey Emir, a fellow TailWind user! Nice job on completing this challenge! I have a couple suggestions for you:
- It is often best practice not to inject HTML using JS. This is because this method can cause security, accessibility, maintenance and performance issues.
- Instead you can use JS to dynamically update the contents of existing HTML.
- You can rely on your CSS to do as much as you can for you first and whatever you can't you can rely on JS.
Here is the JS code I wrote for my solution to this challenge for reference:
const toggle = document.getElementById('toggle'); const package = document.getElementById('package'); toggle.addEventListener('change', on => { package.classList.toggle('show-monthly'); });
As for your cards increasing in size after you toggle...It seems you didn't set the appropriate utility classes using TailWind. I believe you can use
max-w-[value]
to achieve what you are looking for. Instead you are usingmax-[value]
on the cards.Hope this helps! Keep up the work! 😁
Marked as helpful - @JaryCruz@seangray-dev
Hey Jary, nice job on completing this challenge! I have a couple suggestions for you:
- It is often best practice not to inject HTML using JS. This is because this method can cause security, accessibility, maintenance and performance issues.
- Instead you can use JS to dynamically update the contents of existing HTML.
- You can rely on your CSS to do as much as you can for you first and whatever you can't you can rely on JS.
Here is the JS code I wrote for my solution to this challenge for reference:
const toggle = document.getElementById('toggle'); const package = document.getElementById('package'); toggle.addEventListener('change', on => { package.classList.toggle('show-monthly'); });
Hope this helps! Keep up the work! 😁
Marked as helpful - @delacruzralph@seangray-dev
Hey Ralph! Nice job on this.
Here are some tips for your question:
The em unit em are relative to their parent’s font size When used on anything else other than font-size it’s relative to the font-size of it’s own element font-sizes is an inherited property, so if you don’t declare it anywhere, it’s getting it from the body (or the default which is normally 16px) The problem with em: when we use em for font-size of an element, it can create a cascading effect.
The rem unit The rem unit is short for Root Em That means it’s always relative to the ‘root’ of our document The root of an HTML page is always the HTML element
How to decide which unit to use?
Pixels used to cause a lot of problems, as they were a fixed unit (1 dot on the screen) Now it follows the reference pixel.
General rule of thumb (not hard and fast rules) :
- Font-size = rem
- Padding and Margin = em
- Widths = em or percentage
Hopefully you find this helpful! Happy coding, keep it up 😁
Marked as helpful - @mrkhd-webDev@seangray-dev
Hey Markhadi! Nice job on this, I recently completed this one too!
I have a couple suggestions that could help with this challenge. I try to think of the bigger picture, what would this component belong to? In this case a larger site that would have multiple of these components. Some of the elements in this design that would be interactive would be:
- the author of the article if we wanted to see more articles by this author.
- the article title as it would probably link to the full read of what it belongs to
I would wrap the article title's h1 element with:
<a href="#"><h1>Article Title</h1></a>
The same would apply to the author of the article. Maybe check out my solution for some ideas.
Hope this helps! Keep it up and happy coding 😁
Marked as helpful - @CYCHAN00@seangray-dev
Hey CY Chan! Nice job on this, I recently completed this one too!
I have a couple suggestions that could help with this challenge. It's hard to see what parts of this design is interactive. I try to think of the bigger picture, what would this component belong to? In this case a larger site that would have multiple of these components. Some of the elements in this design that would be interactive would be:
- the author of the article if we wanted to see more articles by this author.
- the article title as it would probably link to the full read of what it belongs to the share button
- I would wrap the article title's h1 element with:
<a href="#"><h1>Article Title</h1></a>
and the same would apply to the author of the article. I would also add hover and focus effects to make it obvious to the user that it's clickable and that we can interact with it. For that we could do something like this and add a transition as well:
a { transition: all .3s ease; } a:hover, a:focus { cursor: pointer; color: (add new color that matches design or see specs); }
Maybe check out my solution for some ideas.
Hope this helps! Keep it up and happy coding 😁
- @jbingham223@seangray-dev
Hey Jason! 😁
Nice job on the project it looks good! One suggestion with writing your CSS and HTML is to use classes instead of ID's. You can check out this to learn a little bit more about the two and when to use one over the other:
https://css-tricks.com/the-difference-between-id-and-class/
Your site is live on github pages so you did it correctly. In terms of best practices many believe using the command line for git and github as most companies will require that you do and is a fundamental skill as a developer. I found this video that may be useful to you:
https://www.youtube.com/watch?v=qMck70tLDuo
Also one last thing you can check out is the article Matt Studdert (creator of FME) wrote about how to get the most of this platform!:
https://medium.com/frontend-mentor/how-to-get-the-most-out-of-frontend-mentor-bdd6fdc25cb8
Hope you found this useful! Happy coding 🫡
Marked as helpful - @Novadior1k@seangray-dev
Hey novadior1k,
Nice job other than missing that image haha! You could do so by simply adding the element into your element and link to it within your files.
<img src="./"></img>
Hope this helps! Happy coding 👍😁
Marked as helpful - @siddharth-1407@seangray-dev
Hey Siddharth! Nice job on this, I recently completed this one too!
I have a couple suggestions that could help with this challenge. It's hard to see what parts of this design is interactive. I try to think of the bigger picture, what would this component belong to? In this case a larger site that would have multiple of these components. Some of the elements in this design that would be interactive would be:
- the author of the article if we wanted to see more articles by this author.
- the article title as it would probably link to the full read of what it belongs to
- the share button
I would wrap the article title's h1 element with:
<a href="#"><h1>Article Title</h1></a>
and the same would apply to the author of the article. I would also add hover and focus effects to make it obvious to the user that it's clickable and that we can interact with it. For that we could do something like this and add a transition as well:
a { transition: all .3s ease; } a:hover, a:focus { cursor: pointer; color: (add new color that matches design or see specs); }
Maybe check out my solution for some ideas.
Hope this helps! Keep it up and happy coding 😁
Marked as helpful - @Cristhyam-Augusto@seangray-dev
Hey Cristhyam,
I like your solution, the design is looking pretty good! I have a suggestion to improve this challenge though:
A better way to build this challenge is to create a Form and inside of it, the “rating buttons” should be built using an Input Radio and it should have a Label Element attached to it for accessibility. Since you used an ordered list, I was able to select multiple ratings to submit.
Hope you found this useful! Happy coding! 😁
Marked as helpful - @RSmith484@seangray-dev
Hey Renee, I came up with a solution for your question. You could add this to each of your columns:
column-1, column-2, column-3 { display: flex; flex-direction: column; justify-content: space-between; }
You could also add a helper class to each of the divs instead of having to repeat yourself.
Hope this helps! Keep it up! 👍😁
- @syybiekarim@seangray-dev
Hey there, nice job on this challenge. I got a couple suggestions that may help 😁.
- To answer your first question you could try something like this on your profile pic:
#profile-pic { border: 5px solid white; }
- You can add multiple background images by separating them with a comma, and same with the positioning.
body { background-image: url(...), url(...); background-position: top left, bottom right; }
-
By default heading elements come with a default margin property to them. I personally reset a lot of my CSS, which you can check this here to avoid this issue in the future: https://gist.github.com/Asjas/4b0736108d56197fce0ec9068145b421
-
Instead of using the hr tag you could use a border top or bottom to one of the other elements.
section#second-section { border-top: 1px solid hsl(0, 0%, 59%); }
Hope this helps! Keep it up and good luck 😁
Marked as helpful - @rachelktyjohnson@seangray-dev
Hey Rachel,
I like the solution to your design! The only thing I would suggest is to make the "Sign-Up" button more obvious that it's clickable and that its an interactive element by adding pseudo element selectors when hovering or focused on it. The button should also redirect users somewhere so we could use a
<a class= "btn-sign-up" href="#">Sign-Up</a>
instead by also giving it a class for us to select it. Here is some code you could also add:.btn-sign-up { cursor: pointer; transition: all .3s ease; } .btn-sign-up:hover, .btn-sign-up:focus { background-color: white; color: hsl(71deg, 73%, 54%); } Hope this helps! Keep it up 😁
- @Ammar0Yasser@seangray-dev
Looks good! One small suggestion is to increase the line-height on your paragraph text. It can be difficult to read if the text is too bunched up together, and can cause eye strain. To give it some more breathing room you can try something like this:
line-height: 1.5;
I hope this helps! Keep it up! 😁😁
Marked as helpful - @alanacapcreates@seangray-dev
Hey Alana!
Looks good! 👍 One thing you may not have noticed is your background image does not cover the entire screen at larger screen sizes. To fix this you can simply change the background size from contain to cover:
background-size: cover;
To try and fix the spacing on your grid layout I did a couple things:
main { max-width: 1200px; margin: 0 auto; }
By default grid containers will utilize the maximum space provided, so by applying a max-width we are saying this grid container cannot exceed the set value you applied. And then using
margin: 0 auto
to center the grid again. Thus decreasing the spacing you had between the two columns.Hope this helps!
- @mohrajul-rupom@seangray-dev
Hey Rupom! Looks great, only thing missing from this is to vertically center that box. An easy fix for this on this challenge you could add this to your body element
body { min-height: 100vh; }
Also add a cursor pointer & hover + focus transition effect on the 'Learn More' buttons. You could do this:
button { cursor: pointer; transition: all .3s ease; }
Hope this helps, keep it up!
- @Toxgem@seangray-dev
Hey Marcos! Looks pretty good
A better way to build this is to create a Form element and inside of it, the “rating buttons”would be built using Radio Input elements with Label Elements attached to it.
After submitting the illustration margin collapses with your rating div. You could try this instead:
.thanks { display: flex; flex-direction: column; }
Hope this helps! Keep it up
Marked as helpful