heathervanwinckle.com - student project

heathervanwinckle.comeze.com (hosted for free for now with 000webhost.com)

I'm using this course to do an overhaul of my art website so that I can finally have the fully customizeed layout I want instead of using a generic template.


Project #1heathervanwinckle.com - image 1 - student project

When I submitted it for validation, I had an error for not including <meta charset="utf-8">. Will need to go back to understand what this is and why and when it is used, and hopefully this will be given further explanation. Corrected it, and it passed, but did mention a warning "Using Experimental Feature:HTML Conformance Checker". May require further explanation on this.

Site is visually unappealing so far and far away from what I want, but barebones structure is starting to be put in place. 

Project #2

Adding table, form and iframe wasn't problematic. Looking forward to customizing the form, as this will be useful for my contact page. Wanting to add a blog, and thinking about how to integrate wordpress blog into my site. What's the best method? 


After listening to the Q&A #1, I found out how to approach two different things I would like to implement on my website. The first is integrating a blog into my website. I've used wordpress before, and Jonathan mentioned it being a solid option, so I figured out how to do this, which has perhaps been the hardest thing I've tackled with this site so far. First you have to download wordpress, then paste the files into a folder in your website folder named "blog". Then you have to install wordpress. This was the tricky part, and while I didn't encounter problems, I had to do some minor decoding of the language to understand what the instructions were telling me to do. In any event, here are instructions for installing wordpress which worked perfectly for me: http://codex.wordpress.org/Installing_WordPress .

The second thing I need to still research is adding an image carousel or slider to my website. As it is an art portfolio, I will be uploading lots of images that I'd like to display in a clean, but accessible way. I will be looking into galleria.io and jquery to search for image carousels and will update if I find anything I'd like to use. 

Update: haven't fully been satified with galleries and image sliders that I've seen so far. Will come back to this after I have a better grasp of CSS, so that I can perhaps adjust my needs in some other way. If all else fails, learn javascript or hire someone to make what I want? 

Project #3

I think I'm understanding the reasoning behind what we're doing, despite not seeing much in the way of physical changes on the live website. I've, in any event, made my code look a lot cleaner and easier to view. 


  • Will have to go back and re-learn what articles are, and if I need them for my site. 
  • What is a good, free video converter I can use to convert mp4 to ogv?

Project #4

Still need to re-examine everything I've done. While there are no errors, I don't know if I'm writing the most efficient css. Looks a lot better and a lot closer to my vision, even though there's miles still to go. CSS seems initially very satisfying, but will take me time to figure out all the rules about the rules, and when its best to use class selector vs. descendent or pseudo. After spending some time trying to learn CSS and dreamweaver on my own, this approach is already more successful. Happy at this point. Having minor problems with links - couldn't get the comma to compound rules with links and links visited, but doing it individually worked out. Maybe I should re-watch the lessons for this milestone. 


  • Why would one page react differently to stylesheet info than the other pages? SOLVED

I feel like I was getting ahead of my abilites and the course content because I got so excited about the development progress. Took a step back and decided to watch the tutorials once through to know the best method for what I want to do before tackling it, in order to save some efforts and time. 

One thing I want to do is have a wordpress blog that I can integrate with my website. I've found a tutorial for that, that I hope I'll be able to handle after module 4. Doesn't seem too hard, but mentions a lot about php, which I don't really know about at all. 

In preparation from Project #5, I mapped out my main layout so that I can size the boxes with percentages that will hopefully make everything look good no matter what resolution is viewing my site. 

heathervanwinckle.com - image 2 - student project

Haven't yet found a javascript image gallery/slider that I'm completely excited about, but I will put something in as a placeholder first, then maybe hire out for that, or learn to hack up a solution on my own. 

Project #5

Finally making some headway on this project. I'm much more comfortable with css now, but I find myself spending hours messing things up, coming up with better ways to do things, then executing, failing, retrying, etc. I changed a table I made into a bunch of DIVs, and what really helped was tinker.io to work everything out. 

***Major Issue ***

I have a sidebar for quick links to my work projects, but I had to set the height to zero in order for the formatting of the divs to the right to not have height problems. This is fine until it comes to the pages where the sidebar is longer than the content area, and then it cuts off, off the wrapper. What am I doing wrong here and how can I fix it? 

Question: Is there a way to equi-space my navigation headers? I can't justify if its only 1 line long. SOLVED - See solution here.

Updated website

heathervanwinckle.com - image 3 - student project

More Progress!

