Use the following steps to create the environment. For more information, please the article below the steps. :). (By the way, I use Ubuntu 20.04) Create a directory data in any directory you want. Create a Docker network using the following command. docker network create learning-postgreSQL-network 3. Create a container…

You may be like me, who just want to learn Sass only. However, you find that it is not that easy to setup a system that can automatically transpile Sass files and automatically reload the browser when Sass, javascript or HTML files changes. At first, I thought I can only…

Now it is time for me to begin to seriously learn a database. I know the theory of databases, but I lack of experience using a database. I used MS SQL before, but I know little about it. …

The official document of Semantic-UI says little about learning how to use Semantic-UI. Examples are given, but they are code only. None of them are described in detail. I usually learn programming language by examples. Not only read the example code, but also write the example code from scratch. This…

You may not want to install Nodejs just for CSS development with semantic-UI. This simple Docker image is all you need. Features of this image are: 1. no need to install Nodejs locally 2. install semantic-UI locally The Dockerfile to create the image is: FROM node:lts-alpine RUN apk update && apk…

Here I would like to create a responsive menu. The menu is vertically stacked on small screens, and is a horizontal navigation bar on larger screens. When I tried to combine the two menus in the same file to achieve responsiveness, I found things got tangled. It is better to…

For HTML code please see this article. The CSS code is * { box-sizing: border-box; } body { margin: 0; padding: 0; background-color: #ccc; } nav ul { list-style: none; padding: 0; margin: 0; background-color: #444; text-align: center; /* step 4*/ overflow: auto; /* step 5*/ } nav li {…

The effect of every line of code can be observed using a simple Browser-Sync docker image. The HTML code for the horizontal navigation bar is as follows. <header> <nav> <ul> <li><a href="#">Home</a></li> <li><a class="active" href="#">Tutorials</a></li> <li><a href="#">About</a></li> <li><a href="#">Newsletter</a></li> <li><a href="#">Contact</a></li> </ul> </header>

There is a great article that explains how to build a simple CSS menu in detail. However, I want to build my own and record each step in my own tongue. First of the first is to clarify requirements. Requirements are simple. The menu is a vertical menu on small…