[Snoctriz]

Greetings,

I was hoping someone could help me just make this image into a html structure. Basically i dont need it to function. I just need you to structure what it looks like from this image to html. This picture is an image of a java chat.

Example:
1. Make it look just like this picture.
2. Don't worry about functionality.
3. Just need something to work off of.

i.imgur.com/WaWUrXM.png

Video of what I got so far:
https://streamable.com/oepa69


Regards,
Snoc

[webdev77]

What have you tried so far?

[Snoctriz]

What have you tried so far?

My apologies, i uploaded the video after I submitted the post. But, check the post again for the video lol✌

[Hexicidal]

Where do you think you would start with this?

How would you structure it, would there be two boxes, three, four?

I see a div that holds that body, a div that holds the chat container, and a box under the chat container.

There are many ways to structure a project like this for an HTML wireframe. This is not a full layout of the structure, but this will get you closer to your homework.

Code

<div id="chat-container">
  <div id="header">
    <h1>Teen Chat</h1>
  </div>

  <div id="main-section">
    <div id="chat-area">
      <div id="messages">
      </div>
      <div id="message-input">
        <input type="text" id="message" placeholder="Type your message here...">
        <button id="send">Send</button>
      </div>
    </div>

    <div id="sidebar">
      <div id="users">
        <h2>Users</h2>
        <div id="user-list">
        </div>
      </div>
      <div id="rooms">
        <h2>Rooms</h2>
        <p>Lobby</p>
      </div>
    </div>
  </div>

  <div id="footer">
    <button id="settings">Settings</button>
    <button id="logout">Logout</button>
  </div>

</div>

[Snoctriz]

Where do you think you would start with this?

How would you structure it, would there be two boxes, three, four?

I see a div that holds that body, a div that holds the chat container, and a box under the chat container.

There are many ways to structure a project like this for an HTML wireframe. This is not a full layout of the structure, but this will get you closer to your homework.

Code

<div id="chat-container">
  <div id="header">
    <h1>Teen Chat</h1>
  </div>

  <div id="main-section">
    <div id="chat-area">
      <div id="messages">
      </div>
      <div id="message-input">
        <input type="text" id="message" placeholder="Type your message here...">
        <button id="send">Send</button>
      </div>
    </div>

    <div id="sidebar">
      <div id="users">
        <h2>Users</h2>
        <div id="user-list">
        </div>
      </div>
      <div id="rooms">
        <h2>Rooms</h2>
        <p>Lobby</p>
      </div>
    </div>
  </div>

  <div id="footer">
    <button id="settings">Settings</button>
    <button id="logout">Logout</button>
  </div>

</div>

This is what I got so far:
https://jumpshare.com/s/LPO9iWHdGWINQsBJbtJA

[Hexicidal]

Ohhhh. How are you saving the data?

[Snoctriz]

Right now it doesn't save data. I need to configure a database in the backend in order to have it save.

---

Ohhhh. How are you saving the data?

I'm thinking of using MongoDB.

[Hexicidal]

Right now it doesn't save data. I need to configure a database in the backend in order to have it save.

---

I'm thinking of using MongoDB.

It would be easy to build it with a relational database!