https://github.com/ardywsptr/dicoding-blog

Dicoding blog - Repositori ini merupakan latihan dari materi mobile first approach pada kelas Menjadi Front-End Web Developer Expert di Dicoding
https://github.com/ardywsptr/dicoding-blog

dicoding-academy dicoding-submission grid-layout-library media-queries mobile-first-layout responsive-layout

Last synced: 3 months ago
JSON representation

Dicoding blog - Repositori ini merupakan latihan dari materi mobile first approach pada kelas Menjadi Front-End Web Developer Expert di Dicoding

• Host: GitHub
• URL: https://github.com/ardywsptr/dicoding-blog
• Owner: Ardywsptr
• Created: 2023-04-15T22:27:45.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-04-15T23:49:00.000Z (about 3 years ago)
• Last Synced: 2025-12-03T05:33:22.733Z (7 months ago)
• Topics: dicoding-academy, dicoding-submission, grid-layout-library, media-queries, mobile-first-layout, responsive-layout
• Language: HTML
• Homepage: https://www.dicoding.com/academies/219
• Size: 900 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# dicoding-blog 📚

**dicoding blog** - Merupakan aplikasi web statis yang dibuat sebagai latihan mobile first approach pada kelas [Menjadi Front-End Web Developer Expert](https://www.dicoding.com/academies/219) 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/dicoding-blog-3?style=social)

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




## User Interface ✨










## Requirements

Aplikasi ini membutuhkan beberapa kebutuhan sehingga menjadi responsive dari berbagai ukuran layar mulai dari mobile, tablet sampai dengan dekstop. beberapa kebutuhan antara lain :

- Mengatur Viewport, Penggunaan Relative Unit, Ukuran Elemen.

- Menggunakan Media Query, Breakpoint, Grid Layout Module, Grid Track, Grid Lines, Gutters, Fraction Unit dan Repeat Notation

- Menggunakan Optimalisasi Teks dan Off Canvas Menu




## Webpack bundle :

Web app ini dibuat dengan menggunakan JavaScript *bundler* **Webpack** dengan berbagai teknologi yang di pakai, antara lain :

- `clean-webpack-plugin`

- `copy-webpack-plugin`

- `css-loader`

- `favicons-webpack-plugin`

- `file-loader`

- `html-webpack-plugin`

- `http-server`

- `style-loader`

- `webpack-cli`

- `webpack-dev-server`




## Getting Started

*Untuk memulai, Install npm lalu jalankan beberapa perintah di bawah ini untuk memulainya, folder dist akan dibuat setelah itu.*

1. Clone repositori

  

    `git clone https://github.com/Ardywsptr/dicoding-blog/.git`

    `cd dicoding-blog`

2. Install NPM

   

   `npm install`

   

   > Pastikan koneksi internet anda stabil sehingga tidak ada resiko gagal install.

3. Build untuk distribusi production

   `npm run build`

4. Starting development server

   `npm run start-dev`

   > Untuk memastikan development berjalan dengan baik pastikan cache pada browser anda sudah dibersihkan.

5. Starting production server

   `npm run serve`

   > Sebelum memulai server production sebaiknya dilakukan build dan testing terlebih dahulu.

   





















Jika ada pertanyaan atau issue, kunjungi [new issue](https://github.com/Ardywsptr/dicoding-blog/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/)