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
- I made up a page title that I named, HTML WORLDWIDE NEWS.
- 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.
- I added a logo to the top left of the page and I controlled it by using a <position:absolute;> tag.
- 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
- I used the color scheme of gray and white to make the page more visible to the viewers.
- I used internal CSS file to manage the page.
- I used <div> to make boxes.
- Each <div> has its own name in order to have a smoothy controller over boxes.
- I used <a>, <href>, <img> & <src> tags for images and videos.
- All of my images and videos are from the internet.
- Issues
- 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.
- 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,
Mohamed!
Great job on this so far! I love the links and selected content! So useful!
I suggest adding a header text title, what is the name of your newsletter?
Also, perhaps you can make the width of the GIF the same as the width of the two < div > containers below it – maybe 1400 px or 1450 px – see how that works.
See you tomorrow!
Hello professor!
Great comment and wonderful suggestions. I’ll take your notes industriously!!
See you tomorrow!
Awesome! Yes, see you tomorrow!