Get Started

Copy and paste the following elements in the body html.

CSS By Element

body{

margin:0;

font-size: 20px;

font-family: sans-serif;

}

CSS By Class

.text-center{

text-align: center;

}

section{

width:100%;

}

section::after{

content: "";

clear: both;

display: table;

}

.section-heading{

color:blue;

font-size: 35px;

padding:4rem;

}

CSS By id

#header-resume{

opacity:0.8;

background-position: center;

background-image: url(images/background.jpg);

background-size: cover;

height:400px;

padding-top: 14px;

}

#header-nav ul{

word-spacing: 20px;

}

#header-nav li{

display: inline-block;

}

#header-nav li a{

text-decoration: none;

color:white;

}

.nav-menu li a{

transition: color 0.5s, border-bottom 4s;

}

.nav-menu li a:hover{

color: lightgrey;

border-bottom: 1px solid black;

}

#name-container{

margin-top:150px;

font-size: 30px;

}

#myName{

color:white;

}

#about-section{

height:auto;

width:100%;

position: relative;

}

#myPhoto img{

margin-top: -120px;

border: 4px solid white;

height:220px;

width:220px;

border-radius: 50%;

box-shadow: 0px 0px 6px 4px lightgrey;

}

#about-profile{

color:grey;

width:80%;

padding: 20px;

margin: auto;

}

#skills{

width: 100%;

}

/* skills parent container */

.skills-display{

padding: 5px;

margin-bottom: 30px;

}

/* making each of six child div as progress bar */

.skill-progress{

border-width:1px;

background-color: grey;

width:176px;

height: 35px;

border-radius: 16px;

box-shadow: 1px 1px 2px 1px lightgoldenrodyellow;

margin: 22px;

overflow: hidden;

}

.skill-box{

box-shadow: 1px 1px 5px 2px grey;

/*padding:10px;*/

border-radius: 20px 0px 0px 20px;

}

.skill-name span{

color: white;

margin-left: 10px;

text-align: center;

font-size: 16px;

}

.col-3{

float: left;

width:30%;

}

.fifty-percent{

height: inherit;

width:50%;

}

.eighty-five-percent{

height: inherit;

width:85%;

}

.eighty-percent{

height: inherit;

width:80%;

}

.blue{

background-color: blue;

}

.orange{

background-color: orange;

}

.light-purple{

background-color: purple;

}

.teal{

background-color: teal;

}

.text-right{

text-align: right;

}

.col-2{

float: left;

width: 45%;

margin: 20px;

padding:10px;

}

#favourites img{

width:500px;

border: 2px dashed darkblue;

height: 500px;

}

#favourites span{

margin: 20px;

}

#education{

width:100%;

}

#education img{

width:1000px;

height: 500px;

}

#portfolio .col-3{

width: 31.7%;

margin: 10px;

}

.portfolio-display{

margin-bottom: 30px;

padding-top: 0;

padding-bottom: 0;

padding-left: 50px;

padding-right: 50px;

}

.portfolio-img{

background-size: cover;

background-repeat: no-repeat;

margin: 10px;

position: relative;

}

.portfolio-img img{

width:390px;

height: 312px;

}

.portfolio-text{

transition: all 0.5s ease-in-out;

position: absolute;

height: 100%;

color: transparent;

width:100%;

top:0;

left: 0;

padding: 10px;

text-align: center;

}

1. Setting OS untuk menginstall Visual studio Code, Overview Coding, Membuat website dasar memanfaatkan html, python dan hubungan keduanya mengunakan platform replit. Detail kunjungi https://bit.ly/codingmeeting

2. Part-1: Menerapkan konsep Create, read, update dan delete (CRUD) data menggunakan python

3. Part-2: Menerapkan konsep Create, read, update dan delete (CRUD) data menggunakan python

4. Part-3: Menerapkan konsep Create, read, update dan delete (CRUD) data menggunakan python

5. Part-1: Menampilkan grafik data menggunakan python dan html

6. Part-2: Menampilkan grafik data menggunakan python dan html

7. Part-3: Menampilkan grafik data menggunakan python dan html

8. Menerapkan framework CSS+html menggunakan Bootstrap untuk mempercantik halaman website

9. Part-1: Membuat website personal branding (CV)

10. Part-2: Membuat website personal branding (CV)

11. Mengupload website pribadi ke www.github.com

12. Membuat games sederhana menggunakan python

13. Mengenal javascript sebagai alternatif back-end