The web makes it seem easy to create a business. It’s more difficult than you think. You can have a great idea, but competition is fierce. Unless you have the money to hire someone, you need to learn web design on your own. Pre-packaged software such as WordPress, Joomla, and Magento are great for starting out, but unless you can code, you are forced to work within these software limitations. While web design is difficult, you can still learn it with some dedication and training.
Fundamentals of Web Design
You can go several directions with web design, but there are some fundamentals everyone needs to know.
First, HTML is the language that your browser reads. Whether it’s Chrome, Internet Explorer (IE), Firefox or Opera, HTML is the very fundamental language of the web. HyperText Markup Language (HTML) comprises of tags that tell the browser how to translate your design to the screen. HTML5 is the latest language version. HTML5 has significant differences from older HTML versions, so if you’re new to web design, make sure you take online courses relevant to HTML5.
Learning these tags by heart is not required, but you should at least know the very basic tags. For instance, to title your web page, you use the “title” tag. The “body” tag has the page’s content and the “img” tag displays images.
The problem with HTML is that it’s a static language. This means that any HTML you write doesn’t let you dynamically link to content and display pages from user input. That’s where dynamic languages are necessary to learn. There are a number of dynamic languages such as PHP, C#, VB.NET, Ruby on Rails, Cold Fusion, and PERL. Some dynamic languages are more popular than others. For instance, from the aforementioned list, PHP, C# and Ruby are much more commonly used. The language you decide on helps you learn other languages. For instance, if you learn a C-based language, it’ll be easier to jump into other C-based languages such as Java, C#, or PERL.
These dynamic languages let you query a database, take user input and display content based on user input. While you can get started with just HTML, you’ll need to know a dynamic language to creating a fully functional website.
Finally, CSS (Cascading Style Sheet) is the language for web design and layouts. Your pages will have the content and HTML tags that define your pages, but the problem is how does the browser know where to place these objects on the screen? The answer is using CSS. CSS places each image location, content containers (divs) and color combinations on the screen. Web designers work heavily with images and color combinations, but they also use CSS as a main layout tool.
Finally, when you put it all together, you should ensure that your pages are search engine friendly. Search engine friendly pages make it easier for bots and crawlers to access your data and rank you accordingly. If you have coding errors, it can affect crawlers. When your pages are misinterpreted or blocked by crawlers, you affect search engine rank. Ultimately, this affects your sales and viewership.
You’ve probably heard of HTML, but you might not know that there are now five versions of the language. If you’re learning, you might as well start learning HTML5 to stay current with your programming knowledge. HTML 1 through 4 were similar, but HTML5 has several more tags that you can use. Make sure you look up the HTML5 doctype, which is a tag at the top of your page that indicates to browsers and search engines the version of HTML you’re using.
The most popular new tags in HTML5 are the media tags. HTML5 lets you use video and audio tags. This makes it easier to add video and sound files to your pages. The advantage is that you no longer need to require your users to install third party software. The problem is third party software can have bugs, or it can contain viruses. Users no longer need to worry about compatible versions, and you won’t lose traffic due to users unable to view content.
HTML5 also has a canvas tag. The canvas tag lets you create animations and drawings. If you’re new to web design, this will be a normal part of the web design learning process. However, users who remember Adobe Flash will think this is a great upgrade. Adobe Flash has long been the way to create web page animations. Flash is not search engine friendly, it’s an expensive tool and it made it difficult to work with fully functional websites.
Cascading Syle Sheets (CSS) let you control the layout of your design. CSS is probably the most important language you need to know as a designer. The latest version of CSS is 3, and it also lets you create responsive designs. Responsive designs are layouts that scale based on the size of the viewer’s screen size.
CSS encapsulates background colors, screen locations, size specifications and typography into classes. You create classes and specify these classes in the HTML tag’s “class” property. You can define classes with your own names or specify the tag for the class. For instance, you might want all of your links to be green with an underline instead of the browser’s default blue and underlined. This is done using CSS class styles. CSS can get complex with large sites.
Some people make design stylesheets that make it easier to plug in your layouts. For instance, Twitter Bootstrap is a free download that you plug in to your HTML pages. Instead of creating rows and columns on your own, Twitter Bootstrap has a grid system that lets you plug in predefined classes into your div tags. The result is no manual layout systems, so you don’t need to create individual classes. Plus, Twitter Bootstrap scales your designs to the screen, which also makes it responsive for mobile devices such as tablets and smartphones.
CSS3 lets you do media queries, so your apps can work well with mobile devices. Mobile devices comprise much of the web traffic on the Internet, and this percentage is increasing. If your web design isn’t responsive, you’re already cutting off much of your potential viewers.
Web designers and programmers don’t usually come with one person. Usually, there is a designer and a programmer for a website, but you can still learn both. Most people gravitate to one specialty or the other.
If you decide to be a web designer, you’ll mostly work with CSS, HTML and a little programming. If you plan to create your own website, you need to know a dynamic language. The most common languages on the web are PHP, C# and older languages such as Classic ASP and Cold Fusion. You probably want to know Microsoft .NET (C#) and PHP if you want to keep your possibilities open to a wide range of customers. Most customers work with one or the other.
Even if you just decide to make themes for prepackaged software, you’ll need to know dynamic languages. Popular pre-packaged languages such as WordPress, Magento and Joomla use PHP. This is because PHP is an open-source language and these three pre-packaged application (and others) are also open-source.
There are some free and paid blogging platforms for .NET as well. Even some open-source .NET platforms. If you run a Microsoft .NET website, you’ll probably need to learn the C# language.
Web design isn’t complete without knowing the Structured Query Language (SQL). Databases are the backbone of dynamic web page content. There are two common SQL database engines: MySQL and SQL Server. MySQL is free and open-source. Microsoft SQL Server is paid and not open-source. MySQL works well with PHP, and it’s used on aforementioned pre-packaged software such as WordPress, Joomla and Magento.
If you buy a .NET solution or want to program in C#, you need SQL Server. Microsoft has an “Express” version, which is a free download you can use to work with your web development projects. Regardless of the platform, you’ll need to know SQL. Microsoft SQL Server and MySQL both use SQL, but there are slight variances in the language. For instance, MySQL uses semicolons at the end of statements and Microsoft SQL Server does not. Some differences in keyword phrases also exist. If you learn one, you’ll be able to more easily slip into learning the other SQL language.
Web Development Software
No one can create websites without the proper software. There are a lot of options out there, but only few have all the tools you need. First, for .NET projects, you need Visual Studio. Visual Studio Express is a free download from Microsoft. It contains all the necessary components to create C# or VB.NET applications. You can also integrate Visual Studio and SQL Server into one interface, which makes it more convenient for development.
PHP developers have more options. Some use Eclipse, which is also an IDE for Java and Android development. Others use simple packages such as Notepad++. PHP is an interpreted language, so you run the software on your development server to test it. Microsoft .NET compiles and uploads binaries to your web server.
Languages tie into your development and production platform. Some operating systems work with others. For instance, Microsoft Windows Server also runs PHP. With .NET websites, though, you need Windows.
Web servers basically come in two types: Linux or Windows. With Linux, you’ll probably run MySQL, Apache and PHP. This is also called a LAMP setup. LAMP setups are cheaper than Windows setups, because Windows software isn’t open source, and you need to purchase licenses for the usable software.
Your other option is Windows. Windows servers are more expensive, but you can still get Windows VPS services for as low as $300 each year. A VPS is the preferable way to manage a website, but shared hosting is super cheap and great for personal blogs or people just starting out. Microsoft Windows Servers use Internet Information Services (IIS). IIS runs .NET applications natively, but it will also let your run PHP programs. As a matter of fact, you can install MySQL and WordPress on a Microsoft Windows server and it will run the software. However, it’s not recommended.
Web servers tie in with web hosts. Choose your web host carefully. There are hundreds of hosts to choose from. Choose one that gives you great support, has very few technical difficulties and comes recommended by other users. Whether it’s for development or for uploading a live site, you need a web host.
You have two main types to choose from: VPS or shared. Virtual private servers (VPS) allow you to control your web host machine from a virtual machine terminal. You control the server as if it was a dedicated host, except you share hardware with other virtual machine users. You can work with the software as if you are directly connected to the server’s interface.
With shared hosting, you’re stuck using the host’s interface, which isn’t always intuitive. The best way to determine what you want is by what you want to do. If it’s a personal blog, you can probably work with shared hosting for only a few dollars a month. If you want more control and want to host multiple websites, you should opt for VPS, which is more expensive but well worth the extra costs.
While this is a good list of things to learn when you want to get into web design, experience and practice are what will make you a great web designer. Make sure you don’t just read a book and move on. Learn, practice and network with other users. You will find that working with other people helps you understand problems and design techniques that you won’t get from a book.
With Udemy.com, you have hundreds of online learning videos to choose from. We can help you learn from the beginning and take you into advanced courses and topics.