Skip to content

Commit

Permalink
Merge pull request #2124 from Techtonica/issue-2118
Browse files Browse the repository at this point in the history
Solving Issue 2118 - Auditing Portfolio Website & RESTful API Project Instructions
  • Loading branch information
ChasVanDav authored Dec 13, 2024
2 parents 8194a8e + 4588c3a commit c021a50
Show file tree
Hide file tree
Showing 5 changed files with 31 additions and 29 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 14 additions & 13 deletions projects/portfolio/portfolio-webpage-1.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@

### Primary Goals

To demonstrate understanding of the foundational topics covered in the first two weeks of Techtonica before diving further into the PERN stack.
To demonstrate understanding of the foundational topics covered in the first two weeks of Techtonica, before diving further into the PERN stack.

1. Create a new HTML/CSS webpage
2. Modify the contents of your page using DOM methods
3. Use common CSS rules to align content (left, right, center), modify colors, sizes of containers and text, etc.
3. Use common CSS rules to align content (left, right, center), modify colors, adjust sizes of containers and text, etc.
4. Get comfortable using CSS media queries

### Overview
Expand All @@ -31,7 +31,7 @@ Here's a list of example portfolios: https://github.com/HackathonHackers/persona

## Project Requirements:

You should write clear + informative commit messages for each commit and create pull requests once big/multiple changes have been made for your mentor to review and document it in the cohort shared sheet.
You should write clear & informative commit messages for each commit. Create pull requests once big/multiple changes have been made, for your mentor to review. Add the github link to your portfolio page to the cohort shared sheet ('Checklist items' tab).

- At least 15 commits
- Pro-tip: Get used to committing your code every single time a new line of code works
Expand Down Expand Up @@ -73,12 +73,13 @@ You should write clear + informative commit messages for each commit and create

**Create your project**

- [ ] Use bash to create a local portfolio-website directory. Use the command line to make an portfolio.html and an portfolio.css in the portfolio-website directory.
- [ ] Use the command line to change the names of portfolio.html and portfolio.css to index.html and index.css.
- [ ] Use the command line to make a gitignore file in your desktop directory and add at least one real unwanted file to the gitignore.
- [ ] Use the command line to move the gitignore file from your desktop directory to your portfolio-website directory.
- [ ] Using your command line, initialize a GitHub repo in portfolio-website.
- [ ] Create a remote repo for the project in your GitHub account.
- [ ] Use bash to create a local portfolio-website directory. Use the command line to make a portfolio.html file and a portfolio.css file in the portfolio-website directory.
- [ ] Use the command line to change the names of portfolio.html and portfolio.css to index.html and styles.css.
- [ ] Use the command line to make a .gitignore file in your desktop directory and add at least one real unwanted file to the .gitignore list.
- [ ] Use the command line to move the .gitignore file from your desktop directory to your portfolio-website directory.
- [ ] Using your command line, initialize a GitHub repo in portfolio-website directory.
- [ ] Create a portfolio-website remote repository on Github. (If your local directory already includes a README and .gitignore file, DO NOT opt for adding a README or .gitignore file in the Github initial set up. Otherwise, there will be a conflict when you attempt to push your commits.)
- ![A screenshot displaying options when creating a new repository in Github](Create-repo-no-README-no-.gitignore.png)
- [ ] Using your command line, add and commit your portfolio-website directory, and then do a git push.
- [ ] Open your portfolio-website directory in VS Code using your command line.
- [ ] Increase or decrease your VSCode text size before starting.
Expand All @@ -105,7 +106,7 @@ You should write clear + informative commit messages for each commit and create

**CSS**

- [ ] Link your index.css file to index.html.
- [ ] Link your styles.css file to index.html.
- [ ] Style your text using at least 3 different properties.
- [ ] Add and style a profile photo of yourself. Include a border.
- [ ] Have some info in a second column
Expand All @@ -124,16 +125,16 @@ You should write clear + informative commit messages for each commit and create

**README**

- [ ] Create a README.md file with your command line.
- [ ] Create a README.md file from your command line.
- [ ] Include relevant README content (what the project is, what open-source license it uses, how to install, etc.).
- [ ] Use markdown to organize your README.

---

### Recommended extension activity if time permits

- [ ] Move your portfolio project into its own repo instead of within the techtonica-assignments repo
- [ ] Go into the settings of your portfolio-website repo in GitHub and create a link for your live site
- [ ] Link to your live github.io site clickable on your README.
- [ ] Link to your live github.io site that is clickable on your README.

---

8 changes: 4 additions & 4 deletions projects/portfolio/portfolio-webpage-2.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,16 @@ A great portfolio page will be a valuable way to showcase your skills as you loo

## Project Requirements

- [ ] As you review the topic outline, commit your code in Git and push to GitHub after each bolded section. You should write clear + informative commit messages in command form ("Add line about technical skills") for each commit.
- [ ] As you review the topic outline, commit your code in Git and push to GitHub after each bolded section. You should write clear + informative commit messages in command form for each commit. For example: "Add line about technical skills".

---

### Part 1 - Incorporate SEO into your portfolio webpage

**Open latest version of Portfolio Project**

- [ ] Using the command line, practice pulling the latest version from your remote git repo.
- [ ] Open your portfolio project in your text editor application using your command line.
- [ ] Using the command line, practice pulling the latest version from your remote git repo. (If you have only worked on it locally, it will show no changes and that you are up to date)
- [ ] Open your portfolio project in your text editor application (e.g. VS Code) using your command line.

**Semantic HTML Tags**

Expand Down Expand Up @@ -70,4 +70,4 @@ A great portfolio page will be a valuable way to showcase your skills as you loo

### Frequently Asked Questions

