Thought I’d give a portfolio update, got the main layout going just have to write some content and put it in. Once I know exactly what is going into the lorem ipsum placeholder text, I’ll adjust the size of the slider.
Portfolio To-Do List
My design for my portfolio homepage is complete, so today I spent time figuring out the way I want my navigation to function. I found this useful resource that includes css3 (that degrades gracefully when not supported) the first example on this page is similar to how I want my navigation, except I flipped the arrow to be underneath and animate on hover as well as sped up the effect.
For my front page I also plan on having a content slider, and found this resource which comes really close to what I’m looking for and also has the same arrow based design as my navigation - so I can just change the look of the example.
So now that I have the major effects I have going on my site, I started figuring out how to layout my design using HTML/CSS because my design incorporates some 3D looking elements that will require some layered div tags.
Finishing up my portfolio design, should be working on starting to code this week.
This afternoon I worked on completing the final Photoshop image of my home page, almost there, I’m just resizing some elements to fit inside a grid layout. Once I get the homepage done it should be simple to adjust the layout for the different pages. I’m hoping to have final Photoshop files by the end of this week so I can start coding next week. I have some rounded elements in my page so I think I’ll have to look at some CSS3 to accomplish them without using images.
I spent time wire framing and figuring out how I want to display projects on my portfolio site. I’m deciding between some different JavaScript rollover effects and tool tips, and which one works best with my layout.
Today in portfolio we reviewed some CSS basics and did some troubleshooting. I can definitely see the benefit like faster load time by using CSS to achieve the same effect that you get from sliced images. This will be useful in creating our portfolio sites and too keep in mind when designing.
Element: Least specific way
<p>, <h1> etc
Class: is to use over and over in different elements
.whatever { color: red; }
ID: unique, only use once (don’t use same id tag more than once) mostly used for important layout changes like headers and footers
#thisthing { color: red; }
Contextual: means whatever CSS that is applied last is going to take precedent or it is sorted by the type of selectors. (least important to most = element, class, id)
div#header p.red a.pink span.orange {
color:red;
}
you can use the |important tag to make a certain tag the most important, good for troubleshooting
Background
body {
background: #82a473 url(../images/background.jpg) top left repeat-x;
}
SEO
put logo in <h1> tag to make it important as well as include an alt tag with search terms like alt=”Kokopellis Day Spa”
H1 Tags
certain tags have spacing by default so you have to set the h1 tags to spacing to 0
In today’s lab I worked on completing task list assignment, and spent time trying to figure out when I need to be hitting some major milestones in order to complete my portfolio on time.
Starting list of all the tasks I anticipate in creating my portfolio site. I also discussed with Stewart on how to achieve my portfolio I have planned, it looks like I can use wordpress, so I’m looking forward to learning how to use wordpress in my own designs.
Today in portfolio class we talked about options for portfolios and different social media avenues. We talked about weekly logs we would have to be completing for most of our classes this semester, and I started this tumblr for that purpose. The rest of the period was open, and Stewart showed a couple of us how to use Dreamweaver to connect to our web servers to work locally and remotely.
