@kaiser-sb
@brissboss
Submitted
This is my sixth project for Frontend Mentor, i want improve my skills in css and js.
I have already some base in css and js but i'm not sure that i use the best practices.
If you have any advice or comments on my work, i would be happy to ear !
Thanks.
@kaiser-sb
Posted
Hey Theo,
Great job on completing the project! Your design is very good. Don't worry much about best practices in the beginning - overall your approach is good to me. Just some quick things that I wish to add -
* selector and put something like -* {
margin : 0;
padding : 0;
box-sizing : border-box; /*Removes a lot of sizing issues while working with divs*/
}
README.md specifies -
The email address is not formatted correctly (i.e. a correct email address should have this structure: [email protected]). The message for this error should say "Looks like this is not an email". I think you need to tweak your code a bit to get this. Now you're getting the HTML default message.Great job and happy coding!
Marked as helpful
@GiorgiChiaberashvili
Submitted
Completed Responsive design for Newsletter Sign up with message project
@kaiser-sb
Posted
Hey Giorgi,
Congratulations on completing the project! A few things that I find you may have a look at -
input field normally doesn't associate with pointer cursor, but that's your choice though.Valid email required message is being displayed only when the field is left blank. In case of erroneous email input - the HTML default response is taking over.Great job and happy coding!
Marked as helpful
@tushargola1
Submitted
@kaiser-sb
Posted
Hey Tushar,
Great job on this project! It seems your images are not getting displayed. Just correct the img tag's src route in the component section (also replace the backslashes) and you'll be good to go. Also, you may think of displaying some advice on load as well. Thanks and happy coding!
@Ryoshi1001
Submitted
Hope can be good just added this any extra advice on improving and if worth compliment would be kind thank you take care gn gm frens.
@kaiser-sb
Posted
Hey Ryoshi,
Great job on completing this challenge! Just some minor things which I find you may have a look at -
input field is normally not for a cursor pointer - although it's just your choice.Thanks and happy coding!
Marked as helpful
@PriyankaRC16
Submitted
Hi everyone!
I have a few issues with creating this card component.
The image of the card was not the same height as the text card even though I tried to inspect with the image height and the classes too.
Any other feedback is appreciated!
Thank you
Priyanka
@kaiser-sb
Posted
Hi Priyanka,
Nice job on completing the project! To solve this issue you faced - you can use a wrapping div in which you can create two more divs with 50% width. Also, you don't need to break the paragraph lines and style them individually. Just use one header for the heading, one paragraph for the text, and maybe some span tags wrapped in divs to get the lower part done. If you're using flexbox - all these will be even simpler with minimal styling. Knowing the default nature of different elements will help you to choose on which elements to choose in which situation, e.g. - div, p etc are block elements whereas span is inline element by default.
I saw a fellow coder suggesting the use of ChatGPT. While this can be tempting and acknowledging the fact that this can be super helpful at times when you're really stuck - relying on it for your error correction can at times be frustrating. GPT can be really stupid at times and you need to know the concepts to identify its stupidity. I would suggest googling, referring to articles, going through stackoverflow solutions etc. This really helps to build up concepts. Hope this helps. Happy coding!
Marked as helpful
@rinoraj6
Submitted
aligning background images is hard. Are there any tutorials for aligning these kinds of images?
@kaiser-sb
Posted
Great job on the project! If you're using css flexbox - you can align images using justify-content or align-items - depending on the flex direction. if you're going without flexbox - you can set the parent container position : absolute and the child container as position : relative and the set the top, bottom, left and right alignment. If you're trying to centre a container horizontally, margin-left : auto and margin-right : auto will do your job. Alignment is always hard thing - just learn the concepts and keep experimenting. Hope this helps. Happy coding!
Marked as helpful
@NihalP01
Submitted
Tip:
@kaiser-sb
Posted
Hey, Nice job completing the project! Just a minor thought - being able to view the entire page contents without scrolling (in PC or laptop view) will give a more pleasant viewing experience to the user. Great job on mobile layout!
Marked as helpful
@emlew
Submitted
What are best practices for measurements? px, rem, %, etc?
@kaiser-sb
Posted
Hey Emily,
Great job completing your first project! Regarding best practices - it all depends on the context and layout in which you're using it. E.g. - for font sizes, it's better if you could use rem. This helps in case you change the root font size in the html part - you get the proportionate change in whole layout. For margins, you can use percentage or px - depending on whether you want a proportionately changing layout or a fixed measurement.
For width and heights, you can combine both by using percentage values and setting a max-width, max-height, min-width or min-height to get a fine layout. Also, you can use vw or vh - to size your elements according to viewport width or height. So it's all about mix and match and using them depending on where and how you wish them to place. Hope this helps. Happy coding!
Marked as helpful
@yoobezxc
Submitted
hi everyone, i want ask something i was always struggle on responsive layout every make project any advice for me to improve my skills, please comment. Thanks
@kaiser-sb
Posted
Congratulations on completion of your project. Excellent job! For responsive web designing - you can use the viewport meta tag - <meta name="viewport" content="width=device-width, initial-scale=1.0">. Also, to make your design user-friendly for different screen sizes - you can use media queries in your CSS file. You can refer to MDN Web docs or different articles in internet to learn more about these and apply them. You can use Chrome or Firefox dev tools to inspect elements and check how your project looks on different devices. Hope this helps. Happy coding!
Marked as helpful
@saddamjon1
Submitted
@kaiser-sb
Posted
Hi Saddam,
Great job on completion! Just a quick note - you added the font-family as Outfit but forgot to link the Google font connect via link tag. Just do that and you'll be good to go. Wonderful and keep it up!
Marked as helpful
@zebozebo1
Submitted
HTML, CSS
@kaiser-sb
Posted
Hi Zebuniso,
Great job on your project! A quick note - you can include the font-family property to get the Outfit font working. Thanks and happy coding!
@aliyabatoolalvi
Submitted
Why qrimage is not displayed here?
@kaiser-sb
Posted
Hi Aliya,
Congratulations on completing your first project here! Just a few things I think you can include or explore -
images folder (in the zip folder they provided) which you can include in your HTML and style it accordingly.index.html file.sans-serif.Thanks and happy coding!