[ad_1]
https://i.ytimg.com/vi/ZLry2tWz2WA/hqdefault.jpg
Hope you enjoyed this tutorial!
Oh and if you want to go in depth, check this guide out (more than 12k word ultimate guide).
PSD to HTML Tutorial: The Only Guide You Need in 2015 – http://www.1stwebdesigner.com/psd-to-html/
—
Applying CSS Styles
Now that we’re done marking up our HTML, it is time to overwrite the styling that Twitter Bootstrap has provided. What’s good with this is we will not be worrying anymore on the layout structure because Bootstrap already has done it for us by just adding the right classes for each division that we’ve markup in HTML. All we need to do now is to style the elements to match to our PSD design.
View the original article with working demo and resource files here: http://www.1stwebdesigner.com/psd-to-html/
—–
If you are enjoying these video series and are looking for more, we created The Ultimate 2015 Web Design Learning Course, where in 9 hours we will teach you how to Build Your Own WordPress Site – 100% Responsive & Flat – http://rockingcode.com/
You will learn how to build website from scratch in Photoshop, then convert PSD to HTML and CSS. Finally using Bootstrap magic, we will covert website to fully responsive and functional WordPress website.
We throw in some business lessons, interviews and many bonuses to amplify your learning and help you get some clients as well!
What you are waiting for? Take your skills to the next level right now with http://rockingcode.com/
Original source
28 responses to “Twitter Bootstrap Tutorial: Add Custom CSS To Website Layout [Part 5]”
pull-left or right replaced by float-left or float-right in Bootstrap 4
Big Thanks, Mate
I want this template for practice
I just noticed you put a margin-top on the "btn" class at 54:30, now if it's used on other pages, it may have an undesirable look… perhaps it might be better if it's specific only to the "process" class. Just saying. But thanks for the very detailed tutorial. I really appreciate it. 🙂
the margins on the left and right side of the whole content in the body doesn't look same as in psd, what is the easy way to fix it?
mine i think is not responsve. like in the last part of this video.
My style.css is not displaying in FireFox or IE…not sure if I've missed something in the tutorial. Can anyone help?
A great and helpful tutorial. Thanks
sooo good!
Its full of knowledge but spent enough time on it please reduce spending much time on …….
I understand why "bootstrap" is popular frame, in this video.
can i get the psd file ?
Thank you
pro! subscribed and liked! trying to learn how to make a website for selling my music online. this has been helpfull. hope i can make my own, although it will never be that good ahah
Truly you are web Guru for me!
Great tutorial. Thanks!
Can anyone guide me to a link in which a complete website is made using XHTML as an example
Can't believe it got so many tips off this video 🙂 Thanks a lot. (Also downloaded the text editor you were using; My OCD is now satisfied that I don't have window explorer tabs open everywhere :D)
Anyone got the source code???
pt isn't the same as pixel
Thanks man ! You've no idea how much this helps !
Awesome tutorials. Thanks!
Follow me on twitter guys!
Nice! I learned a lot! Thanks Mike!!!!
25:00 awesome, now I can place my own fonts in my design. Thanks for teaching this.
you are the god man…,great and easy to follow , please do more…..!
You are not only a Design guru…,you are the Web guru….
You crazy singer!
Mike! Awesome job man! I am learning A LOT from watching you videos! Keep on doing your thing!