Your Portfolio

Your Portfolio

1. Open index.html from the portfolio folder. You should also open up portfolio.css from the portstyles folder.

2. Add div tags to divide your HTML as we just did in Procedures to Practice. Remember how we got the divs to work in step 16 of the Containers page? You need to apply the code the same way in your portfolio html pages for the divs to actually work! Just take the code from the red text to the red text (with red text included) from step 16 and place it into the end of your body tag in index.html.

3. Use portfolio.css to control those divs and create a similar layout as we just did in Procedures to Practice for the containers page by simply adding the code from layout.css (all the code but EXCLUDING THE BODY TAG). You already have CSS for your body in portfolio.css. As long as you add the rest of the CSS code from layout, once you have added the divs to your index.html page (step 16 in containers as noted above), they will appear the same way they did in containers.html but without the background images. I'm not concerned about your using background images on the portfolio side so if you want to keep your CSS code nice and clean, you can remove those image properties from the code. Or, you can just leave it.
   If you want to earn the remaining final few points for your Portfolio site, you can also add those same divs from the containers page to your employment.html and education.html simply by including the divs tags from step 16 into the end of your body content and then building the current content into those divs (just as you did on index.html). You don't have to do this on your contact page because you already have a table on that page. However, for anyone that goes to the trouble of formatting your table like the 'alttable' class example in the classes file, I might be willing to toss a couple extra points your way.

4. Now, your job in index.html (and education.html and employment.html if you have chosen to add the divs to all 3 pages) is take the already existing content and move it into the divs that are now in your body replacing the content from procedures. So, take the content you have and use the divs to lay it out. Then, to make it look different than the layout we used on the procedures site, go into the CSS and change the padding, margins, background colors, etc. to make things work a bit better. If it doesn't turn out perfectly, as long as you demonstrated that you attempted to edit the CSS all by yourself, you will get the majority of the credit for this module's Portfolio. No one student's will look the same. Just get things laid out using those divs and customize to your liking. If you want to change the CSS in a way that we haven't really done yet, try using our class resources such as W3schools.com and see what you can learn!. If this goes well for you on the index.html page, you may also apply the same divs and layout to employment and education to earn your final few available marks for the portfolio site.

You don't have to do it all from scratch. Copy and paste if that is easier for you.

Don't be afraid to reuse and recycle code.

Experiment and have fun. Once you have gotten your css to the point where you are happy, you are done with your web workshop!!!

Once you have completed these final portfolio instructions, you are ready to zip your project and submit to the my G-Drive (Google Drive Folder). You should zip your entire webworkshop folder, name the zip file 'Your_Last_Name_webworkshop', and submit to the my G-Drive (Google Drive Folder) before the deadline.