what_html_finaldraftOct-13-2016

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

Oct-18-2016

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.


Oct-20-2016

  • 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

 

screen-shot-2016-10-16-at-10-51-10-pm

screen-shot-2016-10-16-at-10-51-39-pm

screen-shot-2016-10-16-at-10-52-03-pm

screen-shot-2016-10-16-at-10-52-18-pm

 

Feel free to share your feedback at any time 🙂

–The end,

css.php