DEV Community

Cover image for Practical Front End Development Part 2 - CSS
Jibril Dauda Muhammad
Jibril Dauda Muhammad

Posted on

1

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.
Folder Structure
.

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

GitHub logo mdjibril / spya-dev-crash-course

two week web development crash course

"# spya-dev-crash-course"



. Happy Coding

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay