Create a Sleek, Corporate Web Design (HD Video Series: Day 4)
videos

Create a Sleek, Corporate Web Design (HD Video Series: Day 4)

on Apr 19th 2011 with 106 comments
Tutorial Details
  • Tutorial Topic: PSD > HTML Conversion
  • Languages Used: HTML / CSS / jQuery
  • Estimated Time: 2 hours

Final Product What You'll Be Creating

Download Source Files
Demo View It Online
This entry is part 4 of 4 in the series Sleek, Corporate Web Design

Sleek, Corporate Web Design

In this video series, we’re going to walk you through how to create a sleek, professional web design for a corporate website. This is part 4 of a 4 part series – we’ll also be finishing the support pages and coding the entire thing in HTML/CSS!

About this Tutorial Series

Adi Purdila is going to walk us through an entire project – from design to coding – all here on Webdesigntuts this week! In Day 1, he showed us how to set the basic framework for the design as well as how to actually lay out the homepage. In Day 2, he showed us how to create the various support pages (contact, gallery, etc.). In Day 3, he began the coding process by showing us how to convert the entire Photoshop design to a fully working HTML/CSS site. Today is Day 4, so we’ll be finishing up the project and adding the final polish!

Just to give you a general roadmap for the coding, here’s the basic outline of what we’ll be doing over these final 2 days:

  • Day 3, Part1: Creating the markup for the homepage
  • Day 3, Part2: Slicing the PSD and writing the CSS file (i divided this into Hour1 and Hour2)
  • Day 3, Part3: (cont.) Slicing the PSD and writing the CSS file (I divided this into Hour1 and Hour2)
  • Day 4, Part1: Slider installation, customization and some very basic jQuery functions
  • Day 4, Part2: Creating and styling the secondary pages (Services, Gallery and Contact) + browser checking

Also, I’d like to share some links for some of the resources I’ll be using today:

Let’s get started!

Day Four: PSD to HTML Conversion

In this next series of videos, Adi is going to walk through the conversion process from PSD to HTML/CSS. Be sure to flip over to HD viewing if you have the bandwidth!

Day Four: Part 1

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes, YouTube or blip.tv!

Day Four: Part 2

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes, YouTube or blip.tv!

About the Author

“Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs.

If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.” – Adi

