wow, so an hour and a few minutes in and i already made a decent looking chatbot page. not bad. again, i made a scrappy prototype, and then the polished one and i’ve attached the both of them here. the same old routine.

i made it go from an unordered list of random buttons to a sidebar which looks decent. pushed the header “Good Morning Stardancer!” to the center of the page and pushed it a slight bit up to the center, and made input box.
what the chatbot page consists of:

• 4 chats as a sample of the chat history feature
• a ‘New Chat’ button
• a ‘Search Chats’ button
• a bar showing user’s name, user’s profile photo and a logout button.
• and a greeting which looks optimistic but feels like the sun on a cloudy day.

i didn’t mention how I made this, though. Neither did i on my previous devlogs.

i used CSS and linked the file as a stylesheet hyper-reference to my HTML/browser page file. I then used absolute positioning for standalone elements/children elements (inside containers) and relative positioning for the parent container itself, this allows to “lock” the elements inside in and not let it come outside.
i used text-align: center for as many times i can(not) count (more than 25 times, that’s all i can say confidently) and directional attributes (top, left, right) is the runner up. both of them set the exact direction/“coordinates” an element must be placed appropriately at.

of course, background-color, border and border-radius. the mystical trio. one sets the color of the elemental backdrop itself, another sets the size of the border and its color and the last one sets the curvature of its corners. these three are the holy trinity if you want to style an input box, a container, a button or a textbox.

width and height are two more attributes which are super important, cuz they literally set the size of elements to appear on the screen.

what this taught me was about experimenting with different numbers. testing them out gave me so much information about how a prior line of code worked and why that created the pathway for a specific code to work and why it wouldn’t (i spent an hour crashing out on calling back an id with a . and went on to style hovering buttons–progress much??).

p.s: use PIXELS NEVER CM OR INCHES (px :))