How to Design a Website 3
I continue showing how I design websites in this video tutorial. If you missed part one check it out first here How to Design a Website.
In this tutorial, I really focus in on how to correct errors in a web design. I look for errors using the Developer Tools inside of Google Chrome.
I also show you how I make a site work on Internet Explorer using the Adobe BrowserLab.
To download all of the code used in this tutorial and the theme click here Zipped Archive. It’s free 🙂
If you like free themes and tutorials, share this with others
Leave questions and comments below.
Till Next Time
thank you very mutch derek
You’re very welcome. I’m going to try to get my shopping cart tutorial out today, or tomorrow
Hi Derek,
I’ve been looking through your tutorials and they’re really great! Thanks. I’ve just started watching the Web Design and Programming tutorials. I was wondering though, how do you layout your folders and directories in your server? What files and folders do you put in the www public directory and what files and/or folders do you keep outside of the public folder and how do you access those files outside of the public directory? And also some tutorials about htaccess files, although you may have covered it and I’ve just not gotten there yet. I hope I’m making sense here. Thanks.
After designing hundreds of websites I learned your number one problem is security. For that reason, I started designing everything inside of WordPress. I’ve never felt as if WP has limited me from doing anything with a site and it has solved security issues.
For that reason I let WP handle the location for all files, images, etc. As you have probably noticed I have over 50 video tutorials dedicated to WordPress development. I hope they answer any questions you may have. If not, just leave me another comment. Thanks
Thanks Derek. Security is my main concern too. I’ll dig around some more and see what I find.
(Keep up the great work!)
thanks
mo
Thank you 🙂
Hey Derek
There is a little trick that I did not saw you using in your tutorials, and maybe I can teach you something (:
on the browser In the Development tool design window, you can click your mouse on the value of Css computed style
Then use the up and down arrows to change values of the Element (padding for example) and the element moves simultaneously.
Anyway, as usual excellent lessons
Thank you for pointing that out. Google Chrome doesn’t get enough attention because most developers love Firefox. I’m glad you like my videos. Many more are coming 🙂
Hi Derek;
Before I ask you a question and help, I thank you for you tutorials, I learned a lot from you. THANK YOU. And here is my question:
I was trying to set up “Coda Slider” into my WordPress Theme, and I have read any tutorials that I can possible find, such as:
http://www.gomediazine.com/tutorials/design-elegant-featured-content-slider-wordpress/
http://wordpress.org/support/topic/coda-slider-not-working-in-wordpress
http://wordpressmetablog.com/2011/07/wordpress-featured-content-slider/
http://css-tricks.com/889-creating-a-slick-auto-playing-featured-content-slider/
http://www.ndoherty.biz/demos/coda-slider/2.0/
But for the life of me, I cannot get it to work. That is why I need your help and advice. The code I am using I pasted at here http://pastebin.com/N7ZgWLEy
Thank you in advance for you help.
Hi, have you tried to copy and paste my code into WordPress like I did? What do you want the coda slider to look like? Have you seen all three of my tutorials. In them I make two different versions of it. It’s better to present me with a picture than code. It’s easier for me to work with that. Thanks Derek
Thank you Derek for your reply. Yes I did watch your video, but what I like to create is a slide show that take advantage of WordPress’s post thumbnails option, using code like so:
And here is the picture I want to achieve:
http://wordpressmetablog.com/wp-content/uploads/2011/07/1.png
I could not figure out what I am doing wrong and here is entire code I am using: http://pastebin.com/N7ZgWLEy
Thank you very much.
I show you how to create almost that exact design in Make Featured Content Slider. All you need to do is add the divs that contain the text into the html divs that are cycled through. The answer to what you seek can be found in that tutorial
Thank you.
You’re very welcome
hi there derek,
Ive seen a lot of your tuturials about how to to layout and how to design a website. But i have a question i like to ask you. For my new wordpress design want to make a header section thats stuck to the top of my window. And i want it to always stay on the top even when people scroll down on my site i want the header to be visible on the top. Like the new design twitter.com is using. But i cant get it done. I was hoping you could me whit this.
Just use absolute positioning on a div. That way it won’t move when the screen scrolls. Does that make sense?
It worked thanx alot
You’re welcome
Mister Derek,
I’ve learned a lot of things that I thought was only possible to achieve by Certain professional Web programming Devils, like designing a custom WordPress Theme from scratch.
But with the help of your video tutorials where you are being gentile enough “which all of us that I’m sure really appreciate” teach us as beginners some of your great webdesign and programming knowledge that you have in your possession to eliminate the limitation to do so.
I have a request for you if you have the time some time to teach us, how to design and program a “Mobile Version” of any website (Static and WordPress Dynamic) from scratch. Because I’ll need this particular skill in the near future.
If you could put this up together for us… that would be just awesome and educative to all of us who need to design and program a mobile-version of any of a persons website.
Thanks again for the great job and certainly keep up the good work!
Mike
Hi Mike, I’m glad you like the videos. Any site that is designed properly will show up on a mobile device. I am planning on making tutorials that focus on mobile specific websites. Because this is a newer technology I’m still working on perfecting everything. I have the beginnings of a custom app for mobile devices. I’ll get it done as soon as possible
And your way of teaching is indeed the best way comparing to all the other video tutorials that I’ve watched on the internet over the past years for education purposes btw.
Will be looking forward to it and thank you again very much for willing to help us out on this one too.
I’m very happy to help. I’m glad people like you have been sending me messages. It helps me figure out what to cover next
Hi Derek,
Quick question, how do you change your categories into that nice looking blue menu? The one on the left, defult sidebar. Also I am right in thinking that blue vertical menu is a WordPress category.
Or is it a custom menu?
I cover that in How to Design a Vertical Menu. Sorry the site is so messy, but I never expected to make so many videos
Hi it’s not messy, actually I was already looking at it before you replied back. Did a quick search on vertical menu. Great site I keep referring back to it. Great work Derek.
Hey Derek, its me again
I am thinking of redesign my client’s site about “boutonierres” and include an eshop (the site is in wordpress). But I dont want to loose the feel and have as much conversion (sales) as possible. What would be your advice? Should I go Worlwide and not stuck in greek audience?
Plz, contact me via email to explain further my questions, if you have the time, of course.
Thank you
Hi, I’d like to see the site, but it is pretty easy to use WP E-Commerce with most any site. You found my tutorial for that I saw WordPress Shopping Cart.
I have tracked sales trends based on site changes. Most of my sales come from referrals from Google Merchant. It is fabulous for getting business and why not it is free to use. I get as many products on there as possible in which I sell a specific product at the lowest price.
I have found that the more I junk up a site to make it look more like a chain the more sales have increased. The more banner ads the better! Keep the site as simple as possible. I made a site with really slick side scrolling and every new website trick you can imagine. It looked awesome, but nobody bought from it. People won’t part with their money if your site doesn’t look like the chains. Pretty much everything else is in my tutorial.
I hope that helps
Derek
thank you for the answer. the site I am talking is linked in my name. Be carefull, it would be all greek to you 🙂
I watched all of your tutorials, or I must say I studied them. I get the point and going to utilize your tips. What do you mean about “chain” site? gimme an example.
By chains I mean mainly American stores that sell garbage for cheap like Walmart, Home Depot, Lowes, K Mart, etc. They might sell terrible products, but their marketing seems to work better than anything else even though it is ugly.
These stores are every where in the US. I had to bend over backwards to buy a nicely made German weed whacker recently. Everyone in the US has been convinced to always buy whatever is cheap even if it breaks?
hey derek sir,
very nice videos on java , php , wordprss but can u zip all ur videos every lecture so we can download it at one all th video …it will be very asy for us and one more request sir can u upoad a video of creating ecoomerc wb site using wordprss right from scratch in on video
thanks if u reply soon
Thank you 🙂 I have you covered with the ecommerce request here WordPress Shopping Cart Tutorial. That is what I use and I haven’t had any problems with it in over a year.
As per providing videos for download, I can’t do that because my hosting company won’t allow my to handle files that large. YouTube provides the videos because I can’t provide files that large. They would take hours to view instead of seconds. I hope that makes sense