-1

I am having a hard time understanding the layout of HTML. In particular, none of the book or exercises I read went into detailed description about what div is actually for or how to visualise it when designing or building a website.

I am just starting out on HTML and I am trying to build pages like these below:

http://activatedrinks.com/index.php/fr/#/activate

http://www.captaindash.com/captain-dash-english-version

I understand I'd have to go into JS and Bootstrap but I just want to ask any experienced mentor here what is the best and easiest way to visualise the layout/structure of HTML when building them? Also if anyone could elaborate on the relationship of them as well would be helpful.

deceze
  • 510,633
  • 85
  • 743
  • 889
Henry Fok
  • 31
  • 5
  • Try [Codecademy](https://www.codecademy.com/) or [here](http://learn.shayhowe.com/) – Carl Binalla Apr 26 '17 at 03:07
  • Thanks Tesseract, I have been through Codecademy's 3 complete lessons and still don't have a strong grasp on them. It's sort of hard to understand. – Henry Fok Apr 26 '17 at 03:09
  • there are some pretty cool, free site templates here that you can deconstruct and play around with and see how they did things. https://html5up.net/ I also really like the csszengarden as a way to learn HTML and CSS, it really drove the separation of markup (html) and css (design) for me http://www.csszengarden.com/ – Michael Coker Apr 26 '17 at 03:09
  • And I suggest that you don't use frameworks until you are comfortable with `HTML`, `JS` or other language. Although frameworks makes programming faster and easier, unless you know how they works, they may become more of a problem than being helpful – Carl Binalla Apr 26 '17 at 03:14
  • Try w3schools, dude. For a beginner, you might design a page using tables. – Nica Apr 26 '17 at 03:37
  • 7
    @Nica Two terrible advices in one… – deceze Apr 26 '17 at 03:47
  • 1
    whatever you do, do not follow @Nica's advices - poor choices on both counts. As for `div`s, you can think of them as containers for any content. They allow you to gather elements within a logical (semantic) group and keep them together on your design (think of all buttons of a calculator or the inputs of a form) – blurfus Apr 26 '17 at 03:56

1 Answers1

0

The <div> tag defines a division or a section in an HTML document. Dividing or subdividing a page into many sections or functional blocks. The <div> tag is used to group block-elements or use as a container for other HTML items or elements to implement CSS styles to many elements at once.

To understand more get additional information I recommend the following sites for you to visit:

In addition try to understand different Frameworks (Front-End or Back-End) at http://tutorialzine.com/2016/12/the-languages-frameworks-tools-you-should-learn-in-2017/. "Although frameworks makes programming faster and easier, unless you know how they works, they may become more of a problem than being helpful" by Tesseract.

Carl Angelo Nievarez
  • 573
  • 1
  • 11
  • 33