Question: technical documentation project

HTML-CSS
1

Hello! I’m trying to build a page that would have its navigation bar on the left, right next to the main section, similar to this project: https://codepen.io/anqi-dai/full/MPozjZ

I really want to do it in either flexbox or grid. I haven’t really used them before and I’m having a bit of a hard time figuring out what I’m doing right.

My pen can be viewed here, It’s still a rough draft, though: https://codepen.io/musicianATswampCastle/pen/oOoymp

Can someone help me in regards to my mistakes? I tried doing these (besides googling):

  • Tried deleting the margin of the main document to have as much space as possible in order to have enough space for the nav bar and its content

  • Tried to separate the two sections by setting them into 2 different containers so that I can add a different width/height to them, separately. I don’t think the markup was correct, so i gave up decided to ask here for help.

Thanks so much in advance!

2

Building a Tech Doc page is the fourth project you do when going through FCC’s Responsive Web Design Certification. Have you gone through the course? In it you’ll learn, among other things, flexbox and grid and in doing so you’ll learn which of these would help you build the page. You’ll also learn about making your navbar fixed.

There are user stories that you meet to get the basic HTML layout for each project and then you use the CSS skills you’ve accumulated to complete your project. Then submit your project the the Project Feedback forum to get constructive feedback.