After the professor introduced us to the new project of Creative HTML Newsletter Project I decided to work with <div> tag instead of <table> tag. It was a great experience. I’ve struggled a lot, but I’ve learned a lot simultaneously . Every time I faced a troubleshoot, I remember the professor’s quote “YOU CAN DO IT”. That boosted me to overcome my struggled.


Click here to see my HTML Newsletter


The editor version of the Newsletter project. In this version, I included the professor’s suggestions which is to add, a head to the page and fix the size of the the GIF to make it matching the <div> size.


  • Final daft
  1. I made up a page title that I named, HTML WORLDWIDE NEWS.
  2. I worked with how to insert <div> tag inside another <div> tag. I used to have <h1> tag as my title of each box, but now I change the <h1> to a <div> tag in order to make it looks more nicer to the eye.
  3. I added a logo to the top left of the page and I controlled it by using a <position:absolute;> tag.
  4. I also changed the position of the footer and added it to the top right of the page by using the <margin-left;>.

Click here to see the final draft

  • Process
  1. I used the color scheme of gray and white to make the page more visible to the viewers.
  2. I used internal CSS file to manage the page.
  3. I used <div> to make boxes.
  4. Each <div> has its own name in order to have a smoothy controller over boxes.
  5.  I used <a>, <href>, <img> & <src> tags for images and videos.
  6. All of my images and videos are from the internet.


  • Issues
  1. I couldn’t feel free playing with the boxes size. Every time I tried to change the weight and the height of the box, the contents shifted.
  2. I tried so hard to embed the video to my HTML code, but I couldn’t. Every time I copied the URL and pasted to my HTML code and run the page, the video wasn’t working. Then I came across wonderful video on YouTube that has what I’m looking for. Click here to see the video  


  • Code







Feel free to share your feedback at any time 🙂

–The end,