@aymanelaminSubmitted 9 months ago
welcome to all feedbacks
Yokke
@JexinteAll comments
- @JexintePosted 9 months ago
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 - @AttramsSubmitted about 2 years ago
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.
@JexintePosted about 2 years agoHello @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 helpful0 - @gonerengSubmitted over 2 years ago
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
@JexintePosted over 2 years agoHey @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 - @marijahavaicSubmitted over 2 years ago
- 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?
@JexintePosted over 2 years agoHello @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 helpful0 - @maaghiaSubmitted over 2 years ago
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
@JexintePosted over 2 years agoHey @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 - @ov3rstSubmitted over 2 years ago
this is my version, any suggestion is welcome
@JexintePosted over 2 years agoHey @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 helpful1 - @Soto-JSubmitted over 2 years ago
- Had difficulties positioning the error image in the form.
any feedback would be appreciated :)
@JexintePosted over 2 years agoHey @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 - @jamesablancoSubmitted over 2 years ago
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
@JexintePosted over 2 years agoHey @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 helpful1 - @lucianbeckSubmitted over 2 years ago
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
@JexintePosted over 2 years agoHello , I let you know what the e.prevendefault() method is !
0 - @VANIMEHTASubmitted over 2 years ago
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:/.
@JexintePosted over 2 years agoHello ,
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 helpful0 - @ShayinurSubmitted over 2 years ago
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!
@JexintePosted over 2 years agoHey @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 - @SoltysnowickiSubmitted over 2 years ago
Hi! Another simple challenge completed using mobile first workflow. Please let me know what you think!
Cheers!
@JexintePosted over 2 years agoHey @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
