In order to create a game of tic-tac-toe using React.js, I first needed to figure out how to create a 3×3 grid of squares using HTML and CSS. Turns out, with CSS grid it is fairly straightforward. All we need is three CSS classes: container: This is the highest level div that will contain the … Continue reading HTML & CSS: How to create a square grid using CSS grid
HTML
HTML & CSS: How to get text to appear over an image on hover
I have an image on a web page that I want to display a text message whenever the mouse pointer hovers over the image. For example, I want to display the text “Placeholder Image” whenever the mouse pointer hovers over the image. The image itself is round with a blue border. This was styled with … Continue reading HTML & CSS: How to get text to appear over an image on hover
HTML: How to get vector icon images into your web page using Font Awesome
FontAwesome is a website where you can get free vector Icon images for your website. As described on their “get-started” page, they offer a CDN (Content Delivery Network) URL that you can place into your web page and the SVG icons will be loaded asynchronously into the page: https://fontawesome.com/get-started Here is what the CDN would … Continue reading HTML: How to get vector icon images into your web page using Font Awesome
HTML: How to get random stock images on your web page using unsplash.com
The website https://unsplash.com provides a free service that allows web developers to use random images of any size on their websites. All you have to do is place a URL like this in your HTML img tag, with the size of the image listed at the end of the URL. For example, this will produce … Continue reading HTML: How to get random stock images on your web page using unsplash.com
CSS: How to use the display property
Here is what w3schools.com says about the CSS display property: The display property specifies the display behavior of an element. Note: Every element on a web page is a rectangular box. The CSS display property determines how that rectangular box behaves. There are multiple settings that can be used with the CSS display property. Here … Continue reading CSS: How to use the display property
CSS: How to define and use variables
CSS has a mechanism that allows you to set up custom properties and then use them in CSS definitions as if they are variables. For example: /* CSS Variables */ :root { –primary: #fff; –dark: #333; –light: #fff; –shadow: 0 1px 5px rgba(104, 104, 104, 0.8); } When defining CSS variables, there are two syntactical … Continue reading CSS: How to define and use variables