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

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

Comments

[Ngwe Becky]

I think you'll have to mentor me someday 😊

[𝐁𝐚𝐛𝐢 ✨]

😂 thanks

[Chi Claudette]

Good one

[𝐁𝐚𝐛𝐢 ✨]

Thank you

[Njita Arnaud]

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

[𝐁𝐚𝐛𝐢 ✨]

Thank you 😊

[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.

[𝐁𝐚𝐛𝐢 ✨]

Thank you Keith!😊

I do hope you put more effort in the next project

[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)

[𝐁𝐚𝐛𝐢 ✨]

Ok then. Good luck on your journey!😊

[arvindsridharan]

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

[𝐁𝐚𝐛𝐢 ✨]

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...

[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

[𝐁𝐚𝐛𝐢 ✨]

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 🙂

[arvindsridharan]

Thanks, Babi. It helps.