Chapter 2 : customary-start

From now on, i will try to be as precise as possible cutting down on any unwanted talk or distractions. Lets get down to business. Lets see a small example , the one without any angular piece in it, and then analyze it and get on from there.

I will be using codepen to share the code so that you get to see the working sample and code along with me if you wish to. In this example, i will be only using Bootstrap 3.2 as the css framework. No script or angular is introduced here. If you would like to see the examples of a full page screen, click the "Edit on CODEPEN" on the top right, which takes you to the individual pen, and choose "Change View" which opens up a dropdown from which , select "Full Page"



For hosting the images, i am using a free cloud service called cloudinary.

See the Pen Static example without angular by harikrishnan (@harikrishkk) on CodePen.

It would be better if you can copy paste the HTML on to your favorite text editor if you dont like switching between small divider columns in codepen.

Analysis corner

1. Do we used angular here? Or for that matter even a script? Nope
2. All i am having is a hardcoded piece of HTML
3. Is it scalable? Nope.
4. If i need one more player profile, i need to copy paste the list item once more
5. This makes my HTML bloat heavily as we keep adding more
6. Maintainability becomes a question over here.
7. Apart from a demo sample, this piece doesn't offer much.
8. Lets keep this as a base and bring in dynamicity and later on bring angular in subsequent examples.