commit 64bb7e50087268c94d9e50251e506c7117583aed Author: darkicewolf50 Date: Wed Feb 8 22:03:40 2023 -0700 Website for ENSF 381 project, it was really fun to do 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 `