freeCodeCamp project done #4: A Technical Documentation Page

#webdev #css #html #codenewbie

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

Top comments (15)

arvindsridharan • Mar 30 '21

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

𝐁𝐚𝐛𝐢 ✨ • Mar 30 '21

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 • Mar 30 '21

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

𝐁𝐚𝐛𝐢 ✨ • Mar 30 '21

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 • Mar 30 '21

Thanks, Babi. It helps.

Keith Price • Mar 29 '21

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

𝐁𝐚𝐛𝐢 ✨ • Mar 29 '21

Thank you Keith!😊

I do hope you put more effort in the next project

Keith Price • Mar 29 '21

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)