The Holy Trinity
JS, HTML, & CSS come together.
For the first three weeks at Nashville Software School, we have been learning Javascript. So on Monday, we got to see how that works together with HTML and CSS to form the “holy trinity” of the web. HTML is like the structure and layout of a web page and CSS makes it look good. HTML consists of tags such as body, headline, paragraph, and many more. CSS then allows you to take those tags and add style, pictures, fonts, colors, etc. F
First, we had to run express.js, a web application framework that allows a web browser to talk to node.js. Then we created a new type of file for us called an .ejs file that allows us to right Javascript directly in our HTML. Generally, you want to keep the two separate because the syntax gets crazy but does come in very handy to allow Javascript to write the code instead of hard coding in each line.
For an homework assignment we had to create a checkerboard using HTML and CSS but allowing Javascript to write the code in HTML:
So, in the table I created rows (<tr>) and cells inside each row <td>. So in this for loop, it creates a row, goes to the next for loop, and creates 8 cells and keeps going through the loops until there are 8 rows with 8 cells in each row, forming a 8 x 8 table that I made into a checkerboard in CSS.
So, in the CSS, I put a border on the table, took each cell (td) made them grey, gave them 75px by 75px dimensions. Then comes the fun part. CSS uses what it called selectors. I used the nth-child selector which selects the the n-th child of its parent where n represents a number. So I took the even rows and colored every other one blue. and then did the opposite for the odd rows.
Then came the checker pieces.
I used the same logic as I did when I was coloring the squares using the nth-child selector only i just applied it to the first three rows, and the last three rows. I imported some images to use as checker pieces and centered them on the squares and this is what happened:
