Kevin Powell - Community•7mo ago

basic help on structure of a simple website

I'm very new to front-end development, especially CSS. I want to create a website with a top navigation bar and a side navigation bar on the right side of the page. The top and side navigation bars should be fixed, and the main content area between the navigation bars should not overflow. If possible, I would like the height of the top navigation bar to be 15% of the height of the window and the width of the sidebar to be 15% of the width of the window, even when the user minimizes the window. I tried to achieve this behavior with the following structure:

<div className='App'>
  <Topbar />
  <Sidebar />
  <MainContent />
</div>

<div className='App'>
  <Topbar />
  <Sidebar />
  <MainContent />
</div>

I also tried putting the main content and the sidebar in one div. I used both flex and grid displays, but nothing worked the way I imagined it. I would really appreciate it if someone could help me with this issue. Thank you!

4 Replies

clevermissfox•7mo ago

You're more likely to get assistance from the brilliant guys we have volunteering their time in here if you post the relevant code. No one knows what "its not working" means without it. If it's react you can use something like Scrimba with a react template or stack blitz or codepen as long as it's not a ton of components.

What will you build?

The next step of your coding journey starts here.

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

b1mind•7mo ago

https://stackblitz.com/ goated

StackBlitz | Instant Dev Environments | Click. Code. Done.

StackBlitz is the collaborative browser-based IDE for web developers. StackBlitz eliminates time-consuming local configuration and lets developers spend more time building.

IAmDragonborn•7mo ago

is this better than vs code? I've been using vs code for years lol When I was beginning I had no idea there were other IDE's out there 😅

b1mind•7mo ago

Its not to replace VScode (but does use Monaco which is the same editor that vsc uses, wish it was codemirror though lol) It allows you to do a node runtime in the browser. Stackblitz kinda changed the game as we can now spin up any project dev env in the browser. Things like https://learn.svelte.dev uses it for their learning platform i.e. but we can use it to share with full env.

Gaming

Programming

basic help on structure of a simple website