- We can add common FAQs here. Open a GitHub issue or PR if you have any questions.
- We can add common FAQs here. Open a GitHub issue or PR if you have any questions.
4 changes: 2 additions & 2 deletions projects/portfolio/portfolio-webpage-3.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,11 @@ Put the finishing touches on your project by collaborating on documentation, rev

**Overview**

For this section, you should pair program with a partner the whole time. Complete this section with one partner's project, then the other's. Spend about 40 minutes on each person's project. Each person should spend 20 minutes "driving" and 20 minutes "navigating" for each of the projects.
For this section, you should pair program with a partner the whole time. Complete this section with your partner, taking turns reviewing each other's portfolios. Spend about 40 minutes on each person's project. For each portfolio review, be sure to spend 20 minutes "driving" and then 20 minutes "navigating".

**GitHub Collaboration**

- [ ] Fork your partner's project and use git to download it to your computer.
- [ ] Fork your partner's project and use git to download (clone) it to your computer.
- [ ] Create a new branch and make changes on that throughout this section, don't forget to commit each working change.
- [ ] For each change you make on your project or your partner's, practice making a PR for your changes rather than pushing it straight to main.

Expand Down
21 changes: 11 additions & 10 deletions projects/rest-api-project.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
# Project - Building a REST API with Node and Express in the Backend

A RESTful API is an Application Programming Interface (API) that uses HTTP verbs like GET, PUT, POST, and DELETE to operate data—also referred to as RESTful web services.
A RESTful API (also referred to as RESTful web services) is an Application Programming Interface (API) that uses HTTP verbs like GET, PUT, POST, and DELETE to access or manipulate data.

![Screenshoot](https://raw.githubusercontent.com/Yosolita1978/screenshoots/f2fdebc24a671f11394d8da1a9355a0ed4ce4a29/Week5/Screen%20Shot%202022-08-14%20at%201.58.39%20PM.png)

## 🍎 Learning Objective:

What you will learn with this project is how to organize the data that comes from your backend using a REST API. At this moment, you don't know how to connect a DB, so for now, we will work with data in a JSON. (see the file [books.js](https://github.com/Yosolita1978/RESTAPI-mybooks/blob/main/restapi/books.js))
What you will learn with this project is how to organize the data that comes from your backend using a REST API. At this moment, you don't know how to connect a DB, so for now, we will work with data in a JSON file. (see the file [books.js](https://github.com/Yosolita1978/RESTAPI-mybooks/blob/main/restapi/books.js))

Don't be afraid of the terminology. A REST API it's just a way of organizing data according to the CRUD operations
Don't be afraid of the terminology. A REST API is just a way of organizing data according to the CRUD operations
![Screenshoot](https://github.com/Yosolita1978/screenshoots/blob/main/Week5/Screen%20Shot%202022-08-14%20at%201.59.03%20PM.png?raw=true)

- In this project, you will build a REST API to manage books with Node.js and Express.
- You will use a simple JSON to store your <your data>. If you want to learn a little about how to use hardcode data in a project [follow this document](https://docs.google.com/document/d/12MFPDYC0LPKpzrYHZVmfs2NeCUfquNpEKCLKtDkcK4E/edit?usp=sharing)
- Remember to start the project by creating your new branch in your assignments repo. By Friday, you should push your commit up to GitHub and have a PR ready to go for your partner.
- In this project, you will build a REST API with Node.js and Express to manage a list of books.
- You will use a simple JSON to store <your data>. If you want to learn a little about how to use hardcoded data in a project [follow this document](https://docs.google.com/document/d/12MFPDYC0LPKpzrYHZVmfs2NeCUfquNpEKCLKtDkcK4E/edit?usp=sharing)
- Remember to start the project by creating a new branch in your assignments repo. By Friday, you should push your commit up to GitHub and have a PR ready to go for your partner.
- _**OPTIONAL BONUS: This project is focused on the backend. If you don't have anything in the frontend- it's ok. Your frontend could be just the JSON in the file.**_

**Hardcoded JSON Data File**
Expand All @@ -38,8 +38,8 @@ PostgreSQL querying involves interacting with a powerful relational database man

## 🛠️ Requirements:

- Change the information inside the file books.js to have your data (we suggest books, but if you want to use any other data, it's ok)
- Using Node and Express, create a GET router with a response that converts all <your data>using Json()
- Change the information inside the file books.js to have your own unique data (we suggest books, but if you want to use any other data, it's ok)
- Using Node and Express, create a GET router with a response that converts all <your data> using Json()
- Using that endpoint build a list of all your books in the backend(server side).
- Using Node and Express, create a route for each one of the verbs in CRUD operations in the backend. You don't need to have a frontend. You can test your API using Postman.
- _**Optional Bonus: Using that endpoint build a list of all your books in the frontend (client side). Note: you will need to make a GET request to bring all your information to the frontend too**_
Expand Down Expand Up @@ -91,9 +91,9 @@ Expectations:

### For creating the server (using Express)

1. Make a new directory for your project.
1. Make a new directory or folder for your project.
2. cd into your new directory
3. create a package.json with the command `npm init -y`
3. create a package.json file by running the command `npm init -y`
4. Make sure that the main file in your package is `index.js`. Create your index.js file (you can do that with `touch index.js` or directly on your VSCode)
5. Install all the dependencies with the commands:`npm i express` and `npm i cors`
6. Install the module nodemon in the dev server with the command `npm i nodemon --save-dev`
Expand Down Expand Up @@ -144,3 +144,4 @@ Postman will be used throughout the project to test API endpoints. Participants
## 🙋 Frequently Asked Questions

We can add common FAQs here. Open a PR if you have any questions.

0 comments on commit c021a50

Please sign in to comment.