Making a Simple Newsletter Webpage!

#showdev #html #css #javascript

Introduction

For a few weeks i've been focusing on studying web API's and web development, but i havn't been practicing it for a while. So with what i've learned from the DomTokenList and 10 months of experiance i decided to make a newsletter. I must give thanks to Sarthak Kalpande for stylizing the login button and Abit Salihu for helping with the overflow and layout of the page! You can also contribute to the newsletter from my Github. To see it full screen click here.

HTML Layout

I first started with a horizontal nav bar then i would make two sections, one about the current article and the other about other articles to see. To do that i made shure the main-part was bigger while the side-part was shorter in size and text.

CSS styling

I gave the newsletter a peach color and gave the nav bar padding so each list item can gap. To help the theme changer, i made a class that would help make the newsletter dark from using the DomTokenList API. I gave the main-part a right border to show the gap between the two sections.

Changing Theme

Using the .toggle() method every time you click the change them button the theme will change. I don't really have to explain this but thanks too Abit Salihu for choosing the colors for the different theme.