Web Design

Web Design Tutorials – Learn The Basics

Coming up with a good web design is a lot easier than designing something completely graphic like a poster. It is also easier than programming since there are web design tools that make it a lot easier to create a website from scratch. This web design tutorial will give you a small overview of these types of programs as well as some general information on how to use these programs.

Finding a Good Web Authoring Tool

While you can use Windows Notepad to create your very first website by typing pure HTML, CSS and JavaScript codes, it is much better to start with a good web authoring tool that provides a friendly interface so you can design a site even if you do not know any form of web coding. Examples of free web authoring tools include KompoZer and Bluefish Editor. Commercial programs like Adobe Dreamweaver and Microsoft Expression Web give you more editing possibilities.

Starting with a Template Layout

Like creating a new document file, you will start with a clean slate where you can add text, images or other multimedia content through drag-and-drop. But if you want to make your site presentable regardless of screen size, it is best to start with a template layout. A common example of a layout is a site that contains a header, sidebar and body. A layout makes sure that you can properly position the elements on your site.

Incorporating Your Site Elements

Incorporating the various elements to your site design can be a bit clunky depending on what program you are using. But if you want to experience less difficulty in creating that perfect layout, try to make a sketch of your site first. You can use your favorite graphics design program to make your desired site layout including the elements or you can draw it on paper. With a sketch or draft on hand, you can figure out what kind of adjustments are needed after you position the elements.

Observe the HTML Code

Once you have made significant progress in your web design layout, save it to your hard disk and view the HTML code. Every web authoring tool should have an option that lets you see the source code of your site design. If there is a “Split View” option, that option is preferable so you can see how the design translates to code. Observing the code alone should give you an idea on the basics of HTML. What is nice about HTML is that you do not have to compile anything. Once you make a change in the HTML code, the design is automatically updated.

From there, you load various other HTML reference sites like W3Schools so you can broaden your web design skills and do more creative things with the programs that you have.