About Baladi

We start our HTML with the usual DOCTYPE, html, head, and body tags. In the head tag, we add our title and link to our CSS stylesheet (style.css). Inside the body tag, we structure our layout inside the #wrapper div. We will have three main blocks: a simple menu, our chatbox, and our message input, each with its respective div and id. The #menu div will consist of two paragraph elements. The first will be a welcome to the user and will be on the left, and the second will be an exit link and will be on the right. We are using flexbox instead of floating elements for the layout. The #chatbox div will contain our chatlog. We will load our log from an external file using jQuery's ajax request. The last item in our #wrapper div will be our form, which will include a text input for the user message and a submit button. We add our scripts last so that the page will load faster. We will first link to the Cloudflare jQuery CDN, as we will be using the jQuery library for this tutorial. Our second script tag is what we will be working on. We will load all of our code after the document is ready.