hello well done on finishing this project, bravo
but some ui discrepancies are visible!!
backgrounds position is shifting based on “window size”, maybe its something you might want to look at
radio buttons, checkboxes are also loosing its positions in similar situations
same is happening for submit button element
happy coding
@bappyasif, thank you soooooo much for your feedback! I really and truly appreciate it!!!
I’m so glad that you’ve pointed out about the position shifting cause I had no idea why it wasn’t responding well to different devices. You really saved me lots of work figuring it out so I cant thank you enough, I literally have no words
. I tried fixing it but I’m not quite sure how to go about it if anyone can point me in the right direction I’d very much appreciate it.(I already changed the width from pixel to percentage but that didn’t go over very well so I’m kinda confused).Again thank you so much for your help, your answer really helped me a lot.
A few suggestions.
On the first, second, third, and fourth div
s, use auto
side margins to center them and then set a max-width
(perhaps something like 35rem
) to keep them from getting too wide. This is a very common technique for centering block level elements.
Don’t set the width
in px
on your inputs. Perhaps use percentages instead. That way they will adjust as you narrow the view port.
you keep using
margin-left: 0
margin-right: 0
that basically means the same as
margin: 0 auto;
so use that instead.
Also, in css it’s enough to have only one 0.
this means that margin: 0 would cover top left bottom and right!
and also, if you see that you’re using something over and over, rather wrap everything in one div, give it a container class and use that property just once.
In upper left corner name your pen, so it doesnt remain untitled.
also it seems you have a font issue.
font-family:cursive
nope. cursive is definitely not font family.
but also doesnt seem like normal one is set.
Thanks for your feedback I really appreciate it.
also which font is being used if cursive doesn’t exist?
cursive is not a font.
it’s something like a set of fonts, like species of fonts if you’d like - in biological terminology.
I’d encourage you to add font only once and to the body - nowhere else.
Everywhere else - just delete it.
Do more with less!
whole web page should have really no more than 2-3 fonts max - one for titles, to be distinguishable from rest of text, and other, normal.
here , I entered my favorite web font Playfair Display in head
@import url(https://fonts.bunny.net/css?family=Playfair+Display:400);
and just called it in body , with font-family
you can pick whatever other font you like and try doing similar.
I tried setting the font in the body but whatever family I set it to it isn’t making a difference and it’s still staying the same:
Thanxs!
but that’s probably because you didnt include any link from any online font, on google fonts or on bunny fonts. doesnt matter where from. it’s important to have link.
Hi there, I want to say well done on finishing your project , just a small suggestion to improve the accessibilty of your form : make sure that the for attributes on your labels and the ids on their respective inputs have the same value so that when a user clicks a label the browser will automatically direct him to the respective input.
<label for="first-name" class="label" id="name-label">Enter Your First Name: <input class="input" placeholder="First Name:" id="first-name" name="first-name" type="text" required /></label>
improve email validation by adding a pattern attribute so that the user enters at least an email with @ in it
pattern="/@/"
Thanks for the help .
if I download a font from google fonts how do I use it as a link?
Thank you so much. I missed that…
gonna fix that now.
there was a task which was part of freecodecamp learning that taught how to get web fonts from google, and use them.
I found it. Thank you so much!!!
Thank you everyone for your feedback . I’m working on fixing up my code and I’m stuck with two things. First @diomed , if I set margin to 0,auto will it affect my left/right margin and also how do I give something a container class?(Sorry for my slowness, I’ve allready spent forever trying to correct my code but I keep getting stuck
).Second I keep switching fonts because I want something anime style but then the text spreads out and keeps moving to the next line in a smaller screen size so does that matter or should I stick to a regular font? Any suggestions on a anime font which might look good will be very much appreciated cause I’m desperately struggling with that issue.
which looks better:
or:
Also how do I fix this issue?
thank you all so much
you’ve already given so much classes to so much element, adding container class shouldnt be a problem.
if you set margin: 0 will it affect your left - right margin?
- dont ask me that but test it and see what happens.
here’s how people code if they are unsure
- they put existing code in comment [so they comment out that code]
- they write new code. - if it’s good, existing code can be deleted.
if it’s bad, you always have something to go back to.
Anything looks better than comic sans, which should be used in web design ONLY when making web pages with content for kids.
You have CSS window.
This is CSS
@import url('https://fonts.cdnfonts.com/css/manga-temple');
unsure why you’re putting that in style tags in html, when you can put it as first line in CSS window
Chuckle yeah… I got your point and switched my font to something else. I’m still not thrilled with it but its impossible to choose a font style with so many options available(I allready switched like 100 times). Thank you for your advice, the bottom/top margins actually did change when I did the 0,auto change so I left it at that. I’m kinda fed up with this project allready so I’m gonna leave it as its now and maybe get back to it at a later date. This is the edited version: