DEV Community

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

freeCodeCamp Project Done #3: A Product Landing Page

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

Top comments (23)

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
ππšπ›π’ ✨

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
ππšπ›π’ ✨

Oh thank you Alakowe

Collapse
 
tradecoder profile image
Mamun Abdullah

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
ππšπ›π’ ✨

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
ππšπ›π’ ✨

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

Collapse
 
killiancalderon profile image
KillianCalderon • Edited

Recently, I developed a landing page for a small perfume startup. It was quite an interesting experience in web design. I usually work with products that I use in my everyday life. Accordingly, I adore completely different fragrances. You can find very sweet or subdued, pungent fragrances in my collection. I choose perfume for every season. Usually, in winter, I like to use luscious, musky perfumes. In summer, I buy citrusy, refreshing scents. Most of the time, I order from decantx.com, where I can find both women's and men's fragrances.

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
ππšπ›π’ ✨

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
ππšπ›π’ ✨

Thank you Micah 😊

Collapse
 
babib profile image
ππšπ›π’ ✨

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

Collapse
 
chiclaudette profile image
Chi Claudette

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

Collapse
 
babib profile image
ππšπ›π’ ✨

Thank you Chi!

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
ππšπ›π’ ✨

Thank you Benndip 😊

Collapse
 
shariarhriad profile image
shariar-hriad

Nice but mobile responsive is not so good

Collapse
 
babib profile image
ππšπ›π’ ✨

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

Collapse
 
sojasmine profile image
Sojasmine Gjerstad

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

Collapse
 
babib profile image
ππšπ›π’ ✨

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