I've got my three main pages (saving blog for after I've got everything else under control) styled as I would like and I'm happy with what's happening in general. That's not to say that I still don't have some lingering problems. 


  • My sidebar (called <aside>) seems to mess up the formatting of the divs next to it. The div immediately to the right of it seems to inherit it's height from the content of the aside, rather than getting its height from the div's own contents. The solution I've found to get around that is to specify the <aside>'s height as zero. This works, until the div in the right is shorter than the aside, and then my <section> just collapses. I feel like I must be misplacing a class="clearfix" somewhere, but I can't figure it out, after hours of trying. Basically its like this:


   <aside>aside content</aside>


          <div parent>

                     <div child>content 1</div>

                     <div child>content 2 </div>





Div children are formatted to fit in the parent, and the aside floats left with a specified width to allow the section to come up. Any thoughts?

  • This seems to happen randomly, but currently one of my pages, which has the same exact sidebar code as my others, displays links in a different color than the other pages. I know something in the html of this messed up page must be triggering that, but I can't figure it out.  SOLVED
  • I would like to not have to use buttons on my nav. bar. I just want words, but I want the text to appear justified across the allotted space. I'm not using pixels to define the space (rather, I'm using %s), but justifying across one line, so I've read, does nothing. I've seen some solutions online, but none that I can get to work for me. What I have right now aligns the left one to the left and the right to the right, and the middle links just get centered. It looks off, btu its the best I could do so far. SOLVED

Update on Problems

I seem to have solved my sidebar text color issue. I'm sure it had something to do with hierarchy, but I imagined to fix it with more div tags! 

The sidebar in the wrapper situation is still unresolved, and has started to come up as a potential issue when I do my responsive layouts for different devices. I thought I could just ignore it, but maybe not? 

Still no ideas on my nav bar. SOLVED

Project #6

This exercise seemed fine, but I don't find myself with too much use for advanced positioning at the moment. Perhaps I'll utilize it in my responsive layout later. I did like adding custom icons for facebook, wordpress, twitter and youtube using this technique, and that was a great help. Maybe there'll be more to come in advanced positioning later. 

Project #7

Working on this. Its going ok, but now I have to come up with a solution for the narrow width screens, like an iphone, when it comes to my sidebar which would generally take up all the space. I may just get rid of it for smaller devices, as the information there can all be accessed through a nav bar link.

The ipad set to portrait display is leaving me with a lot of blank space at the bottom of my web pages. I wonder here if I should consider moving the sidebar as well, making the right section of my page larger, and moving the sidebar information down below. It feels like I have to come up with a totally new layout from what my normal website is now, and that's a bit frustrating. 

Questions for the Future

  • I am going to have around 30 pages when its all said and done, and I've been doing some research on using php for the header, sidebar and footer, so that when I update that stuff, I only have to do it once and I don't have to do it on ALL of the pages. Will this mess up responsive layout? 
  • iPhone5 - 1136 x 640 resolution - how can this be treated? Currently it takes the regular the regular computer monitor screen solution, and it looks messed up. Can I specify 1136 width and 640 height to create a specific iphone 5 solution? 

Next Issue

I've been giving the social bar relative positioning, which has been effective with the responsive layout, but of course it's created a new issue I have to resolve. When the social bar gets moved to a relative position, the div that its in keeps the empty space where the social bar was and leaves a big gap in my page. Here's an image showing when the bar sits underneath on the left, and then when it moves due to a width increase. heathervanwinckle.com - image 4 - student projectHow do I get rid of that space? I tried giving the social bar a higher z-index, thinking it would take it out from the clearfix consideration that I think it the culprit here, but that didn't work. Should I fully remove the social bar from any other div? This is only a problem for viewing widths between 480 and 500px I think, but I'd still like for those viewers to have a clean layout to view. 

Project #7 Update

I decided a better way for me to handle the media queries issues was to make ranges (using min-width and max-width) so that I could switch to the next size up on the pixel that started to have a problem. I did this because after doing the initial media queries as taught in the class, I checked it on my phone, which has a 540x960 screen or something, and everything was messed up. The best tip I can suggest is do the inital max-width media queries, then get a pixel ruler (like ruul) and run through your pages. See what becomes a problem and record the pixel width at that point to set a range for which the media query works and just change the min and max as appropriate. This worked really well for me, just clicking my main pages, sliding my window to be wider or narrower, and watching when images and divs would run into problems and look weird. 

