Web Design Tutorials

As the name suggests, if you would like to submit a tutorial into a category that isn't currently listed in our tutorials section, then please feel free to make suggestion here. We will always welcome suggestions from all criteria inc Design, Photography, Programming etc. Many thanks.

Here is a list of links to tutorial websites which I have collected over the years and which have also been submitted by WDF members. Please note that this is not an exhaustive list, and will be updated periodically (last update 19.12.17). If you have a link to a decent tutorials website which you think should be included in this list, please contact one of the moderating team to have it added to this thread. Tutorial Sites CSS Tricks (CSS) Learning jQuery (jQuery) Envato Tuts+ (web design) Photoshop Lady (Adobe Photoshop) Psdtuts+ (Adobe Photoshop) screencasters.heathenx.org (Inkscape) Smashing…

Throughout my years of learning, I have read (and written) plenty of tutorials. Some of these are good, and some are shockingly bad. Remember that these are just guidelines, not rules Heres a couple of pointers to stick to when writing tutorials: * clearly define sections with larger fonts ( [ size = 3 ] , bold texts [ b ], underlines [ u ], and even page breaks [ break ] * Explain as much as possible. Just because something is obvious to you, don't assume that it is for everyone. * Keep it concise. I know this may seem contradictory to #2, but too much text means bits get skipped. * wrap things correctly. Use code tags for code, and img tags for…

I have been watching through some of the elementor tutorials over on YT and although they are all helpful in some ways, it seems when you try to get your own page up using a template, thins don't happen as they should. I have built websites in the past, nothing terribly complex, but all the basic elements, but this elementor is a f=different ball game, as soon as you alter one parameter it throws everything out in mobile view or tablet, I know this isn't unusual in itself, but am I better off just starting from scratch and not bothering with templates ? as I'm finding it difficult implementing certain things when using templates. Just getting a home page together is provi…

Just wondered if anyone knows why my main menu is only showing up in wordpress and not in elementor ?

Hello, I'm interested in doing a website like This website I found the other day, where you can follow series, review and rate them, things like that but I'm not sure how to start, I know how to make regular websites but I've never done one that is like this one, so I was wondering if anyone could help me by telling me how or where to start or if anyone knows about any tutorial or guides that could help me? I'd really appreciate it, thanks alot!

It may seem an unreflective question, but here it goes. I want to create a very simple website for a computer repair home business. All I want is to create this super-basic website (just shows address, what I do, phone number, email address and little more, no drop down menus, maybe two or three tabs. I then want to make it appear in Google for people around my area here in the UK. I wonder if there's a course/resource/fast-track course or whatever, free or not, to get this done ASAP. Then later I may add more features if needed. Also: I heard choosing the right webhosting is crucial, to avoid getting stuck to the same provider and that getting something fl…

Trying to learn. I am planning/hoping to design a website for my partners online shop. We are currently in the UK. Within a year we will be in Australia. Will I have to "transfer" the website to an Australian hosting service or will something like Bluehost do the job for both environments? I was hoping to have a Domain name xxxxxxx.com. I hope that all makes sense

Hi, I have used a few SEO checking sites and they all advise that I need to compress my images. I found the Google image advice but it doesn't say how to compress images. I have looked on YouTube and all it shows it how to make the image smaller. Is that compressing? I converted one image from PNG to JPG but the image quality is awful and comes out all grainy. Is there a standard process to use to compress large images?

can i have one domain and have people in the USA see one thing and the rest of the world see different information?

I am looking at making a website which allows people to upload artwork. Customers would then purchase the work and the artist would get a commission or royalty once sold.I have looked at shopify and squarespace to host the website but don't know if they would allow for the potential mass uploading and storage of imagery. Any suggestions as i have 0 knowhow on this?All the bestAlan

Hello does anybody know how you can extract the original photo (not the resized versions) behind a website carousel? I did it earlier without paying attention to it but i can t figure out how from here: http://buchhammer-handel.com/en/index.php?route=pr... The 1st photo's name that i got earlier and has a 4k res is "JCB 4CX Sitemaster - 2019 - 5h.-1.JPG" but all i can extract now is the resized version "JCB 4CX Sitemaster - 2019 - 5h.-1-600x600.jpg" Does anybody know how i did it the 1st time?:)))

Hey guys, I just wanted to share a development company that i used to create websites with. They have a variety of tools and you can literally create and upload a website within 10 minutes! They’re called Builderall and they also offer a 7 day free trial ☺️

Heya, I thought I'd start my own thread on this as I don't want to hijack others. I'm hoping to get some advice on becoming a web developer from scratch hopefully to make it possible to start a new career. I'm currently in planning in the oil industry and develop some excel systems for them so I have a rough idea of databases. I've read alot online and the forums here and bought creating a website the missing manual to start with as well as headfirst html, xhtml and css. I'm also looking at buying css the missing manual and got dreamweaver CS5 for my web editor though atm I'm using Notepad++ to learn the code with. I looked at an open university course in …

Hi I hope someone can help/point me in the right direction. I'll explain what i'm trying to achieve..! On a page i'd like to make a numbered 324 square grid (1-324 in separate boxes. 18 columns / 18 rows.) The user clicks the numbered grid square of their choice which is placed into their shopping cart. Once 'purchased' the number they chose changes colour - say from green to orange - and doesn't allow any other user to select that number until the grid has been reset (by me at a later date.) It's a web site i'm making for a deaf club i help out at, i'm using wix and dreamweaver. My understanding is ok but pretty basic e.g i've made myself and t…

Hey all, Hope someone can help I sometimes see companies showing clients there websites all devices screens on a image like this. Is there a tool for this or do people just photoshop it into the screens? Hope you understand what I mean and sorry if this is in wrong section! Aidan

I'm planning to create an admin template with Bootstrap but it'll be look like Material designed template. Please suggest me any theme or ui kit that helps me to create an admin panel easily and quickly.

Hello, I know there are grid systems out there like Bootstrap, 960px-grid, etc.. but I don't know which to choose for a given project or why. Is there a grid system that is really common that I should just devote all my energy into learning? Or should I learn multiple systems because different systems might confer different benefits depending on the project? Also, does anyone have any good resources/tutorials for learning how to approach wireframing/design with these grid systems? Thanks!

This is the most commonly asked question on the forum and as such it makes sense to have a pinned tutorial at the top of all the sections that it has been asked in Tutorial: How to center content using CSS The best way to center a page is to use a wrapper that contains what you want to center, and this can be done in two simple stages. Stage one- The CSS Within your css add something that looks like this code: body { text-align:center; } #wrapper { margin: 0 auto; width: xxxx; /* Replace the xxxx with the the width of your site (eg 800px)*/ text-align:left; } A quick explanation of what margin: 0 auto; will do In the body add text-align:center as this will fi…

I'm not sure is everyone is up-to-date about site performance testing tools. Even not me. I use Pingdom full page test for testing my sites and pages for load speed any analysis. Link is: http://tools.pingdom.com/fpt/ Just run a test and than click "Performance grade" for a detailed report. It's free and unlimited.

It's a sad fact that a lot of information on the Web is not directly accessible by people with disabilities. Why? Because most Web site managers and developers are ignorant of the needs of those people with disabilities who cannot use the Web in the standard way. Here are some examples of common accessibility design considerations: Include alternative (ALT) text for every image on your site Provide text links in addition to image map links Provide alternatives to multimedia content Make sure colors don't hinder the accessibility of your content (it is often said that 10% of the population suffer with color-blindness) Provide alternatives to Web pages using frames …

Hi everyone Please I need anyone that can teach me how to design web here Sent from my TECNO DP7CPRO using Tapatalk

I like to maximise the use of my time and walking to and from work is 40 minutes wasted time in my opinion. I found http://www.sololearn.com/ have some fairly basic apps to learn JavaScript. Does anyone have any other tutorials, etc that they use on mobile? Thanks James

We have created this post on how to make your Call to Action buttons stand out on your website or app. Take a look it may offer some helpful tips. If anyone has feedback it would also be appreciated: http://www.zeta.net/best-practices-for-buttons-in-ui-design/

Hi, I built a website through sitebuilder.com. I am not a web designer so limited in knowledge but do understand parts of how to design but not confident enough to design a site from scratch, hence why i have used sitebuilder.com. I have run a google speed test of the site and it says there are non rendering javascript in the faults it is picking up, does anyone know whether its actually possible to change this? I know if you build the site from scratch using HTML then it can be done as you can access the coding. I can get the HTML to show up by clicking inspect element through the browser and have read online that it can be edited this way but im not convinced. Can a…

I want to learn how to build websites could someone please tell me where to start and please dont reccomend code academy.

Fresh resources and tools for web designers mentioned on Fortune Innovations Birmingham news section.

Hi all! So, like the title suggests, i'm interested in how people keep up to date with all the ongoing updates with the world of web design/development... As i'm learning the development side via video tutorials, (through Treehouse) i'm finding my attention seems to wander, sometimes wishing they would hurry up and get to the point, then just wishing there was transcript to just read through, as i can read something probably 2 or 3 times over, in the time a certain video would have played.... Sorry.... slight rant there (no disrespect to T/H mean, i guess its just down to personal preference with these things) So, over to you lovely folk. Whats your pref…

Hey guys, We put together a thorough guide on layouts and grids It's appropriate for both beginners and more advanced web designers. Check it out here and let me know if this was helpful.

Has anyone tried Free Code Camp? I have been going through it and it seems quite a steep learning curve for a total beginner, and there is so much that it doesn't cover in basic HTML/CSS but I do think it is an interesting concept. The challenges are quite tough and I have just reached them. They really are making me think about JavaScript and how it can work so it seems to be of benefit. They also claim nobody has completed the course because everyone gets offered a job before the end - part of the course involves making websites for non-profit organisations. http://www.freecodecamp.com/map Has anyone any experience with it?

Hello Everybody, I own this website: http://dramassite.com I want its template or layout details like this: http://dramasonline.com on dramasonline when we click any channel name like: Hum TV, all dramas which are posted in HUM TV Category comes up with its name and image as thumbnail you can check it: http://dramaonline.com/hum-tv-new-dramas-episodes-online/ but when I click on my Hum TV Category it doesn't show like this rather it shows the latest posts I published in Hum TV Drama Category, please look at it: http://dramassite.com/pakistani-dramas/hum-tv/ can anybody suggest me any plugin-theme or tutorial where I can modify my pages like the one I referred as a sa…

Hi All, In your honest opinions, is Treehouse worth the money per month? http://teamtreehouse.com/

Hi everybody, I am a new member here, so if it is a wrong section I have posted in, please rectify it. I am building a site for myself, and I am struck in building a form for my site. I know a little about website designing, and a bit about HTML, PHP, CSS, but I am not an expert. I have got an example of the kind of form I want to build: http://www.usedpartscentral.com/ As you can see, while you select 2 values from the dropdown, it expands to a full form in a new page, with the 2 values you selected earlier, I am also trying to build one, but I can't. I am not building car parts site, I am a small T Shirt seller, so need a form like this one, I am building my sit…

Hi All, Anyone know a decent set of tutorials for a complete beginner for WP? Thank you Drago

Hi All, I'm new here to WDF but wanted to share my own collection of web design resources. webdesignrepo I hope you all like it Cheers

Does anyone have any tutorials that are very informative for beginners but straight forward, I find myself getting lost on creating designs on Photoshop as they are so large and detailed. Looking for simple tutorials first. I already have learnt a great amount of XHTML and CSS so coding them shouldn't be an issue. Thanks!

I have seen various speed art pieces on youtube, and though why not make a speed build. Have a look!

I've been going through some free tutorials as a beginner/novice to web development and thought I would share my thoughts and see what others think. Codecademy I thought was really good. It was simple to follow however I do feel that it lacked depth somewhat and occasionally went a bit too quickly for my liking. Quite often I had not actually learnt what I needed to do on the tests, especially when it came to their JavaScript course. CodeSchool I really did not get on with. I tried their free course on jQuery and found the presenter and course material quite dull. It did help me learn jQuery to an extent though I really do still struggle with applying it. I c…

Web Development Bento - Learn how to code Getting Started With Web Components and polymer.js Developing for mobile web [Presentation] Hiding Native HTML5 Video Controls in Full-Screen Mode Brackets Live Development for HTML & CSS [Video] A whirlwind tour of Web Components with Polymer [Video] Responsive scrollable tables Write Your CSS with JavaScript Mobile First With Bootstrap 3 An Insider’s View of Mobile-First Design: Don’t Make These Mistakes 7 Habits of Highly Effective Media Queries Hyper useful, ready to use HTML5 snippets Responsive Image Container: A Way Forward For Responsive Images? Powerful WordPress Tips And Tricks Hiding Native HTML5 Video Controls …

Hello, I'm looking to create a website which will offer a subscription for customers to use a URL Shortening service. I'm wondering if anyone knows of any software that is available that I can just install? Kind Regards, Shaun Swales

Hello everyone! I am currently building a website for a student society. I know all the do's and dont's, but there are a couple of things I don't know enough about yet. Hope you can help me After the website is finished, they will have to keep it up-to-date. As they have no webdesigner themselves, they will need to be able to easily update it by just adding new content, without having to dig into the code. So I will have to find a way so they can just edit this on the fly and click save to be done with it. I really have no experience with this. I know you can just use a WordPress template or something, but I've now made my own stylesheet and html pages. So m…

Hilariously creative, more information hover effect with CSS!!! Searching for a cool hover effect to show up more information on your image or any div. You are at the right place. Imagination is more important than knowledge. -Albert Einstein Let us first imagine and make a hilreative blueprint of what we gonna make, and what we gonna need to do so. Hilreative Blueprint > A more info box that will be hidden initially and will show up on hover with our information. > Now that can be done by translating the info box out of the container initially and by translating back it on hover. Lets start with our HTML code. <div class="contai…

If you own a website you gonna need buttons somewhere on your website like i have made down here for 'DEMO'. Here is the easiest way to make 3-D like buttons with CSS only. Hilreative Blueprint > A div with 'border-bottom' only,that will give it a 3-D kind of effect. > Change in size of div on hover as if it is being pressed(with a gradient to emphasize the pressing effect). Lets start with our HTML code. <div class="Container"> <div class="button stopButton"> Stop </div> </div> <div class="Container"> <div class="button goButton"> Go </div> <div> We are desig…

psd to html still used in web industry?

Hello everyone This is my first post here, I have already bought a domin and hosting but i want build a website with forum where user can discuss everything here i have no idea what to do please suggest me how can i go this?

Hello all I usually create wordpress sites and use the plugin 'contact form 7', but I have some sites that don't need wordpress and I am wondering what is the best way to create a spam free contact form (without Captcha) I found this tutorial: http://nfriedly.com/techblog/2009/11/how-to-build-a-spam-free-contact-forms-without-captchas/ but from the url it looks like it might be a few years old, would this tutorial method still block spam? or are there better ways of doing it? if so any advice on tutorials or contact forms to use would be much appreciated. many thanks in advance

Dear All, I want a good CSS3 tutorial link. Can any body help me on this? Thanks, Maketick

Hi all, I am new to web design and need some help in translating an idea into something that works. How do I create rotating images without clicking on them? The link below is exactly what I am looking to do. http://www.usaid.gov/ (the homepage) Thank you so much!

Hi All, Below link will help you, how to use css positions. http://www.barelyfitz.com/screencast/html-training/css/positioning/ Thanks

Hi, What is your favourite CSS tutorial with regards to dropdown menus? (or nested classed & IDs for that matter) I have an exisiting dropdown menu with up to two submenus, and I'm trying to understand how to modify the look of each individual hierarchy. So lots of ids, classes, >, .... Thanks for your help!