Series Navigation<< Create a Sleek, Corporate Web Design (HD Video Series: Day 3)

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • sparcorel

    Part 1 & 2 are from day 3 …

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Patched :) Thanks for the note!

  • Serge

    Top notch stuff guys!!! Love it.

    Will it also include some basic PHP? Stuff like php include can be very useful.

  • Murat

    I think its the best tutorial which i ever seen in webdesigntuts, Congratz

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Thanks Murat! We’ll be bringing a lot more of these complete series in the future :)

  • Philipkav

    Very well done, great series!.

    I think optimisation would be the next step, maybe optimise for “yslow”? At least on the design end, HTTP requests etc.

    Sprites?

    I think “Paul Irish’s – HTML5bolierplate” is an essential piece of kit to include in your projects, it comes bundled with “Apanta” which also supports “zen coding”.

    I would also add PIE.js to that list for rendering CSS3 in ie6,7,8 etc.

    Anyway great tutorials, def premium quality, I picked up a few new tips :)

  • DJ

    Sorry, I must disagree with Murat’s assessment – the first two days in this series had audio recorded so badly that it was painful to listen too – even for those of us who really were interested in the subject. I commented on the problem and you graciously accepted the critique to the point that day 3 and 4 now sound like you use a professional recording studio. However, that was all there was to it – now, they are basically audio only as you fill the screen with wasted white space to the extend that no typed character is even readable. I saw absolutely no attempt to zoom into the typing area. Easy fixes; but, even after the deficiency was mentioned in comments – day 4 is no better. Completely a waste of time if you like to actually see what you are spending the band width to download. A full screen, 10,000 foot view is much more tolerable when doing photoshop page images – the lack of clarity was still there but didn’t impact as much as when you start wanting us to actually SEE the characters you are typing. This, for all intents and purposes, was basically a Podcast. Adi’s bio claim’s an attention to detail – it seems to me visibility and hearibility are pretty big “details.” Did you not even notice it when it was proofed-read’ or reviewed for publication?

    On the other hand, Murat did say the “best” on this [b]particular[/b] Envato blog – that may be true because to my knowledge this is the “first and only one” of this type on this blog to date; here-to-fore they have all been on Nettuts+ – [where I still maintain they belong, especially if they are going to be this much of an effort to continually overlook the deficiencies.]

    @Adi… I do have a question for Adi – you used H1 tags on the heading within the slider which were NOT the main heading of the page and would be considered by all definitions a “menu.” I realize that heading tags are totally at the discretion of the programmer but at least the Index page is normally set to reflect the blog title in the H1 tag. It seems that more logically the MENU items would be set to H2 tags – or is this some SEO ranking thing that you’ve discovered where Google gives more ranking to H1 tags. [Or frankly, you may have actually used H2 and only SAID you were using H1. I couldn't tell because I couldn't actually see anything but blur; yes, even at full screen.]

    @Brandon… It occurs to me that overall “webdesign” tutorials could (should) include discussions about the overall “correct” and “legal” way to design pages for SEO – I don’t see much of anything on the web about best (and proper) practices – only disclaimers about “don’t do this” or “google will penalize” or “send us money and we’ll get you to the top” or “see the Google webmasters page.” Perhaps this is a way of expanding the webdesign-tuts franchise without the need to duplicate a sister site and thereby dilute the Envato branding.

    Additionally, it seems to me that a 15 minute “audition” tape would be in order before committing to accept screencasts from an author – that would help an editor do his job of screening/reading, improving and maintaining literary/technical standards of material before they are published; and authors from putting in so much effort before they had corrected the basic technical issues. I’m sorry if I’m sounding a bit crusty but this was something that I really wanted to see and understand – which is why I tried to watch it through instead of just pulling the plug; and, why I’m writing a dissertation instead of just removing the blog from my bookmarks and moving on. And, actually, I’m sorry for using this type of public medium for such a specific comment; but, I don’t see any alternative option that you give.

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Thanks for the feedback DJ – as this is the first major video series that we’ve done, there’s obviously going to be some things that we’ll learn from and do better at in the future. The critical response is welcome and appreciated though :)

    • klicks

      @DJ I have to disagree with you — the video is really quite sharp. Are you sure you have HD turned on? I could easily see all of the settings Adi was using at a quick glance (font size, line height, layer names, measurements in the info pane, etc). If the flash player wasnt working for you you could always download the source files — here’s Day 1: Part 1 to get you started http://blip.tv/file/4998812?filename=Webdesigntuts-CorporaScreencastPartI336.mov. Seems like you’re acting like a stick in the mud for a technical issue that has nothing to do with the author… also if you’re an SEO wizard I would love to see an in-depth article here on the site — maybe you could share with the rest of us?

      @Adi I thought this series was fantastic! I’m surprised that this was your first tutorial, you seem to have a really good grasp on instructing and leading people through your process. Besides learning new shortcuts, new techniques and a few “aha!” moments with PS and CSS, I really enjoyed the in-depth look at such an organized and efficient workflow. Thank you very much for your generosity with your time, knowledge, and skills!

      • Dougieladd

        Agreed. I thought it was excellent. Highly professional and educational… I even enjoyed the doorbell interruption :) The instruction did not assume too much, and each step was explained clearly. I’ve been watching the “Magazine” tutorial Adi does too… also very good. Can’t wait for his next venture :)

  • Pingback: Create a Sleek, Corporate Web Design (HD Video Series: Day 4) | Shadowtek | Hosting and Design Solutions

  • http://chimunthu.com EBEL

    have you think on puting this videos in itunes, as nettuts does??

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      We’ll likely start doing that in the next month Ebel – thanks for the note!

  • Rensa

    Love it! I learned so much ! :P

  • Pingback: Create a Sleek Corporate Web Design – HD Video tutorials on Webdesign Tuts+ | AdiPurdila.com – The portfolio of graphic designer Adrian Purdila

  • http://www.atnsystems.com Anne

    More things learn for this article thanks.

  • Richard

    Will there be a link to download whole page in zip with images, js etc. or just that preview page? cause there is some bug with the slider script and when you move to the last slide, paragraph text and button text disappears :D, and also no logo in the copyright div so i guess its old version or what.. I dont want to use this anywhere just to play around with the code :)

    • http://www.adipurdila.com AdiPurdila
      Author

      Hey Richard,

      Thanks for pointing out that slider issue. From what I can tell, it’s a Cufon problem, i’ll look into it. As for the files used in the actual screencast, you can get those at: http://themes.adipurdila.com/CorporaScreencastFiles.zip.

      I didn’t realize that the final version didn’t have the logo in the footer, it’s a been a huge amount of work making the screencast, I guess I missed it.

      Adi

      • Richard

        Thanks for reply Adi :)
        Btw thanks for these tutorials, they are really great i learned many new things in photoshop but also in CSS, hope there will be more tutorials from you here, thanks again for the work you put into this :)

        • http://www.adipurdila.com AdiPurdila
          Author

          Yep, there will be more tuts from me, I got the virus now :D

          • Richard

            Can’t wait :) and hope you fix it soon :D

  • Pingback: Create a Sleek Corporate Web Design (HD Video Series: Day 4 … | Translogistics

  • Philipkav

    @DJ:
    That was a little harsh dont you think? I for one did not see a problem with the quality of the video’s, ok they may not have been HD but def viewable. I agree the recordings(sound) were a little off but I am im sure many others would agree, Adi got his point(s) accross!

    Your making asumptions about SEO and the like, tags? the tags is just as important. If you look around you will see many people use one instance of the tag, they use it for the logo ie: and set h1{text-indent: -9999px;}. ALL the tags should be used! Your offering advise about subject’s you dont understand, otherwise you would not be seeking the tutorials..

    Im sure if you do manage to get a HD copy of the tutorial, you will agree they are quite fine indeed!

  • Ravex

    Nice.
    I just finish day 2,
    Can you make tutorial about making layout for professional service about video games and how to code it?

  • Sagar Ranpise

    Awesome Stuff!!! Thanks a lot! I hope to see wordpress convertion tut of this html files!

  • http://www.adipurdila.com AdiPurdila
    Author

    @DJ:

    I understand your frustration and I’ll try to address some of the things you mentioned.

    1. About the zooming in the text part.

    You must understand that I’ve spent over 5 hours recording these screencasts in the same day, and then about double that time to render them in full HD so you won’t get blurry text. I’m sorry if you can’t get the full HD version for various reasons, I will switch to 720p in my next screencasts so they’ll be viewable by more people without issues.

    So, having rendered the videos in the same day and uploaded, it was just too much time spent going back and re-editing the videos (to add zooming) and then spend another 4-5 hours re-rendering them.

    2. About the SEO part

    I’m not an SEO expert. I know a few basic things, sure, but not so many that I can go ahead and teach people on how to code a page for SEO. Will I improve on that? Of course I will, that’s why we’re all here, right? To learn from each other. And with each tutorial and each mistake, we take the good and move forward with it and we make sure we don’t make the same mistakes again.

    3. About my bio

    “Adi’s bio claim’s an attention to detail – it seems to me visibility and hearibility are pretty big “details.”"
    You’re referring to technical issues here. This being my first screencast ever, wouldn’t you think that some mistakes are just inevitable?

    I do pay attention to detail, you can check the PSD for the theme. I think it looks pretty neat.

    Now, I never pretended to be a guru of some kind. With these tutorials I’m offering my knowledge and I’m showing you MY way of doing stuff. It’s not the good way or the bad way. I’m letting you guys decide that. If you find the tuts useful and you learn new stuff that help you, then I guess it’s the good way. For some of you which are frustrated about the video quality, I guess it’s the bad way, but I’ll work on that so everyone’s happy in the end.

    Thanks!

    • Dougieladd

      Well, I for one found it very informative and educational (especially in an ever developing medium like ours). Like I said earlier, I even enjoyed the doorbell interruption. You can’t please everyone all the time, you just have to do your best and your best is good enough for me. I’m not a complete novice, but I have picked up a few great tips from you (namely the helper classes) and even some photoshop (and I consider myself pretty clued up on that one :)

      As far as sound quality is concerned as long as I’m able to hear and understand you that’s good enough for me. You could have a dog panting in the back ground or your grandmother shout you for your dinner for all I care… to me that all adds to the screencast. We’re all human after all, and we’re not all perfect, even if *some of us* think we are… (not mentioning any names here you understand :)

      Very well done, I’m looking forward to more. Maybe you should do a tut on css/html tips “quick tips” like the centering css classes… being able to re-use classes is an important point I think… reduces div-itis.

      Great. Nice Work!

  • Law

    Fantastic tuts.
    Is there not a link to download the video easily like for Day 1 and Day 2?

    Many thanks

  • Pingback: » “Webdesign tuts+” – E-Learning in Eigenregie… - Webtures…

  • OWalters

    Great Series, its actually funny how much you can learn from a few videos.. many people may argue that 4day 2 part tutorials may become tedious or boring but for me i find it educates me more than 10 minute pointless videos on youutube or other tutorial sites.. it was viewable and i really dont know why people are complaining ?? full screen HD i could see the code plain and yes there were moments when you said words with ”S” in and was quite painful for the ear but its not worth complaining about when your taking time and effort to make a video with such value, cant wait for more videos from you. Great Job !

  • Proof

    In google chrome, the subscribe text box gets a border on focus. This should fix it:

    form#subscribeForm input[type="text"]:focus { outline: none; }

    • http://www.adipurdila.com AdiPurdila
      Author

      Thanks, that’s good advice :)

  • Aldrin

    This is great! any chance to include WordPress for the future tutorials?

    • http://www.adipurdila.com AdiPurdila
      Author

      Not sure about WP yet, but I’ll think about it.

  • Paul Welding

    @DJ: If you can produce a better tutorial, lets see it?

    I had no problems at all reading the text at full screen, and this has been a really useful tutorial for me.

    I have learned new techniques in both Photoshop and CSS, and these will become part of my daily coding / designing habits.

    Who cares if the audio was not 24bit crystal clear in the first 2 tuts, didn’t stop me following them? I think your just being pedantic for the sake of it!

    @AdiPurdila: Keep up the good work, I have really enjoyed this tutorial and look forward to more from you.

  • Paul Welding

    I have noticed a bug with the slider.

    If you keep clicking the next button, or the prev button in sequence, you get a slide with no text in it?

    To replicate, keep clicking the Next button when you reach the last slide clicking the next button once again results in a slide with no text? Same if you keep clicking the prev button.

    This is the same on both your online demo and my own local version. Any ideas how to fix it?

    • http://www.adipurdila.com AdiPurdila
      Author

      Hi Paul and thanks for the kind words :)

      I know there’s a problem with the slider, one of the readers here mentioned it earlier. It seems it’s a Cufon issue and I’m still trying to fix it. Once I have it done i’ll post an update here.

      Thanks,
      Adi

      • http://ojschofield.co.uk Oliver Schofield

        Any progress on the slider issue yet, Adi?
        Thanks for the tutorial!

  • Ian

    Pretty sweet video series. Picked up a few neat little tricks, nothing major but useful just the same. Two quick points though:

    1. The slider buttons are way to light against the background. Might be my monitor because it does do some funny things with colors form time to time but in the live demo I can barely see them. You have to remember to design for everyone. Someone with an eyesight problem might not see them at all.

    2. There seems to be a bug in the slider. When scrolling through upon return back to the first slide only the image image, the button and the text “or find out more” is visible. When I scrolled over again everything else appeared mid scroll. Could be an issue with my PC only but who knows.

    Besides those 2 very small points everything else was awesome. I’m pretty confident in my HTML/CSS abilities and have only recently began using Photoshop to lay out pages (usually just do it on the fly). It’s nice to see the way I was slicing up PSD’s was the way you’re supposed to do it (I figured I was taking a million extra steps and there was some magic way to do it all at once). Some suggestions for future tuts might be some layouts with overflowing Images and some more CSS3 techniques (div:before,:after, transforms, transitions things of that nature). Great job, keep ‘em coming.

    • http://www.adipurdila.com AdiPurdila
      Author

      Thanks for your comment Ian and for the suggestions, they help me alot. I am getting more familiar with CSS3 and HTML5 at the moment so I’ll definitely use those in my next tutorial. It’s gonna be exciting, I can’t wait to start working on it :D

  • Tristan

    Hey Adi,

    just wanted to say a big thanks for creating the video series! :) While having some prior knowledge of HTML and CSS, this series really helped me show how to go from a psd to html effectively, what steps to take, and how to slice the PSD easily. So again, a big thanks for creating the video, its extremely helpful for people at the beginner/intermediate stage.

    Also, I really like your style of teaching. I’ve watched a lot of tuts lately where the person had a really boring voice or was a bit tense. But this is not the case with you, which makes it soo much easier to watch an hour long tut ;)

    I hope to see a lot more tutorials from you in the future! Keep up the great work :)

  • Muhammad

    Great tutorial m8 learned a lot as a beginner in coding but i have a question about the rounded corners especially when adding a background to a div that has a rounded corner.

    the rounded corner is still there but maybe because of the height of the background the rounded corners is not shown well.

    is that me who got this problem or it is everyone? is there any way to fix this??

    regards

    • http://www.adipurdila.com AdiPurdila
      Author

      Can you give me a link so I’d have a closer look?

      Thanks!

      • Muhammad

        sorry i don’t have a site so you can watch it but you can get my files from this link

        http://hotfile.com/dl/115909569/8238c82/Corpora.rar.html

        i was talking about the sidebar navigation in the services page

        i have found a way to fix this but i don’t know if this is the right way to do it or not

        i just moved the background from #sidebarheading to #sidebaritem which has the rounded corner style and it worked

  • Polly

    Hi,
    I just want to thank you for this awesome tutorial series. Do you plan to do a tutorial on how to create a wordpress theme from this?
    Thanks again, I’m looking for more tuts from you guys :-)

  • http://twitter.com/mpunktm Mato

    The tutorial is very good.

  • Sam

    Thank you for a great tutorial!!

    Your style of teaching is much clearer and easier to listen to than a lot of other tutorials out there, and with only a bit of CSS and HTML knowledge this has helped me a lot!

    It would be good to see a complete website design and coding tutorial for an online store with a shopping basket etc.

  • http://twitter.com/gemmaweirs Gemma

    Well, thanks for cutting out people who have hearing difficulties. I am deaf so these videos are useless to me because I can’t find a closed captions/subtitling option. If Think Vitamin can include closed captions on their videos for their members, then why can’t you? Not happy at all, Envato are meant to be a reputable company, yet they don’t even make their videos fully accessible.

    • http://www.adipurdila.com AdiPurdila
      Author

      Hi Gemma,

      I’m considering the captioning situation and I’ll definitely address that in my next tutorial videos.

      Question for everyone with hearing disabilities: Would you prefer captioning with the videos or a more compressed written tutorial with images? Let me know so everyone can have the best learning experience.

      Thanks :)
      Adi

  • http://www.adipurdila.com AdiPurdila
    Author

    Hey everyone,

    I know about the slider issue and I’ve contacted the people behind the jCarousel Lite and explained the problem so I’ll keep you updated. In the meantime, if you want a quick fix, you can add “circular: false” to the jQuery init statement in functions.js and that will prevent the slider going to the first or last slide when you’ve reached the end. So, the code should look like this:

    $(“#mainSlider”).jCarouselLite({
    btnNext: “#sliderBtnNext”,
    btnPrev: “#sliderBtnPrev”,
    visible: 1,
    circular: false
    });

    Or, you can simply use another slider that might not have these issues. My choice was purely for demo purposes, but I have every intention of getting this fixed:)

    Thanks and sorry for the inconvenience!
    Adi

  • Casey

    Is there a faster way to load the images you want displayed in the slider? The page take longer to load with multiple photos. Any advice?

    • http://www.adipurdila.com AdiPurdila
      Author

      What kind of images do you use? Do you have a link?

      Thanks!

    • Casey

      They are just .jpg’s in my html file. Didn’t know if you could make them load faster or make a progress bar of some sort.

      • http://www.adipurdila.com AdiPurdila
        Author

        You can add an image preloader to the images. That will show a loading icon until the image is fully loaded and once that happens it will fade in the actual image, it’s pretty cool.

        Have a look at: http://themes.adipurdila.com/conversion-html/ , most of the images there use preloading.

        This doesn’t load them faster, it just hides that visible loading of an image and shows a loader icon instead. If you wanna make them load faster you need to optimize them for web. Try http://www.smushit.com/ysmush.it/ , it works pretty good.

  • G

    @DJ

    I agree with Paul Welding, If you can produce a better tutorial, lets see it?

    Being so over critical of Adi’s first attempt is a really quite harsh. I personally didn’t have any problems reading or hearing the screen casts so it must be something to do with your computer.

    And DJ I would also like to point out that you’ve probably put off a lot of other contributors attempting future tutorials. Thanks.

    Adi – I thought it was a brilliant tutorial, keep up the good work.

    Now DJ lets see what you can come up with so I can heavily scrutinise your work.

    • http://www.adipurdila.com AdiPurdila
      Author

      Thanks G!

  • Gary

    Adi,

    What can I say?

    Your tutorial is brilliant. I would never have guessed this is your first.

    I have been using PS for years and I use align horizontal all the time for my text. I never thought to use it to center elements within a background. I use my trusty calculator and do the maths. What an idiot I have been.

    You even make the slicing and dicing look so easy (it is, but I did it the long way – notice “did” – I will be using your way in future). No more crop tool…….

    After watching the first two in the series, I was waiting with baited breath for the others. An AWESOME conclusion to the series.

    I had one of those “aha” moments while watching your videos. I now know how to save so much time in my work.

    Thanks again Adi and I am so looking forward to your next tutorials. Keep me posted.

    Kind Regards,

    Gary

    • http://www.adipurdila.com AdiPurdila
      Author

      I’m so glad you liked the tuts Gary and I’m glad something good came out of them and people actually learn new stuff that improve their workflow.

      I know what you mean about “aha” moments, I’ve had a few recently when I learned some new PS tricks that make my life much easier.

  • CWaud

    Really great series, would like to thank you for your hard work. So many useful tips and explanations of what commands actually do. Look forward to watching your next series(if you do one).

    Congratulations and thank you.

  • Daniel

    I had some “Aha” moments as well. Thanks so much for these. Picture and audio was fine and I had no issues whatsoever. As far as DJ goes he’s an idiot and a troll. I hope his comments don’t discourage you and others from doing these. I would also like to jump on the “make this into a wordpress theme” bandwagon.

    Again many thanks!

    Daniel

  • Gaurav Nanda

    hey, great series Adi. I really learned a lot. Thanks. And one question i want to ask is, is there any coda like editor for Windows? I really liked how you were writing scripts with classes and ids, and that was converted into html. I use notepad++ by the way. Thanks again.

  • manraj

    Adi,
    A quick question,please correct me if im wrong.You paused the Day Three: Part 3 video on 44mins to figure out a problem you were having while styling the a.redButton, what happened there? I saw you trying to set the height for the element but you were not successful,is it because [a] is an inline element and you can’t specify a width or height for inline elements? You solved by giving it some padding,do u think u could have solved it by giving the element a “display:block” ? I dont what the result would have been but was just wondering the reason you didnt specify “display:block” .I thought you were going to explain what caused the problem and some justification to you solution.

  • Manoj Thomas

    @Brandon Jones Thanks a lot for posting work like Adi has done,I hope you will include more of his video tutorials in the near future.I have learnt a lot from his style of coding which also helped me to clear some issues I had about certain areas in CSS.

    Is it possible for you guys to include similar video tutorials from other talented webdesigners/webdevelopers like Adi?

    @Adi Thank you so much for the effort and time you have taken to put this videos together. Hope you do more video on other stuff like WordPress.Keep it up mate!!

  • Pingback: My Stream » Create a Sleek, Corporate Web Design (HD Video Series: Day 4)

  • Jeff

    Great Tutorial, thank you so much Adi, much appreciated
    Jeff

  • David

    I just finished the fourth part and I wanted to thank you for your time, and your share. I learned a lot with these tutorials.

    Thanks again!.

  • Mike Dallo

    First off, thank you so much Adi for this tutorial series. It’s boosted my understanding tremendously, and has been the best tutorial for me so far in my learning web design.

    With that being said, I’m stumped! I’m trying to implement the jquery slider (js and jquery are brand new to me), and it’s not working right. I think I’m doing everything you’re saying, and I’ve proofread my code over and over, and the slider still isn’t activating. Here’s my html:

    my functions.js file:

    $(document).ready(function(){
    // Activate the slider
    $(“#mainSlider”).jCarouselLite({
    btnNext: “#sliderBtnNext”,
    btnPrev: “#sliderBtnPrev”,
    visible: 1
    });
    });

    and the jCarouselLite.js file is pasted directly from the link you provided. There has to be something I’m missing! Any help (from anyone that reads this even!) would be greatly appreciated. I’d love to finish this! :D

    • Mike Dallo

      Woops, made a newbie mistake in pasting my html code. Let’s see if this works:

      The asterisks are intentional!

  • Rosh

    Superb Tutorial Adi,

    I think that’s one of the best tuts on the web. Look forward to watching your next series maybe HTML5 and CSS3. I learned a lot with these tutorials.

    Thanks once again for your time and work

  • Urban

    Thank you very much … it was impressive, good job
    can’t wait for ur future posts ;)

  • Marcel Nortje

    Hi Ad i,

    Thanks for a very clear and informative tutorial. You are a very patient man!

    One thing – I’m experiencing exactly the same problem as Mike Dallo. So much so that I have re-done the slider part several times just to make sure that I have not missed anything. I’m at my wits end with this as I have no idea where to look to start to begin to solve the problem.

    Any help with this would be hugely appreciated.

    m.

  • Marcel

    Ha! Success!

    Got it all working! I discovered that my button div’s were named incorrectly in my functions.js script. Now that I’ve done this a few times it seems simple … until the next time :)

    m.

  • luis fraga

    hello everyone

    i am new width css and html, so i hope to get some help of you.
    I had done every step in the tutorial but i can’t put the submit button to work in the contact page. Can’t find a nice css and php tutorial to do the contact form using this template.

    please someone help me

    thanks to all

    by the way great tutorial

    sorry for my bad english

  • FranklY

    wooooow your explanation sounds perfect ; u give it enough time and efforts ; thank you so much for these pretty tuts psd,HTML CSS and jQuerry; see u sooner with some new other tutorials . Many 10xxxxxxxxxxxxxxxxxxxxxxxx Man ! Welldone :)

  • eminiarts

    Hey.. really nice tutorial…I watched all of the parts and learned some new techniques.
    But i can’t watch part 1.. it says: “Sorry, we’re unable to play this tutorial.“

    • eminiarts

      Ok, now it works! I don’t know why it didn’t play. Thanks!

  • Ron

    Hi Adi!

    It seems that the video: Day Four: Part 1 is not available for me in HD. I can start the video in normal quality, but when I press the HD button, the HD button disappears and it loads the normal quality video again.

    Am I the only one with this problem? Does anyone have any idea how to fix this? I’ve also tried to view it in different browsers.

    The 2nd video: Day Four: Part 2 works ok for me, also in HD.

    Kind regards,

    Ron

    • http://www.adipurdila.com AdiPurdila
      Author

      Hmm, weird. I’ll ring Brandon and tell him about this. Thanks for pointing it out Ron :)

      • Mr.Thanh

        I also got this problem, no HD version available, pls fix it.

        Great tutorial btw, thanks a lot :D

  • http://www.targuit.com.br Guilherme Mello

    Very nice!
    Really helpfull.

    Thx

  • Nicky

    Great video tutorials!

    You explain very well to those who are un-familiar with ‘coding’ and as an amateur myself, I learnt a lot just from these tutorials and a better understanding on cutting/css/js and so on, so many thanks for that.

    I’m so thrilled I came across this website, I hope it’s possible to see more video tutorials on cutting .psd’s/coding. Keep up the GREAT work. Keep Well :)

    -Nicky

  • Anders

    Probably its just me….but I am having problems with the slider. Both when I do it myself, but I checked in your available files, and same problem here.

    When I reach 1 full cycle in the slider, it will start again (as intended) but this time with no text on the first slide? Then when I click to continue to slide 2 again, then I can briefly get a glimse at the missing text.

    Is it me? or the browser? or?

    Thanks for all the help

  • Anders

    me again…..just browsed the wall of text in here, and saw someone already asking about it – sry for the time!

  • Anders

    Hi again,

    Can anyone give hints on how to actually write the code for the email form? I mean, how do you get the button to actually work :)

  • http://www.rahulparekh.in/ Rahul Parekh

    I was facing a problem with one of my codes and came to this template to see how it should’ve been coded and noticed the bug’s present over here too! Haha.

    Basically, the container divs don’t stretch horizontally when someone reduces the browser window size. Here’s a screenshot of the problem.

    Problem’s happening with every container.

    Here’s a screenshot:
    http://www.rahulparekh.in/temp/container-bug.png

    One fix I’ve found is having the respective background images on the center container too but that’s not the best option. So, anyway, hopefully someone can find a fix as google has been of no help.

  • RoEy

    Hi AdiPurdila!

    Just wanted to say I thought your tutorial was superb. I’ve taken a lot of notes and I have learned a lot. I can’t wait to start doing some of my own work now.

    Many thanks again,

    RoEy

  • PHILIP SAVARIRAYAN

    Hey adi thanks man, great tutorial, where can i find some more of your tutorials and can you also go in depth into cross browser compatibility Ie6. thanks man.

    Im doing a site using this template for a client is that ok, but changing sum stuff like adding gallery/lighbox? cheers. love your design tho.

  • Adam

    Great tutorial – very well explained.

    The jquery stuff was a little quick for me, and I’m having an issue with the mouseover function.

    I have my code exactly like yours, my images are named (in this format) image.png and imageover.png.

    When I mouseover the regular image, it changes to a broken image and doesn’t change back to the regular image when the mouse is gone. Any ideas why it isn’t changing to the imageover.png??

    Thanks!

    Adam

  • http://robguilfoyle.com Rob Guilfoyle

    Adi, is there somewhere I can purchase this template, I have made it into a wordpress theme and would like to use it for a friends business (I am making no money on this btw) I just wanted to make it into a wordpress theme and then my buddy asked me if he could use it for his site.

    BTW Great, tutorial.

  • http://www.markvoortmedia.nl Webdesign

    Great tutorial! Very interesting and very useful.

  • Hamid

    Brilliant Series.tbh i watched alot of Lynda series but i never saw any tutorial like this.

    btw, atm(11/16/2011 when i refreshing(more than 2 time) index web page,everything get destroyed, its because of Photoshop stuffs u guess.
    GC,IE9 Getting problem with it at all but about FF it ok only time when you clicking on the index in the Sources Files and after that if you refresh the page for more than 3 time you see the page getting problem.

    anyway i want and i hope to see some good series like this, goodluck.

  • Adam

    Hey,

    First, I’d like to say that this is a great tutorial series. Your instructions are clear, logical, and well paced.

    One question I do have: I know the slider isn’t your code, but is there a simple way to make the slider automatically rotate through the slides?

    Thanks for the great tut!

    Adam

  • aaron

    Fantastic Tutorial!!!!

    Keep them coming!!!

  • Robert Smith

    Amazing tutorial! Keep them coming!

  • White

    Thank you!

  • niklas

    dont’t load these two scripts and the slider issue is solved

  • http://www.joelsscoreheaven.com/ Joel

    Great tutorial learned so much.

    I was wondering if it was possible if you could make a tutorial on how to make this theme ‘WordPress friendly’.

  • http://robguilfoyle.com Rob

    In the nav menu if you change the Padding-Right:30px; on the span tag, to being Padding-Left:30px; on the LI you will find the link does consistenly push the background graphic to the right. Without that you if the sub-text is not long enough it will let the bg bar get right next to the link text.

  • Tobi

    hello,

    thanks for the great tutorial :)

    has anybody found a fix for the slider issue
    after the fourth slide it does not go back to the first one :(

    ahen i add circular:false the slider doesn’t work at all

    $(document).ready(function(){
    // Activate the main slider
    $(“#mainSlider”).jCarouselLite({
    btnNext: “#sliderBtnNext”,
    btnPrev: “#sliderBtnPrev”,
    visible: 1
    circular: false
    });

  • marc

    Wanted to say this whole tutorial set has been extremely helpful so far and I am learning a lot! I got to part4 day 1 and when I try to switch over to HD I just get a spinning wheel, the HD video never loads. I tried working with the regular video but the quality is too low to be useful. Is there some way I could get that video in HD?

    • http://www.snaptin.com Ian Yates

      Hi marc, great that you’re enjoying the series so much :)

      I’m not sure what’s going on with the first video in this post (all is well according to Blip) but I’ve posted download links for the mp4 files, plus a reminder of how to subscribe to Webdesigntuts+ screencasts via iTunes. Hope that helps!

      • marc

        Hi Ian, thank you for posting that for me, seems to be working fine now. You guys at webdesign tuts+ are on top of things, thanks again!

  • Pingback: SLaPP – Aktueller Stand « Studentenblogs DDI@UPB

  • Kam

    Great tutorial!

    Just one thing about the slider I cant work out why the slider has a blank slide at the end. After slide 4 it has a weird slide. Is there a fix to this?

    Cheers

  • Sri

    Great Great tutorial for the beginners like me to understand very well about all the things. I just like to know about how to configure the contact form, if anyone fill the data and click submit that would reach to my mail box. If any idea please please teach to me. And email subscription as well. As the beginner i want to learn all this.

    Thanks in advance.

  • Jason

    Hi, nice tutorial!
    I try to get a dropdown menu working according to this tutorial http://www.red-team-design.com/css3-dropdown-menu, but whatever i’m trying it’s not showing up. Any tips or help on this? Thanks!

  • Julius Creation

    Hello Adi,

    First, thank you very much for this tutorial, impressive!

    Just want to ask how to auto slide the slider section?

    Thanks,
    Julius

  • Julius Creation

    Hello Again,

    I just did how jCarouselLite works :).

    Can you also make a tutorial how the subscribe and contact form works? I tried to research some tutorial but it doesn’t works. hoping you can do that as favor for me :)

    Again thanks, keep up the good work

    Julius

  • Misa

    Hello there .. tutorial is great,thanks alot!

    .. but i found some slide problem … in ie9 .. it works id firefox,chrome,opera but not ie9 ..

    the problem is that preview and next buttons don’t work .. and images are outside the slider container ..

    All other is great .. good tutorial,man! :)

  • caroline

    Hey Great tutorial covering a lot of aspects on the webdesign process but just as an option could you make a tutorial on how to publish the website after its done on the internet. It would be really helpful for beginners like myself

    thanks

  • LitePack

    LOVE the tutorials. Very sharp and clean design with many different directions someone’s creativity could take on their own.

    The only thing i think it is missing is while you are using a grid system would it be a huge leap to have the code so the site would display on mobile devices? Or would that be a significant change?

    Again that you for all of the hard work and solid information.

  • Maya

    Watched tutorials 1 and 2 so far – Awesome. Very clear and easy to follow the thought process! Look forward to the next tutorial – been looking for something like this for some time. Thank You Much for Sharing! I appreciate it! Extremely helpful ;)