I seem to have found a hack that works for my navigation bar, which I wanted justified. See it here. I put the code in tinker.io and then customized it for myself, then dropped it into my stylesheet. No problems. 

Things Left to Do on The Website

  • Correct the social bar issueCHECK
  • Link the form to something and get familiar with php (Project #8)CHECK
  • Find a javascript image gallery and learn how to implement itCHECK
  • Create project pagesCHECK
  • Look into using php for making my header, sidebar, and footer so that html pages can just access 3 stylesheets with that information on it, meaning that if I make changes to them, I'll only have to do it one time, versus over 30 times for every sheet. I've found a tutorial for this here.
  • How to add a favicon? CHECK

Update on Progress

I got the mailer.php set up and everything's cool there. Check

I created, but then subsequently deleted project pages, as I found a better approach to this. Check

Have not had success with my attempts to add a favicon. I know its possible, but maybe I need to have two different file types for different browsers? I think I read something about that. 

Have not tackled the social bar issue. 

I tried to use that tutorial, but did not have success on my first pass at php. Might have to try this again in the future. Not as pressing anymore, since I've changed my strategy and no longer have 31 html files, but maybe 9 now. 

I figured out how to set up a jquery image gallery using Galleriffic. It was complicated and took a lot of time, but I was able to customize the positioning and sizes of the divs that it uses, get rid of the slideshow function (so you have to click to each image instead of it automatically switching), and customize its look to match my website's appearance. I had some trouble with too large of images, and they wouldn't display in the slideshow area, but popped down where the thumbnail scroll I placed was. I ended up resizing all of my images so that I could set up the gallery to fit 620px width, or 500px height, and that worked, after I got all the padding and margins worked out. So I set up an image folder and then, within there I made a thumbnail folder for images that were 75x75px and made thumbnails for all my images, and a fullsize folder for the large, original image files that I have. Keeping the names the same for all 3 file formats was helpful when doing the tedious work of writing the individual list items for each image, and I still haven't finished my caption areas (120+ images takes a long time). This side project takes TONS of time, particularly as I don't know anything about jquery and had to kind of parse through a lot of new information just to get started, but I'm very happy I did it now. If you'd like to see my unfinished image galleries, click here.

There are a few problems now though. For one, I need to figured out how to get videos to load in the gallery, as I have images and videos I want to show. I don't know if loading the video files is the best way, or embedding youtube videos is better. I don't really know how to do both, and I may have to go back and re-look at iframes and adding videos in our lessons. The other problem is that this creates problems for responsive layouts. The gallery looks perfect on my pc screen, but once I resize the window, formatting goes crazy. Also, I'm not even sure that this will be visible on an iPad or other small devices. Might I have to come up with a completely different solution for non-computer screen viewports?? Yowsers. 

--> Oh, it seems like its not that big of a deal, at least on an iPad mini. Looks like I'll just have to resize the caption div, and maybe adjust the number of thumbnails that are visible on a page. I think I can handle that. 

--> favicon check! I was using a .ico file, but I converted it to a .png, and then added the element below to my <head> section in my html files (updating the href to link to the png file obviously). 

<link rel="icon" type="image/png" href="http://example.com/myicon.png">

Wordpress Blog

I was saving this until after the course because I thought it was going to be pretty daunting, but I got bored with copying and pasting content to my image galleries and thought I'd take a stab at giving my wordrpress blog the same layout as my website. The first tutorial I looked at was overwhelming to me and my non-existant knowledge of php, but I found a youtube video that made it super simple. It taught me how to create my own theme based on my website's index.html file and the style.css sheet I've been working on for my website. 2 hours and a few message boards llater, I've fot a functioning blog that blends seemlessly with the rest of my website. I also managed to add some wordpress widgets, then by  viewing the page source after they were dropped on, I found their class tags, and was able to style them within my style.css page to make them more what I had in mind. I had no idea it would  come together so quickly. Going to bed a website victor tonight! 

--> Social Bar issue from above - Changed the positioning of the div below the social bar to relative and top:-50px. I noticed there was just a weird blank space between the divs when I gave them background colours (which is the most helpful thing to do when resolving coding issues btw). Now that all works. The only responsive layout work I need to do now is on my jquery gallery, which is a whole other bag of worms as it turns out. 

Final Final To Do List

  • Find a solution to showing videos in the gallery (galleriffic does not support this)
  • Gallery needs responsive layout work
  • Complete captions for gallery
  • Need to add a comment section on blog where people can post on my posts. Need to read, then understand this