DEV Community

loading...
Cover image for freeCodeCamp Project Done #3: A Product Landing Page

freeCodeCamp Project Done #3: A Product Landing Page

babib profile image Babi-B ・2 min read

Hello!I just finished my third project on the freeCodeCamp Responsive Web Design course (HTML and CSS only) and I am ready to share my work!
I worked on Landing a landing page for a winery
Alt Text

CodePen Link

Feedback On The Work done

Unlike the last two projects, the Tribute Page and the Surver Form, this project took time.

  1. Deciding on what product to work on πŸ˜…. I know this might sound trivial but it's not. The list was endless!
  2. The color theme. It's one thing to choose a background image, it's another thing to choose complementary colors to match it
  3. The overall layout of the page. I had to think and re-think this one several timesπŸ˜…

One important concept I learned from this project was the use of the CSS display:flex. I found this property is very important especially when making the web page responsive. It eases the work in a superb way 😁.

Your contributions from the last projects greatly helped me here in deciding what to do and what not to do. Thanks a lot!πŸ€—

As always I will greatly appreciate your suggestions, impressions and contructive criticism. I am happy and ready to learn πŸ€“.

                                            πŸ’ž Babi
Enter fullscreen mode Exit fullscreen mode

Discussion (22)

pic
Editor guide
Collapse
ndeh007 profile image
Akumah Ndeh-Ngwa

Congratulations on your progress so far😊.

You mentioned having difficulties in choosing appriopriate colors. I recommend choosing colors from the already existing background image. That should easily give you a theme. It's important not select a theme which conveys a message in colors the same as the page is communicating in information.

Collapse
babib profile image
Babi-B Author

Thank you Akumah😊

I'm sorry I didn't get your point on choosing colours . Could you please rephrase?

Collapse
joblessnigga profile image
Alakowe

Hi Babi-B,
I believe Akumah is saying you can choose a colour from the background image you have decided to use.
I like the recommendation too.

Thread Thread
babib profile image
Babi-B Author

Oh thank you Alakowe

Collapse
tradecoder profile image
Mamun

use this code at the top your css and then click on any of your navigation/menu to see the result.

html {
  scroll-behavior: smooth;
} 
Enter fullscreen mode Exit fullscreen mode

If you can stay in touch for a while, I also can suggest you for some development on this project, that will also be useful for your other projects. However, it's fine at this level. Go ahead.

Collapse
babib profile image
Babi-B Author

Hello Mamun! I tried the property and I think it's superb! Thanks πŸ˜ƒ !

Here check out the effect --> codepen.io/babi-b/full/zYoygoP

Collapse
motz795 profile image
MOATAZ795

Well done. You can choose perfume as a product next time I think it's a very cool landing page.

Collapse
babib profile image
Babi-B Author

Thank you MOATAZ795.😊
Yes a perfume landing page sound awesome!

Collapse
chiclaudette profile image
Chi Claudette

Nice one Babi! You are really progressing fast. The design looks great.

Collapse
babib profile image
Babi-B Author

Thank you Chi!

Collapse
tamanderson profile image
Tam-Anderson

Wow I love it, good work!
The page seems nice; however, the white fonts and bright background makes the text a little difficult for the eyes.

Collapse
tamanderson profile image
Tam-Anderson

Alright, I just tried out different screen widths. It looks great on larger screens!
Good work!

Collapse
babib profile image
Babi-B Author

Thanks again 😊.
I'm glad you experimented on it. Making a web page responsive is still new to me. Your feedback is greatly appreciated

Thread Thread
anjimicah profile image
Micah Anji

Good work Babi. You're getting there

Thread Thread
babib profile image
Babi-B Author

Thank you Micah 😊

Collapse
babib profile image
Babi-B Author

Thank you Tam-Anderson!😊
Yes I realized that too πŸ˜…. I'm working on it

Collapse
benndip profile image
Benndip

This is beautiful Babi. I like the coloring.
Just try to adjust the follows part so it aligns straight with the other things on the navbar

Collapse
babib profile image
Babi-B Author

Thank you Benndip 😊

Collapse
sojasmine profile image
Sojasmine Gjerstad

Good job. You forgot to change de' lipsum' text under Vineyards Events.

Collapse
babib profile image
Babi-B Author

Thanks Sojasmine !
I didn't forget, I just couldn't come up with something cool🀭

Collapse
shariarhriad profile image
shariar-hriad

Nice but mobile responsive is not so good

Collapse
babib profile image
Babi-B Author

Thank you shariar-hriad!😊
I hope to do better next time