Product landing challenge feedback

Just wanted some feed back on my project. I just wanted to ask a question as well with how to learn. is it normal for beginners to check others code whilst doing this challenges? I would appreciate any tips on how to learn
https://codepen.io/donnex777/pen/ExVOqEJ

kind regards

1 Like

the website is sweet, the anime theme makes it sweeter. I would suggest you to design your input field and make it more elegant. The cards that you are using (the price cards), for that use display flex and keep it on center.

About learning, I am a beginner too, yes, looking at other people’s code helps a lot. Remember, looking and copying are different things. Keep on exploring and keep on looking into how stuffs are built. Keep on learning and having fun!

thanks for the comment. I’ll try to add a bit more on the code.
About the learning process, I keep finding myself forgetting all the codes that I have done and then glancing back to my previous code. I hope this is just normal and will eventually will memories all the code by heart

thanks anyway

1 Like

Overall look is nice.

  • I would say to change the fonts. Google Fonts are easy to use and have many options.

  • Also, you shouldn’t use h1, h2, etc for your text to change the size. h1 should be for your main title heading, h2 for headings of other more important stuff, then p tags for everything else. Use the font-size to modify them beyond that, but basically the h tags should show meaning and direction.

  • The video is not responsive and neither is the pricing section. When I shrink the screen they both go off to the right.

  • Edit the pay buttons a bit to make them a bit nicer looking so they go with the rest of your pages color scheme.

This site helped me a lot with aesthetics http://colormind.io/bootstrap/
And like @prayamajhi85 said, checking out other code just to see how they did something is no problem. It’s copy-paste that you want to avoid. And looking at your own code is something I do often. There is soooo much, it’s hard to cram it all in there.
Keep it up!

2 Likes

Thanks for the comment. it was very insightful. I’ll make sure to keep it in mind regarding using h1 and h2 tags. Can I just ask how would I make the video and pricing section responsive? I realized that as well when I shrink the page it goes off to the right. can you please give me some tips on how to go about this.

The site is good. One thing though, I think it’s better to make sure that you make your webpage as closely similar to the the one in the challenge. you may change the colors and any stylings to your preferences but make sure that you design your page to look as close as the one given.

It will really help you learn a lot as you will struggle to get things align well as that of the project challenge given.
Also, try to make the page mobile responsive as well.

Is it normal for beginners to check others code whilst doing this challenges?
Probably yes, you learn a lot when you try to discover how someone did implement something. If I find that I don’t understand the concept, then I try to make research over the internet and I have made tremendous progress.

I also did the same project last month, here is the link. You may try to check it out and also see if you can learn a few stuffs from the it.
Product-landing-page-project

As always, I’m always open if you need any help.

For the responsive it can depend on what you’re going for. To get it to resize, usually the max-width= 500px or width= 50% (or whatever px or percent you want) can take care of it. Then use the margin= auto to get it to center. Although sometimes I find I have to use text-align= center on the parent container to center. Anyways, play around with those and you should be able to figure it out.
And idk about that @Donalds6784, I feel you want it to be close, but I feel the main goal is the get it to pass the tests and look complete. Yours is basically a copy-paste which is cool if you did it without looking at their code at all, but why not make it yours? They provide that as an example, not a guide. Here’s mine if you want to check it out. Still in progress right now just keep in mind. https://codepen.io/codecory/full/BaoxMyN

2 Likes

It is absolutely normal to forget things. For me, I feel like learning to code isn’t only about “learning coding”, its more about learning to concentrate and learning to understand. It might take some time to take a grasp on the syntax but you will find yourself coding like a boss if you keep on putting continuous effort into it.

PS : Forgetting is absolutely normal.

I won’t dwell on this because I don’t want to hijack the OP’s topic but that’s not good advice. The projects all say “functionally similar” and “give it your own personal style”.

Your page looks good @donray.dare. Some things to revisit;

  • for the iframe element, the frameborder attribute is obsolete. For HTML5 you should be using CSS instead.
  • Your header image is huge and causes your navbar to be large. When clicking on the links content is being hidden behind the navbar.
  • As stated, you need to make the page responsive.

thanks for the comment. with regards to the navbar, that’s actually I don’t get. because I coded this in visual studio before transferring it to code pen. in visual studio it actually works fine. so I don’t really get what is wrong with it.

It because you didn’t apply any stylings for the image in your css try to identify the image id, and then in the css, apply the styles. Give the image a width and height of auto. It will scale down to fit well.