Devlog 1 – Building My Welcome Screen

Today I created the welcome screen for my Personal OS using HTML and CSS.

I started by creating a basic HTML page with a heading and a paragraph. After that, I added an image that represents me and included a link to one of my favorite websites. This helped make the page feel more personal.

Next, I experimented with different styles. I changed the background color, adjusted the text colors, and selected a font that matched the look I wanted. I also resized my image and rounded its corners using the border-radius property.

One challenge I encountered was making the image look the correct size without becoming stretched. I solved this by setting both the width and height and using styling to keep the image looking natural.

Through this project, I learned about:

• HTML elements such as h1, p, img, and a
• Adding images and links to a webpage
• Using inline CSS styles
• Changing colors, fonts, spacing, and image appearance
• Using margin and padding to improve layout

My favorite part was customizing the page and making it feel like my own . In the future, I want to add windows, a desktop background, and interactive features using JavaScript.

Devlog 2 – Creating My Desktop and Top Bar

Today I expanded my Personal OS by creating a desktop layout and adding a top bar with a live clock.

I started by placing all of my welcome screen content inside a div, which acts as a window. I added a border, rounded corners, padding, and a background color so the window stood out from the desktop background.

Next, I added a desktop wallpaper by setting a background image on the body of the page. I used background-size: cover so the image would fill the screen properly.

After creating the desktop, I built a top bar. I used a flexbox layout to place the OS name on one side and the time on the other. I also added a semi-transparent background to give it a more modern operating system appearance.

Finally, I learned some basic JavaScript. I created a function that gets the current date and time using new Date().toLocaleString(). Then I displayed the time inside the top bar and used setInterval() to update it every second so the clock stays accurate.

Through this project, I learned about:

• Using div elements as windows
• Positioning elements with position: absolute
• Centering content with transform: translate()
• Creating a desktop wallpaper with CSS
• Using Flexbox for layout
• Creating a top bar
• Writing basic JavaScript functions
• Updating webpage content with querySelector() and innerHTML
• Using setInterval() to run code repeatedly

My favorite part was adding the live clock because it made the website feel more like a real operating system. Next, I would like to add more windows, applications, and interactive features to make the OS more useful.

(I put both my devlogs in here because I forgot to post my first devlog)