Hello Everyone,
I have come to realize that for me HTML/CSS is sometimes becoming a roadblock. I know the basics of HTML / CSS and I am able to more or less design simple webpages, use Bootstrap etc. But when it comes to for example making the HTML from a psd this is really hard and takes a lot of time.
I am looking for some more advanced tutorials for guys who know the basic and helping them to get more experienced.
Another example that might indicate the some of the troubles I encounter: I have created a tabform with 2 /3 tabs and a tab panel. Now the tab panel has a border. When a tab is selected (active) I want the border-bottom of the active tab to disappear. So at the end someone told me to move the border 1px down. After this I still had trouble to understand exactly how to do it. Turns out I had to make the tab panel: position:relative; top 1px I didn't have the insight to fix it this way.
Any advice is really much appreciated.
Back in the day before everyone wanted websites to be responsive, this was a lot easier. Setup some guides in PSD, slice the images, extract the colors and begin writing the html / css.
Now a days, I expect my designers to provide at least 2 versions of a site - 1 for mobile iOS and 1 full width desktop (generally around 1300px wide) - I'll figure out the break points in between for the array of android screen sizes and such.
My tips:
Practice, practice, practice! - it takes time to get good at slicing a PSD and turning it into html / css. Took me probably 5 or 6 sites to get really efficient at it and come up with a workflow. I've lost count now - have probably done 60-70 now. As anything else, it takes time to get good at.
Don't slice buttons, menu bars, backgrounds, etc... there are obviously exceptions to this, but any repeating colors in a menu bar, background, etc... get pure CSS. Buttons are generally CSS unless the designer did something really out there and I have no choice but to slice it. This really comes with experience and as you said, you struggled with a bit of CSS. I've been doing this for so long, I really don't have any tutorials for you to look at. Same for drop shadows - don't try to slice a drop shadow - if you can, use CSS.
Everything is a grid As you said, you've been playing with Bootstrap - everything uses a grid. Circles are masked areas in a grid, all divs can align to a grid, etc... Step back, look at the PSD, and place grid lines - start at the outside and work your way in. Small margin grid lines sometimes can't be avoided - this shows how good or bad the designer is. If elements are off by a few pixels, unless theres good reason for it, i'll push the element to the closest grid line (whatever looks best)
PSD slices help but sometimes, you just need to select, copy, new document, paste and trim it. Slices help in that you can name the slices, save for web and do save all slices. Throw out the garbage it generates and go from there.
Designers can be lazy, as programmers can be lazy I once has a PSD where everything was off by just 1 or 2px. It happens, but never take the designers word 100% and if you question them on it, they'll usually say "oh yeah, go ahead and move it over the 2px or whatever"
Fonts can be a pain We have web fonts now and most designers will use those - but learn what fonts are available as a web font, what looks good and if the designer uses something else, tell them it'll look better if they change it to this or that.
Stay away from apps or plugins that say "slice a PSD in 5 minutes flat!" they generate to much garbage and are a waste of time. Your goal is to take what you need from the PSD and write clean html / css. Not let some app that tries to cover everything do all that for you.
Eventually, if you do enough sites, you'll come up with some basic templates that'll help speed all of this up. Like I said, slicing a PSD is just another part of the process of building a site. Learning good html / css is apart of the game.
Rodrigo Garcia
Ninja man
My advice would be... try not to use Bootstrap. Why? Because bootstrap has predetermined classes and styles, that are the ones probably making your life imposible at the time of PSD translation. Try to make the grid once in a while, when you understand the logic behind a grid, you'll know when Bootstrap is useful and when is going to be a pain in the azz.
As @mgiambanco said, Practice, practice and practice... and when you've finished practicing, practice a bit more. Try learning from places like tutsplus, leveluptutorials, lynda.com, etc.
And to answer your problem, you didn't had to change the position nor top to make the border disappear, you could've just change the border size to 0 or make it transparent when :hover or :focus is on.