aymanelamin• 240
@aymanelamin
Submitted
welcome to all feedbacks
Yokke
@Jexinte
All comments
- Yokke• 640
@Jexinte
Posted
Hello @aymanelamin,
It's a good idea to do a left container for the text part and you should done the same for the banner on the right allowing you to use the display flex on the body and do crazy things : Flexbox
For the images as they are inline elements you should put them on a div apart the main one for the left container. For example you have an <img> tag with the id"logo" put it in a div. Or you have another the solution but I can't say if it's good to do it I hope someone that have more experienced will answer to it is to change the display from inline to block then you won't have to put it on a div.
The banner is not responsive from tablet size to desktop.
They're is some other things but I'm not well experienced to comment it.
Other than that it's a good job.
PS: I think that for the img tag you can even use the align-self property when flexbox is use to do good things with it.
1 - Attrams• 130
@Attrams
Submitted
Hey guys, this is my solution for this challenge. I had a problem reducing the space between the name and status in the cards, is there anyway to do that? Thank You.
Yokke• 640@Jexinte
Posted
Hello @Attrams ,
Good job !
To reduce the space between the name and status you can use the gap property , more details here :
https://developer.mozilla.org/en-US/docs/Web/CSS/gap
In hope it helps !
Marked as helpful
0 - Roland• 30
@gonereng
Submitted
I had some issues with the sizing in the beginning, tryed to keep the width and height fluid but in the end I just used fixed values
Yokke• 640@Jexinte
Posted
Hey @gonereng ,
Good job.
Sometimes you need to specifie a fix height and width towards the design. Imagine not using fix values ? Your work is gonna strech again and again and it's not great especially on desktop.
I think you've done a good appreciation of it and if sometimes you need more questions about how approach the design just ask ! We don't have all answers so it's good .
Keep it up !
0 - Marija Havaic• 150
@marijahavaic
Submitted
- How do you name your classes and is there any naming convention I could follow?
- Is it better to have a descendant combinator (body p) or class (.text) for styling?
Yokke• 640@Jexinte
Posted
Hello @marijahavaic ,
There is convention use with SASS Pre-processor called BEM , more details here :
https://en.bem.info/methodology/
In hope it helps !
Marked as helpful
0 - Maria• 130
@maaghia
Submitted
I am gonna need some help to style the range input, I would be glad to receive any help so that I can complete the challenge
Yokke• 640@Jexinte
Posted
Hey @maaghia,
To do style the progress bar you can set a parent div which contains ::after pseudo elements it's very useful to style those kind of things.
The parent div will be set on relative position and ::after on absolute position then you can style it like the design.
The white circle is very easy to do I'll let you think about it you've done a good job I'm sure you will find the solution for it .
More details here :
:: AFTER https://developer.mozilla.org/en-US/docs/Web/CSS/::after
POSITION ABSOLUTE , RELATIVE https://developer.mozilla.org/en-US/docs/Web/CSS/position
In hope it helps !
1 - POliver Tejeda• 350
@ov3rst
Submitted
this is my version, any suggestion is welcome
Yokke• 640@Jexinte
Posted
Hey @ov3rst,
Good job .
A tips that someone give me few weeks before you can use native html tag call <details> and <summary> that give you the naturel effect that the challenge ask. Then on css you can use his selectors to do what you need when a question is open.
More details here :
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
In hope it helps !
Marked as helpful
1 - John Soto• 130
@Soto-J
Submitted
- Had difficulties positioning the error image in the form.
any feedback would be appreciated :)
Yokke• 640@Jexinte
Posted
Hey @Soto-J ,
You can easily place your error image by giving a relative position to your input and absolute position to your image then whenever the size of the screen is the img won't move from the position that you've set.
I think that for your media queries when the screen is near ~992px you can switch to mobile version especially in your case when your form doesn't have enough space around ~850px.
Besides that good job !
In hope it helps !
1 - James Blanco• 10
@jamesablanco
Submitted
I have questions on what I could have done to improve my design and also how to align the entire cards in the center correctly and possibly mobile?
Thanks! James
Yokke• 640@Jexinte
Posted
Hey @jamesablanco ,
When you need to center on mobile towards the design use display flex on your container with flex-direction and align-items : center property Yours cards are too close add some space with the gap property , more details on those property here : https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Flexbox https://developer.mozilla.org/fr/docs/Web/CSS/gap
In hope it helps !
Marked as helpful
1 - Lucian• 10
@lucianbeck
Submitted
I would like to add an alert to be shown instead of the "thank you" div, when the Submit button is clicked without selecting any rate number. I tried to do it adding "if" conditions to the click event listener, but wasn't able to make it work so I would really appreciate some assistance with that
Yokke• 640@Jexinte
Posted
Hello , I let you know what the e.prevendefault() method is !
0 - Vani• 160
@VANIMEHTA
Submitted
1)How do i merge the two images ie the box image and person image as shoen in the design file. 2)Im still struggling with java script so somebody pls help with the script code its not working:/.
Yokke• 640@Jexinte
Posted
Hello ,
Above all organize your files in separate folder it's more meaningful when we need to find something specific ( When I download your code I had to rewrite almost all img files path )
There is a more simple way to do what is ask on the challenge by using <details> and <summary> tag that have the effect that you need to toggle a question and her answer without js ! ( Javascript is not a requirement to use I learn that by asking on the website slack)
More informations here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
Then on css you can specify what to do when a question is open by targeting the "open" attribute more details to here :
https://css-tricks.com/put-a-background-on-open-details-elements/
I'm just saying that but I think that If you are stuck on your code try to not check the code of others now just say where you're stuck and I think you'll get a better understanding and better answer on why it's not working ( This is how some people learned me ) .
I forgot in your js code you're trying to show all answer with the [i] index but you haven't loop through them so they are gonna be always undefined ! You could know that just by using a console.log(ans[i]) !
In hope it helps !
Marked as helpful
0 - Shay• 20
@Shayinur
Submitted
Thank you for reviewing my first project here at FrontEndMentor! To let the QR code box be positioned in the middle, in the media queries section, I manually typed https://github.com/Shayinur/QR_Code_Component to position it in the center. I wonder if there is a better way to do it? Thanks for your help!
Yokke• 640@Jexinte
Posted
Hey @Shayinur,
Good job ,
People can't see your work because in your html file you haven't add a dot and slash to your css path files that why your css file doesn't work on live site just before your styles folder.
When you need to center an element like a div in your case you can used flexbox like you've done on your qr_code div then using the property justify-content : center , use align-items : center with min-height : 100vh to have your element center horizontaly and vertically.
It's very useful thing that someone learned me on one of my previous challenge.
You can learn more efficiently flexbox with this game if you liked this kind of learning :
https://flexboxfroggy.com/
Or you can check this sir it's seems that he is a kind of master in css so he can help you a lot on Youtube for flexbox , grid and more :
https://www.youtube.com/kepowob
In hope it helps !
0 - Soltys• 160
@Soltysnowicki
Submitted
Hi! Another simple challenge completed using mobile first workflow. Please let me know what you think!
Cheers!
Yokke• 640@Jexinte
Posted
Hey @Soltysnowicki ,
Good job .
It seems that on desktop your image is not correctly align when I open the live site I thought it was because my screen is too wide but even lower until 800 the image is going under the email input.
In hope it helps !
0 - Rudolf Luayon• 210
@dumpdope1
Submitted
PLEASES HELP!
My struggles: Can't rotate the SVG up when it click I don't what's the main reason why I can't rotate it. I'm not really good in design Loooongs code for a simple click button I don't know how to shorten it OMG
Your comments & suggestion are all welcome.
Yokke• 640@Jexinte
Posted
Hey @dumpdope1 ,
I looked your code and I'm just gonna give you a recommandation that someone else gived me there is a native tags on html that give the toggle state when a question is open and their names are <details> and <summary> more details here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
I'm not gonna tell you what to do on the JS part I struggle too ( I've done the challenge twice with better result on the last try) I'm sure someone is gonna help you about that.
And when you need to make rotate an svg when a question is toggle with <details> use the attribute : [open] to do what you need on css you'll find more details too just by doing research on google .
I know it's little hard at the beginning but don't hesitate to restart the challenge again the time passed to done it is not important as long you finished what you start (at least this is what I'm thinking)
In hope it helps !
0 - Yokke• 640
@Jexinte
Submitted
Hello all ,
Could I get some feedback especially on two things :
- When I click the first time on the share button my div don't show up until the next click
- How my lightgrey paragraph could be more close to the design this one give me some headache !
Thanks for reading !
Yokke• 640@Jexinte
Posted
Hello @gerichilli ,
Thanks for your feedback I haven't check it now I'll do it later !
0 - Alieu• 190
@alieuk61
Submitted
I didn't know how to make the image in the card smaller, I was also struggling to move the card to the centre of the screen.
Yokke• 640@Jexinte
Posted
Hey @alieuk61,
We can't see what you've done your forget to add your css folder and on your css path you have to add : ./css.
In hope it helps !
Marked as helpful
1 - Jonathan Manzano• 420
@JonathanManzanoDiaz
Submitted
Why the image is not showing on the web, but yes on the live server?
Yokke• 640@Jexinte
Posted
Hello @JonathanManzanoDiaz ,
You're image doesn't work on live site because of your css file path it's very simple just add a point and slash before css and it will fix it.
More details when you have to set the path of your files :
https://www.w3schools.com/html/html_filepaths.asp
In hope it helps !
Marked as helpful
1 - Terka Codes• 40
@terka-codes
Submitted
I found it challenging to position the element in the center. I tried using flexbox, and after many failed attempts, I realized I had to set the component's height, so I put it to 100vh. 🙈 Then it all started working.
I was also a bit confused about the box-shadow color because I tried all the colors provided, and none seemed right. So I chose my color. I hope that's ok. 👩💻
Also, since this is my first challenge, I wasn't sure how it works. I was a bit confused that there weren't any measurements. But then I realized it's probably included in the PRO version. Isn't it? It seemed hard at first to guess the size of the boxes and fonts, but I think I made it work in the end.
Yokke• 640@Jexinte
Posted
Hello @terka-codes,
Good job.
When you need to measure the size of content you can use a ruler extension or if you don't know go on Figma it's very useful for those kind of things.
Marked as helpful
0 - Morten Rasmussen• 20
@Morten010
Submitted
What did you find difficult while building the project? i found it difficult to make the eye over the image be seen a 100% while having the background at 50%
Yokke• 640@Jexinte
Posted
Hey @Morten010 ,
Good job !
As you mentionned the difficult part on this challenge is the background effect with the icon.
I failed to done it ( I tried to the challenge in one hour ) and tried again but wasn't able to do it I guess some time it's better to take retreat , learn efficiently and go back with better weapons x)
Marked as helpful
1 - Gideon Chidi• 390
@gideon-del
Submitted
Hi guys,
Just finished the order summary project. It was a really fun and nice experience. Please check my solution and code. Am open to any advice in which i can improve.
Yokke• 640@Jexinte
Posted
Hello @gideon-del,
Good job on your solution.
So as you ask here some things that you can adjust :
-
It's seems that the background color on the rectangle with the music logo is not the same that one that you use . The background color on the middle rectangle is supposed to stand out less than the logo color.
-
The height of the same rectangle is little short compare to the design you can readjust it
-
Add some space between the "Annual Plan etc..." paragraph and the "change" link.
-
To avoid the repeating of your background you can use the property background-repeat : no-repeat then it's gonna be more closer that what expected on the design, more details here : https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
As I said upper you've done a great job what I've notice is just little things ( but as you could imagine fix little things earlier can be very helpful when you're gonna reach bigger project)
In hope it helps !
Marked as helpful
1 -
- Vernacci• 70
@Vernacci
Submitted
Not sure how can i activate one button at a time. Would really appreciate feedback about code readability and best practices.
Yokke• 640@Jexinte
Posted
Hello @Vernacci,
Good job on this one.
When you need to just allow the selection of one button you can use the :focus property it's very useful especially in this challenge.
Then in js when you have checked which button have been selected you just call the property :focus with the class that you named it.
More details here : https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
In hope it helps !
Marked as helpful
1 - Ranjana Mukhia• 150
@ranjanamukhia
Submitted
I have revisited this Challenge. And updated my previous solution...May I please get feedback :- 1.Can I improve my html or CSS in any regards? 2.is the responsiveness improved? 3.any suggestion related to best practice is most welcomed.
Yokke• 640@Jexinte
Posted
Hello @ranjanamukhia,
You've done a good on this one.
The only thing that I could suggest you is :
-
Adding a width with px or em to your paragraph allowing you to be more close to the design for "Annual Plan"
-
Reduce the gap between "Annual Plan" and the price
-
Reduce the size of the music logo
In hope it helps !
Marked as helpful
0 -
- EDllT• 60
@EDLLT
Submitted
I found it hard to make the size of the DIV consistent across different screens....
Yokke• 640@Jexinte
Posted
Hey @EDLLT,
When you need to set many sizes for your content you can use media queries to specifies them for tablet , mobile and desktop.
You can get more details here :
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
In hope it helps !
0
