51 lines
3.5 KiB
Markdown
51 lines
3.5 KiB
Markdown
# 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`
|
|
|
|
|
|
`skills.html`
|
|
|
|
|
|
`education.html`
|
|
|
|
|
|
`experience.html`
|
|
|
|
|
|
`interests.html`
|
|
|
|
|
|
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:
|
|
|
|
|
|
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: `<your-github-username>.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://<your-github-username>.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 `<nav>`, `<ul>`, and `<li>` for the navigation (hint: I created a similar one in the class). So, feel free to use new HTML elements if they make more sense now |