Nama: Muhammad Ali Pratama Putra

NIM: 5220411416

Mata Kuliah: Pemrograman Web Praktik

A. Pendahuluan

B. Pembahasan

C. Implementasi

Pada projek ini, saya membuat tampilan website portofolio saya sendiri. Saya juga membangun web dengan konsep RWD (Responsive Web Design) dengan tema yang simpel. Sebelum saya implementasi, saya melakukan perancangan prototype di aplikasi Figma, berikut saya lampirkan file figma dalam projek ini.

Link Prototype Figma Web

Untuk menjalankan projek ini, Anda dapat melakukan langkah-langkah berikut:

1. Membuat Virtual Environment

   virtualenv venv
   venv\Scripts\activate
   

2. Instalasi package requirement

   pip install -r requirements.txt
   

3. Menjalankan server

   flask run
   

4. Buka browser dan akses http://127.0.0.1:5000/

Karena pembahasan materi mengenai flask masih di tahap pengenalan, saya membuat projek ini hanya berfokus pada tampilan statis. Bahasa yang saya gunakan hanya terdiri dari html, css, dan js tanpa menggunakan framework atau library apapun. Saya menggunakan template engine Jinja2 untuk mempermudah proses pemecahan komponen layout web saya. Berikut adalah struktur folder dari projek ini.

- app
| - static
| | - css
| | | - style.css
| | - images
| | | - banyak file png
| | - js
| | | - index.js
| - templates
| | - partials
| | | - footer.html
| | | - header.html
| | | - main.html
| | | - navbar.html
| | - index.html
| | - layout.html
| - app.py
- .flaskenv
- .gitignore
- requirements.txt
- README.md

Berikut adalah tampilan web yang saya buat.

1. Tampilan desktop

   

2. Tampilan tablet

   

3.Tampilan mobile