Practical Front End Development Part 2 - CSS

CSS

Welcome to the second series of Practical Front End Development walk through.
today we want to style out the web page for it to look more prettier
.
Open up main.css from your code editor and
.
remember our folder structure is still like this.

.

Table Of Content

1. Step 1
2. Step 2
3. Step 3
4. Step 4

.
.

Step 1:

inside main.css we want to set the margin of our form

main {
    margin: 20px;
    padding: 5px;
    display: block;
}
.section-con {
    display: flex;
    justify-content: center;
}

.

Step 2:

still inside your main.css, for the upper table we only want the left,top, right border to appear, while for the lower border bottom we want the left, bottom, right border to appear. the header text should be centralized

.table-con{
    margin-top: 8px; 
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: none;
    border-left: 2px solid #4caf50;
    border-right: 2px solid #4caf50;
    border-top: 2px solid #4caf50;
}

.table-con-result{
    margin-top: 8px; 
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: none;
    border-left: 2px solid #4caf50;
    border-right: 2px solid #4caf50;
    border-bottom: 2px solid #4caf50;
}

.table-con > thead, .table-con-result > thead {
    text-align: center;
    padding: 16px;
}

.

Step 3:

still inside main.css, we style the input element, and the select element to all have the same width when viewed from the front end

.code-input {
    width: 80px;
    padding: 5px;
    border: 1px solid #4caf50;
    margin: 5px;
}

.result-input {
    width: 120px;
    padding: 5px;
    border: 1px solid #4caf50;
    margin: 5px;
}

.select {
    width: 80px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #4caf50;
}

.

Step 4:

still inside main.css we style the button and the footer respectively

button {
    background-color: #4caf50; /* Green */
    border: none;
    color: white;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-left: 10px;
    margin-top: 5px;
}

.footer {
    color: #4caf50;
    text-align: center;
}

.
.
Now save your file main.css, then open up index.html in your browser to see the changes
.
In other to implement our functionalities we need to code some javascript function in main.js. follow in the next series to see how when the add button is been clicked and a new row is inserted into the page, you will learn how to access the DOM(Document Object Model) of and HTML file through javascript
.
Github repo

mdjibril / spya-dev-crash-course

two week web development crash course

"# spya-dev-crash-course"

View on GitHub

. Happy Coding