From 64bb7e50087268c94d9e50251e506c7117583aed Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Wed, 8 Feb 2023 22:03:40 -0700 Subject: [PATCH] Website for ENSF 381 project, it was really fun to do --- PAGE-ADDRESS.md | 10 +++ README.md | 51 ++++++++++++ contact.html | 33 ++++++++ education.html | 54 +++++++++++++ experience.html | 55 +++++++++++++ index.html | 55 +++++++++++++ interests.html | 42 ++++++++++ skills.html | 58 ++++++++++++++ style.css | 201 ++++++++++++++++++++++++++++++++++++++++++++++++ 9 files changed, 559 insertions(+) create mode 100644 PAGE-ADDRESS.md create mode 100644 README.md create mode 100644 contact.html create mode 100644 education.html create mode 100644 experience.html create mode 100644 index.html create mode 100644 interests.html create mode 100644 skills.html create mode 100644 style.css diff --git a/PAGE-ADDRESS.md b/PAGE-ADDRESS.md new file mode 100644 index 0000000..a1ffa6a --- /dev/null +++ b/PAGE-ADDRESS.md @@ -0,0 +1,10 @@ +Put the address to your website here. Use this markdown format: + +```bash +[display-name](link) +``` + +example: +```bash +[my website](https://rick-astley.github.io) +``` \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..f5bb28d --- /dev/null +++ b/README.md @@ -0,0 +1,51 @@ +# CSS +In this assignment, you will add styling to the webpages you created in the HTML assignment, and will **publish** the website using GitHub pages. + +--- + +## :foot: Steps +1. Add the HTML you wrote for the About page to the `index.html` file +1. Add the HTML you wrote for the Skills page to the `skills.html` file +1. Add the HTML you wrote for the Experience page to the `experience.html` file +1. Add the HTML you wrote for the Education page to the `education.html` file +1. Add the HTML you wrote for the Interests page to the `interests.html` file +1. Use Flexbox and other CSS properties to the `style.css` file so that your pages look like these: + + `index.html` + ![index-page](https://res.cloudinary.com/mkf/image/upload/v1674680283/ENSF-381/labs/flexbox/about_paafuq.png) + + `skills.html` + ![skills-page](https://res.cloudinary.com/mkf/image/upload/v1674680283/ENSF-381/labs/flexbox/skills_kudlfj.png) + + `education.html` + ![education-page](https://res.cloudinary.com/mkf/image/upload/v1674680283/ENSF-381/labs/flexbox/education_d9hixu.png) + + `experience.html` + ![experience-page](https://res.cloudinary.com/mkf/image/upload/v1674680283/ENSF-381/labs/flexbox/experience_zjyrux.png) + + `interests.html` + ![interests-page](https://res.cloudinary.com/mkf/image/upload/v1674680283/ENSF-381/labs/flexbox/interests_oa1rhh.png) + +1. Change the content so they represent you (your picture, your education, your experince, etc.) +1. Make sure all the links are working if applicable (for instance, you don't have to add a Pinterest page if you don't have one, but the link to your resume should work) +1. Make sure the website is responsive at least on Desktop and Tablet devices (use `@media` queries for this). Here's an example of how it should react to screen size changes: + ![responsive](https://res.cloudinary.com/mkf/image/upload/v1674681793/ENSF-381/labs/flexbox/responsive-small_nakjwj.gif) + +1. It doesn't matter what threshold you're using for the `@media` query (`800px`, `600px`, etc.) +1. Commit all the changes to the `main` branch and push to the remote repo (here) +1. Create a **public** repo under your **personal** GitHub account with this name: `.github.io` +1. Clone the repo to your local system; add all the files you have here to the project; commit to the `main` branch and push to the remote repo (your repo under your GitHub username) +1. Open up a browser and go to `https://.github.io`. You should be able to see the website (it may take a few minutes) +1. Add the address to your webpage to the [`PAGE-ADDRESS.md`](./PAGE-ADDRESS.md) file +1. Commit to the `main` branch and push to the remote repo (here) + +--- + +### :page_with_curl: Notes +- Make sure you save what you had for the About page in the `index.html` page. That's the default page that the browser shows when someone visits your website +- Make sure you alter the data on the examples so that the website represents you, not Rick +- Don't use any CSS frameworks for this assignment. You need to write all the CSS yourself +- Use Flexbox for the layout +- Feel free to make minor changes, such as changing colors and font-sizes +- Feel free to add new elements, data, etc. +- You may need to change some of the HTML elements you used in the HTML assignment. One example is the navigation menu. You probably choose a paragraph to do that. For this assignment, it makes more sense to use `