DEV Community

Cover image for freeCodeCamp project done #4: A Technical Documentation Page

freeCodeCamp project done #4: A Technical Documentation Page

Hey there! I finally finished my fourth RWD project and I'm now ready to show you my work
Alt Text

CodePen Link

Impressions from the project

  • The first little obstacle I encountered on this project was thinking of the overall view of the page. Sure the user stories were provided but I didn't want to create something that has already been done. I wanted to go a mile extra
  • Then there was the color scheme. I think I need more tutorials on thatπŸ˜…. I always take a lot of time to brainstorm on that. I did not want to use, blue I see it everywhereπŸ˜….
  • Fixing the nav bar. I'd first used flex to display the nav bar and the main section side by side. That made it impossible for me to keep the bar stationary relative to the header so it does not scroll with the page. I had to refactor my code and use float instead. With that, I could use position:sticky to fix the nav bar relatively to the header.

    PS: This took time😏

That said, what are your impressions?

Also I am open to any questions and constructive criticism.😊

                                                πŸ’ž Babi
Enter fullscreen mode Exit fullscreen mode

Top comments (15)

Collapse
 
arvindsridharan profile image
arvindsridharan

Babi, great work. How did you get the animation in the header portion.

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

Thank you @arvindsridharan !😊

For the animation.

  • I created an empty list in the HTML(pic)

dev-to-uploads.s3.amazonaws.com/up...

  • Styled it in the CSS and added CSS animations(pic)

dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
arvindsridharan profile image
arvindsridharan

Awesome work. I have a lot to learn from you. Please point me to reading resource which can bring me up to speed in web development

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

I work with the freeCodCamp tutorials. They give you a course and then projects at the end of the course. It's free .

There are several courses you could choose from. Sign up first πŸ˜‚
Link:
httpss://freecodecamp.org

Also there's a freeCodCamp forum where you could ask questions on things you don't understand, can't solve or project feedbacks.

There's also w3schools which is like my fallback reference.

Hope that's helpful πŸ™‚

Thread Thread
 
arvindsridharan profile image
arvindsridharan

Thanks, Babi. It helps.

Collapse
 
keithprice profile image
Keith Price

Looks great. My technical documentation page was very dull. I just went for black and white. I like the animated background in the header.

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

Thank you Keith!😊

I do hope you put more effort in the next project

Collapse
 
keithprice profile image
Keith Price

I have finished that course and am working on FCCs JavaScript course. I didn't spend a lot of time worrying about colors for the technical documentation page because I didnt think it was necessary. It's technical documentation after all. For things like the landing page and the Front End Mentor challenges that I do I always make them look good (or try to)

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

Ok then. Good luck on your journey!😊

Collapse
 
beckyngwe profile image
Ngwe Becky

I think you'll have to mentor me someday 😊

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

πŸ˜‚ thanks

Collapse
 
arnaudnjita profile image
Njita Arnaud

Nice one Barbie, keep up with the great work and pace 🀞

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

Thank you 😊

Collapse
 
chiclaudette profile image
Chi Claudette

Good one

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

Thank you