Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ardywsptr/calculator

Calculator - Repositori ini merupakan latihan dari materi html, css dan local storage pada kelas Belajar Dasar Pemrograman Web di Dicoding
https://github.com/ardywsptr/calculator

css3 dicoding-academy html5 jacascript localstorage

Last synced: 29 days ago
JSON representation

Calculator - Repositori ini merupakan latihan dari materi html, css dan local storage pada kelas Belajar Dasar Pemrograman Web di Dicoding

Awesome Lists containing this project

README 

        
# Calculator



**Calculator** - Calculator merupakan aplikasi perhitungan angka, aplikasi ini dibuat sebagai latihan html, css dan local storrage pada kelas [Belajar Dasar Pemrograman Web](https://www.dicoding.com/academies/123) di Dicoding Academy



![Author](https://img.shields.io/badge/made%20by-Ardywsptr-blue)

![GitHub followers](https://img.shields.io/github/followers/Ardywsptr?style=social)

![GitHub watches](https://img.shields.io/github/stars/Ardywsptr/Calculator-3?style=social)

![GitHub last commit](https://img.shields.io/github/last-commit/Ardywsptr/Calculator)







## User Interface ✨














## Deskripsi Kelas 🚀



Belajar Dasar Pemrograman Web 


Disusun oleh: Dicoding Indonesia 


Level: Pemula



Kelas ini membahas tuntas dasar HTML dan CSS sebagai tiga fondasi pembuatan website. Fondasi tersebut diperlukan untuk Anda yang ingin mengembangkan kemampuan pengembangan website ke tahap yang lebih lanjut. Disusun dan diverifikasi oleh tim expert Dicoding, materi yang disajikan terstruktur dan komprehensif.



### Materi yang dipelajari:



- **Pendahuluan:** Pengenalan mengenai website, server dan client, anatomi website, dan tools yang diperlukan dalam pengembangan halaman website. (40 menit)

- **Pengenalan HTML:** Mempelajari alat yang digunakan dalam membangun struktur halaman website. Modul ini membahas tentang HTML, struktur dasar dokumen HTML, dsb. (1 jam 10 menit)

- **Pendalaman HTML:** Mendalami penerapan HTML dalam membangun struktur halaman web secara lebih lanjut. Di antaranya seperti beragam elemen HTML, teknik mengorganisir konten website dengan elemen semantik, mengenal attribute pada elemen, generic element, table, dsb. Selain itu, modul ini membahas tentang perbedaan antara elemen yang bersifat inline dan block. (6 jam 45 menit)

- **Pengenalan CSS:** Mempelajari alat yang digunakan untuk memperindah tampilan halaman website. Modul ini membahas mengenai peranan CSS, cara kerjanya, cara menuliskan kodenya, anatomi dari CSS rule, dsb. (1 jam 50 menit)

- **Pendalaman CSS:** Mendalami penerapan CSS dalam mempercantik tampilan halaman website secara lebih lanjut. Di antaranya seperti variatif selector, styling untuk font dan text, memahami tentang foreground color dan background color, box model, shadow, positioning, layouting menggunakan float, dan media query. (15 jam 20 menit)

- **Layout Responsif dengan Flexbox:** Mempelajari teknik layouting menggunakan Flexbox dalam membangun konten halaman website. Fitur ini merupakan teknik baru di CSS dalam menyusun layout yang responsif dan dapat dikombinasikan dengan media query sehingga tampilan pada perangkat mobile lebih optimal. (4 jam 5 menit)

- **Penutup:** Implementasi teknik yang telah dipelajari dalam pembuatan dan improvisasi pada sebuah proyek website sederhana. (10 jam 15 menit)



### Evaluasi pembelajaran:



- **ujian akhir**

- **Submission :**  tugas akhir membuat halaman website menggunakan teknik semantic HTML dan layouting



`Total jam yang dibutuhkan untuk menyelesaikan kelas ini, mulai dari persiapan kelas sampai evaluasi belajar, adalah 41 jam.`







## Feature 🌟



* Melakukan perhitungan kalkulator ✅



* Menampilkan hasil perhitungan ✅



* Menampilkan riwayat perhitungan ✅



* Meyimpan data menggunakan localstorage ✅



* Layout responsif menggunakan flexbox ✅







## Getting Started



*Untuk memulai, ikuti langkah-langkah dibawah ini :*



1. Clone this repository

   

   `git clone https://github.com/Ardywsptr/Calculator/.git`



    `cd Calculator`

   

2. Hapus cache pada browser



3. jalankan file index.html













> Jika ada pertanyaan atau issue, kunjungi [new issue](https://github.com/Ardywsptr/Calculator/issues/new)

>

>Jika dokumentasi ini bermanfaat mari berteman dengan menekan tombol follow pada [profile](https://github.com/Ardywsptr) ini ☺☺☺







Big Thanks for [Dicoding](https://www.dicoding.com/)









  Dicoding