Build A Photo Website Version 1.0 of Kagati.nl

You can write HTML, CSS, and responsive media queries. You also know how to identify and write responsive units. It's time to put that knowledge into action by reading someone else's code and adding your own flavor. You will be building a portfolio website from a template found on https://html5up.net/.

Version 1.0 of the Website Kagati.nl (https://hichmok93.github.io/Kagati/)

Learning Objective:

Different Steps in building and maintaining a site:

Workflow and processes concerning the website and its architecture:

Techniek:

• ETL: Extract Transform and load.
• Deploy a demo site on Github
• phyton code
• HTML website building
• web scraping

Steps:

1. Scrapping the photos from the original website using a Phyton script in VSC. ( Write a Phyton script)

2. WordPress API to extract the Photos. (Use an API to extract the Photos)

3. Save the images .jpg files locally and build a website locally using the template from 5htmlup (build the site on a local computer)

4. ChatGPT for errors and explanations during the process. (help)

5. write a script to rename all the 250+ images to a 00.jpg format file. (transform)

6. put the site together and upload the documents to my GitHub page (push the site)

7. create a page to represent the demo website (Github Page)_

Accomplished: Added to the demo site and the work process:

• Stock photos scrapped from the website using Python
• I used a script to rearrange the names and sizes locally within the file structure.
• Made a git environment
• Published the page.
• Changed the layout and colors of the stock site from htlm5up
• They have the credit, it's for private use only
• Links to Instagram and the original website. (kagati.nl)
• email options via mailto:_

Future work:

• Set an official e-mail system using PHP
• Change the Latin text to the original text
• rearrange the images and subjects
• Make multiple pages using the same interface
• Test mobile and web version
• Color schema check.
• 3D effects on website interactive features

Project Set Up

Follow these steps to set up and work on your project:

_ Watch this walkthrough video: https://youtu.be/P2Y9W29kcjs

• Create a forked copy of this project.
• Add PM as a collaborator on GitHub.
• Clone your OWN version of the repository (Not Lambda's by mistake!).
• Create a new branch on the clone: git checkout -b <firstName-lastName>.
• Implement the project on the <firstName-lastName> branch, committing changes regularly.
• Push commits: git push origin <firstName-lastName>.

Follow these steps to download your template and start the project:

• Navigate here: https://html5up.net/

• You make pick any template you like. Here are some good choices for a portfolio:

  • https://html5up.net/story
  • https://html5up.net/solid-state
  • https://html5up.net/miniport
  • https://html5up.net/dimension

• Unzip the code and copy the site to your git repository that you just set up

  • Note that we won't be utilizing the pre processed CSS structure, you can just ignore any folder with LESS or SASS (SCSS) in it.

• Work on the MVP requirements listed below

Follow these steps for completing your project after your MVP is completed:

• Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's Repo). Please don't merge your own pull request
• Add your Project Manager as a Reviewer on the Pull-request
• PM then will count the HW as done by merging the branch back into master.

MVP Requirements

• Study the code base and identify both responsive units and where media queries were used. Take notes on anything that confuses you or interesting things you find. Share this information in your standup meeting with your group
• Customize the template to you
  • Update the title tag match your name
  • Update the place holder content throughout the template to your information
    • Some templates are much larger than others, you don't need to fill in every little div with information, just try to get the site representing you and your work
    • You can use sites like https://www.pexels.com/ for free images to fill in place holders
    • Showcase projects you have worked on by providing some information and links to your git hub projects
• Implement proper attribution: Attribution is required under the creative commons license that came with the website files you downloaded. Be sure to provide attribution somewhere in the site. The templates should already come with attribution found in most footers but double check to be sure.
• Host your website for the world to see. Follow the instructions found here https://pages.github.com/. Once you have hosted your web page, share it for your peers to see. This is not a small feat!

Stretch

• Study the JavaScript used in your template and see if you can tweak any of the behavior to see how it works
• Download another template and see if you can get the CSS preprocessor working on the project