I wasn't sure about the mobile design... The style guide says mobile design is made with 375px width, but the provided design photo is 750x1600px so I used that height and width for the mobile view and got it as close as possible. If this was wrong, let me know, so I can go back and fix it. As always, any other feedback is welcome too. This was the last challenge using just html and css, and I look forward to implementing javascript and attempting those challenges.
Edit: corrected the mobile view with 375px screen width.
The mobile design provided to you is a static jpeg you cannot go by the measurements of that. You should always go by the measurements in the spec. There arent any phones 750px wide, not any popular ones anyway. Your desktop one looks nearly the exact same as the screenshot well done
Hey great job, if this is your first challenge then your doing so well by the looks of things! I would like to give you a bit of feedback after looking at your code. First thing I would say is when importing fonts from google, dont use @import in your css instead use the <link and put it in your html, importing things in css can slow things down. Apart from that youve done an amazing job well done. If you want go check out other peoples code and how they did it.
Hi guys, I managed to do this challenge but had a bit of trouble setting up the two background svg images. I initially tried to set the background with css but with poor results, I still left the commented code inside if you want to have a look so you can explain to me where I am going wrong.
I need advice to learn how to make my code more responsive. I think this is becoming more and more important. For this reason I need all your advice!
I also accept advice on position: relative; or position: absolute;
Hey man, Im gunna do my best to answer some of your questions but your going to have to clear up a few things as I am a bit unsure what you are asking... first I will talk about the background images... Ive had a little browse over your code and from what I remember I didnt use "position" atall when I did this challenege, tbh tho the svgs arent my strong point so thats the most I can tell you on that, I can definately give you advice on responsiveness and the benefits of absolute and relative so... first on responsiveness, try using media queries along with things like calc() and clamp() and minmax() when sizing things, I wont explain what these do here but you can look into that for yourself, I always use measurements for height and width in vw and vh for responsivenss as this means your items resize with the view port, lastly I would like to let you know that after looking at your code what I can tell you about position absolute and position relative is that you are using them way toooo much, not everything needs its "position" defined, you should only really be using these properties for either things that go against the natural flow of your page or when you need to z-index something as z-index only works when position is defined. Most projects I dont definine position on anything unless I need something bought to the front or like I said I want to z-index it. Realtive means the item is positioned based on its relative so keep that in mind. What I would reccomend as this is how I learnt to be good with backgrounds is on VSCODE type in background: and look at the emmet drop down menu that appears reccomending all the background properties, then just go through them and play around so you can understand what they do. Also rather than putting the background images in seperate containers and positioning those, try just adding them as the background image for the body, much easier imo, also just go look at other peoples code and see how they did it. Sorry this is a lot to read, but hopefully somewhere in this jumbled mess of a message you can find some value :)
Hey I took a quick look over your CSS and I see you have defined some elements as a flex container but then you have not used the "justify-content" property (for the main axis depending on your flex direction) and align-items (for your cross axis) keep in mind these properties only work if there is enough space for them to move, this is a lot better way of centering an element
So this is literally the first time I have ever used javascript, I managed to get a few things working but the issue I am having is when I click on one of the ratings its always the number 1 that turns orange, I also have no idea how to get the message to tell you how many stars you have selected, if anybody can help me I would be extremely greatful I have been watching youtube videos for hours, tried debugging with the devtools and read loads of articles online and I cant find the answer.
Update
I have now tried giving each number a unique id but it still does not work and making sure the variable names are not the same as the ids just incase this is confusing but now when I click on any number the 5 is orange instead of the one. also when the pop up comes on it is not in the same place as the card was, someone please help
Update
The click function is working now thanks to making all the functions seperate names, the pop up still comes up in a different place to the card depending on the screen size tho and I still cant get the message to tell you how many stars you gave
thankyou I have now fixed my problem, I still cannot get the message on the pop up to tell you how many stars you have selected though and the pop up is still coming up in a different place to where the card was depending on the screen size
Had a really good time with this one guys and I am so happy with how it has turned out, as far as I am aware there are no problems but any feedback is welcome. I still havent learnt how to make it accessible for mobile but that module is coming up soon in the course I am taking, they said not to worry about it for now.
I'm a newbie to front-end dev.
For this challenge, my main question is about how to vertically center the card ?
Is my way doing that efficient enough ?
Hi I took a quick look at your style sheet, you should center the card by using flexbox... make the element that the card is in a flex container by putting display:flex; on it then all its children become flex items, then you can use justify-content:center; to center it on the main axis and align-items:center; to center it on the cross axis, I hope this helps
Okay so I have a few issues, first is I cannot for the life of me work out how to change the color of the image, secondly I cannot work out why when i shrink the page it squashes up rather than all shrink evenly like in the example, someone please help!
The first part about the picture tag is great advice thankyou I will do that now but the advice about the image color doesnt work, what you said makes it the same color as the background whereas I want it the same color as the word "insight"
Hey I am a beginner so take my advice with a pinch of salt but you haven't included the fonts, if you go to the readme for the styles it will show you how to get the fonts in google fonts and link them into your html and css, great work though, I see you have the same issue as me, the screenshot they use to compare your image to the example is squashed, this must be a bug they have. Great job man
This is the first thing I have ever built without following a tutorial, it is just basic html and css but I am happy to know I can do this with no help.
For some reason when this site shows a screenshot of my solution to compare with the design it isnt the same as if you go to my site online, this is better than my first attempt
