Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Web Design Tutorials

Web design tutorials to help improve your skills at Web Design. Tutorial discussion topics & Tutorial requests are also within this forum.

  1. Changing hair color in Photoshop(Brunette to BLONDE, not Brown )

    • 7 replies
    • 5.3k views
  2. Some of us usually put a button with rounded corners on our web pages. We take the whole button as an image and insert it into the page. But if we have many such buttons, then the size of the page is increased a lot. So, here I have a trick by which you can cut small parts of the button and let CSS generate the whole button. I’ve cut the four small rounded corners into four different images and taken them as a background in four divs and applied certain styles to those divs. So, the HTML goes like this. <body> <div class = "container"> <div class = "cornerbl"><div class = "cornerbr"><div class = "cornertl"><div class = "corne…

    • 0 replies
    • 3.9k views
  3. Introduction When using PHP generated pages, there is one common problem: it is dynamically loaded using set variables. For example, if you want to read the latest blog entry on a blog with any URL structure, you will find http://arandomblog.com/?entry=1. This structure is easy to use but when it comes to search engine and general public use, you’ll find that it will not have many benefits. Instead, you’ll often find http://arandomblog/randomentry/. Why? It looks more professional, it is more usable, and it will give you keyword placement. There is an easy way to do so using .htaccess mod_rewrite. However, for whatever reasons, be it free hosting or server limitat…

    • 0 replies
    • 34.6k views
  4. This is a Tutorial Written by me. I have posted it at my blog too -: Shauryadeep.com Lets Start with the Tutorial People may criticize a design by saying that it's bad. Well, what is a bad design? Different People have different tastes, for example one person can call a design great but the second person may not like the design or even may hate it. So, if one needs to make it as for mass appeal, one should do the basic things right. Things to do to avoid the comment bad design Navigation and Headings Navigation plays an important part in design. - : Selected Page - A Navigation vertical or horizontal always show the page selected a bit different t…

    • 3 replies
    • 4.5k views
  5. Started by Jo 90,

    Guide by: Nathan Payne Have you noticed that when you create a web page that is small than the window firefox wont display scroll bars? well, that has caused alot of problems, because when you change pages from, let's say the home page to contacts page the scroll bars may come up and knock the full layout off. I have noticed this a few time and by adding a simple few lines to your CSS this will be solved. before creating the layout put this in the CSS CODE /*Forces scroll bar on in firefox*/ html { height:100%; margin-bottom: 1px; } It forces the scroll bars on therefore the layout will not change from one page to another

    • 31 replies
    • 8.2k views
  6. With this tutorial I'll show you people how you can easily protect your php files with just a couple lines of code! Here it goes: for example: you do not want people to be able to go directly to your config.php file. lets assume your config.php file looks like this: <?PHP $chost = "localhost"; $cusername = "YOURUSERNAME"; $cpassword = "YOURPASSWORD"; $cdb = "YOURDATABASE"; mysql_connect($chost, $cusername, $cpassword); mysql_select_db($cdb); ?> That is just a basic mysql connect script. now to protect it! We are adding 4 lines of code, take a look: <?PHP if(!defined("SESAMOPEN")){ echo "What are you doing here? You're not allowed to be here…

    • 10 replies
    • 6.2k views
  7. We had a client who required his sign up process to integrate with his PHPBB3 forum. Now, although there was plenty of documentation for doing this with the previous version we could get no help for V3. We have put up the source code that we used incase anyone else should need to do the same thing in the future: Tutorial for integrating with PHPBB3 Forum System Hope it stops someone else form wasting as much time as we had to!

    • 1 reply
    • 4.9k views
  8. Started by BenG,

    Heres how to draw an iPod in 30 minutes or less. Final image created: First off, find a picture of the iPod you want to use. I found a picture of an iPod nano (its hiny and hence appealed to me. Here it is. You can use this if you like. Open it in photoshop. (Copy, then goto File > New, and ok. Then press CTRL + V to paste). Now select #010005 as your foreground color. Click the Rounded rectangle tool. Do this by pressing ‘U’ once. Then under Files > Edit > and the rest of the menu bar, you will see this toolbar. Enter required settings so it matches my toolbar. Ok, you may now create the shape. Do this by clicking at point 1 …

    • 3 replies
    • 7.1k views
  9. Started by Fault,

    Hey guys Thought i'd make my php navigation into a small tut, as every website needs to contain a php navigation script, there are just so many. Now, i know a lot of php navigations use switch. This means that the switch calls upon a case from a list of cases to switch between. This can save you a lot of files, as pages are kept lower. However, if you have a website that requires lots of pages, and you dont want to have to constantly update your navigation.php file or whatever, then take a look at this: So, with all php, we need to start with our opening and closing tags: <?php ?> Right, now we need some variables in the code: <?php $folde…

    • 15 replies
    • 7.1k views
  10. Started by Jo 90,

    Topic Creator: php_Penguin Not so much a tutorial as code snippet, but quite useful in itself. It is especially helpful when creating XML-based applications, such as AJAX, because you can simply specify something using the standard PHP array model rather than printing/outputting XML. Heres the code: function array_to_xml( $input, $level) { $pre = "\n".str_repeat(" ",($level)); foreach( $input as $key=>$child ) { if( is_array( $child ) ) { $output .= $pre."<".$key.">".array_to_xml($child, $level+1).$pre."</".$key.">"; } else { $output .= $pre."<".$key.">".$child."</".$key.">"; } } return $output; } As you can see it uses…

    • 0 replies
    • 3.9k views
  11. Started by Sazzad,

    After noticing the success of my php includes tutorial and the feedback received, I decided to create a thread for those who have some knowledge in php to teach those who are new. I soon hope that with the help of users of this forum, to create a e-book with everyones tutorials. Please share your talent in php by creating a tutorial. php date() Tutorial by: Sazzad Hossain php date() - the PHP date() function formats a timestamp to a more readable date and time. The first parameter in the date() function specifies how to format the date/time. It uses letters to represent date and time formats. Some of these formats include: Important Full Date and Time: …

    • 0 replies
    • 4.1k views
  12. Started by Sazzad,

    Title: Php Includes Language: php, XHTML, CSS Skill Level: Basic Author: Sazzad Hossain & RIT webDEV club Demo: http://webdev.netnub.com/template.php Authors Note: PHP is perhaps one of the simplest language you can earn that can grant you soo much freedom with your site. In addition, it can also make your life a lot easier. If you are a webdesigner you will see why. First of all, php has many functions that allow you to substitute for a long list of codes. For example, in this tutorial I will talk about php include. What php include basically does is takes an entire page of coding from one location and brings it to the page where you requested it. So if I hav…

    • 14 replies
    • 8.5k views
  13. The lesson teaches a straightforward way of websites color schemes creation. If you have a ready website mockup and what you need is to change its color scheme, here are some hints for you. There is an easy way of changing the color scheme of a website with the help of adjustment layers. Here’s how it works.

  14. Started by Sazzad,

    Title: qTip Effect Language: Javascript, CSS, XHTML Author: Craig Erskine, Sazzad Hossain Demo: http://solardreamstudios.com/_img/learn/css/qtip/qTip.html Authors Note: This effect will allow you to have a very cool hover effect using javascript and css. The javascript is the core file that causes the hover effect while the css file controls the layout of it. The credit goes out mostly to Craig Erskine, who explained the steps/procedures very clearly. Without his help I wouldn't be able to post this tutorial 1. Create a file and call it qTip.js and insert the following code var qTipTag = "a"; //Which tag do you want to qTip-ize? Keep it lowercase!// var qTi…

  15. Started by Jo 90,

    Article creator: Sebastian Sulinski This tutorial will explain you how to make your button (link) in the navigation active when you are on a specific page. Let's begin with the layout. Create five pages: index.php about_us.php services.php testimonials.php contact_us.php Copy and paste the following structure in all of them - I'm just creating navigation for our pages because that's the only thing which we will need here: <div id="nav"> <ul id="mainnav"> <li><a href="index.php" title="Welcome page">Welcome</a></li> <li><a href="about_us.php" title="About us page">About us</a></li> <l…

  16. Started by Jo 90,

    Article creator php_penguin When creating a website, It is occasionally asked of you to use more than one language - for example English and French. Unfortunately this presents some logistical problems, as the French for "homepage" is not "homepage" (it is actually Accueil or directly, Foyer biper). So how do we handle this? Well we need to set up a dictionary / library and get the information from there. First we need to select a language/format for the library. A text based library works just as well, without the bother of editing a database. There are 3 realistic choices here: XML Benefits: - semi-native & very easy read format for PHP - easily …

    • 2 replies
    • 4.3k views
  17. Started by php_penguin,

    This isn't gonna be a huge tutorial, rather it's just meant to explain a method which isn't initially obvious to newbies When developing an application, it is often useful to be able to add features easily without disturbing the rest of the site or control panel area. The concept of a "plugin" fits nicely into this stage, the idea being that it is installed, activated, and it works without fuss. To do this requires a couple of somewhat odd ideas, which sometimes take a while to grasp. These are: * each section is entirely seperate as code. * each section shares common ground * each section can have an effect on another section .. also .. * the underlying cod…

  18. Ok, thought I would jot down some notes from a little project I did a while back. In an ecommerce site, especially clothing, there is often more than one color related to a product. Sometimes showing images of all the different colours is impractical. This is what a colour swatch is for. Heres an example from M&S: http://www.marksandspencer.com/gp/browse.h...=A2BO0OYVBKIQJM So what do you need to make a swatch? [*]PHP 4 / 5 [*]GD library So really, the first stage is to figure out what variables we want to take in... Heres the obvious one: the colour Now, also width and height... and for a special twist, border colour So here we start the scr…

  19. I'v been asked a few times how to create funky/urban edges to a website to give it a street feel. A really easy method I use is using the "Alien Skin" effect in Fireworks within a few mouse clicks you can create a urban edge effect in seconds. Step 1 Open Fireworks and create a blank canvas at around 800 pixels and drawn a simple rectangle using the vector square tool inside at about 600-700 pixels. Step 2 Click on the square you created and select Filters (Effects) > Alien Skin > Edges Step 3 Select the torn paper effect from the drop down menu within the Alien Skin pop-up. Then adjust the dials at the top till you have the required look yo…

    • 5 replies
    • 6.5k views
  20. In this tutorial you will learn how to make a new page using php, this is great for cms's as users can add a new page online and edit it online. A tutorial on how to edit online is found here first of all we need to create a simple xhtml form, like so: <form method="post" action="<?=$PHP_SELF?>"> Page name: <input name="page_name" size="27" /> <select name="page_extension"> <option value=".php">.php</option> </select> <br /><input type="submit" name="add_new_page" value="Add Page" /> </form> This is pretty simple so far. Line 1: starts the form and defines what it does Line 2: An input field…

    • 3 replies
    • 4.8k views
  21. Started by gold killer,

    Recently I have been reading posts where people have been saying one thing is better or worse than another so i thought id do this tutorial to clarify these things and also teach you some little tricks in the process... Echo, Print, die and Return These are all similar in the fact that they display text if entered into them. That can be done like so: echo 'text'; print 'text'; return 'text'; die 'text'; So what do these all do? Echo is very similar to print with the way it acts but the only difference is that it returns text and a value of NULL / FALSE. eg1 <?php function Test() { echo 'This is a test'; } $tryTest = Test(); //Define a variable …

    • 9 replies
    • 5.5k views

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.