Best ways to Start Learning Website Design

Web Design Best ways to Start Learning Website Design

Getting started in website design necessarily involves a learning process. Every web designer must know at least two web programming languages (HTML and CSS are indispensable and complementary), know how to choose a server, contract a domain, pay and charge by electronic means, use HTML editors, edit images, use WYSIWYG editors and a long list of other things. However, don’t be discouraged! Many of these tasks are really simple, and those that are not, are fun, so it will not cost any work to learn all this.

A Website guide for newbies

The first task that must be undertaken is to learn the HTML language, knowing the HTML language is essential since the web designer rarely needs to tweak the code produced by these editors.

The CSS language is somewhat more difficult than HTML, but at the same time, it is more fun. Getting to have advanced knowledge about CSS requires a lot of experience and time, you realise as you learn that you really have a lot to understand and sometimes your imagination only sets the limit. You can do amazing things just with
CSS.

What’s HTML and what’s CSS?

The HTML language consists of a series of commands that browsers can interpret, so it can be said that a web page is a document where content is written and a set of instructions to tell the browser how to display them. Through the HTML language, we can begin the first steps in web design. As it is described in basic concepts about HTML, to start our early practices, it is only necessary to use a text editor and a browser.

Like the HTML language, the CSS language only requires the use of a simple text editor and a browser, although it is true that some programs that are created exclusively to create style sheets are beneficial. HTML and CSS are complementary languages, since, although web pages can only be made with HTML, this is not the most convenient nor the most advisable, the visual presentation of the site will leave much to be desired.

Learning Web Design Online

There is a web design manual for beginners prepared by the University of Oviedo, specifically the Graphic Expression Area in Engineering. That is a 149-page manual that addresses different topics related to web design such as the HTML 4.0 platform, style sheets, JavaScript and DHTML, tables and links, the use of frames, introduction to the sheet of styles, colours and text with CSS, images, layer management, among other things.

 

Other Languages used in Website Design

As the demands of design progress, it will be necessary to include other languages, such as javascript, PHP, asp and others, since with HTML and CSS static pages are obtained, where the user is limited to see or hear the content. Some web pages require users to interact, send data, fill out forms, etc., which is only possible by including other languages, at least in part of the pages.

While it is true that today most web pages work thanks to content managers (CMS), which are prefabricated applications in which the programming and design part is already created by default, and are usually customised/modified to be used. For example, this portal is created under WordPress, which is the most popular blog platform currently.

The design and much of the programming that brings the application is modified, but the dynamism of the site and its complexity would not be possible without the use of WordPress, and WordPress works with PHP and MySQL.

At this point, the designer can consider leaping web development and learn these programming languages. Another aspect would be working hand in hand with programmers who will have much more knowledge in these languages, and spend all that valuable time learning how to program to become a better designer or boost their business.

Preparation

First, you need to measure your design. That is something that you usually have to do before starting to develop your design, but you need specific measures to begin coding. It is not necessary to know each one of the steps, but you need to know the measurements of the structure of your primary layout. For example, if you have a left side of the page and a right side of the page, you know its width (and height, if it does not vary).

You also need to know the width of the spacing between them and the total width of everything combined. If your design is based on a grid and it aligns with everything very well, it is most likely that the head of your site has this same width as well. It is necessary to know the dimensions of each central element of the site.

Once you have the measurements, we can start exporting images. In many cases, you will not need to export many photos, because you can recreate most of your design with HTML and CSS (and JavaScript). For a few images that you need to, you need to specify an appropriate format. That is, you have to choose between JPEG and PNG.

When your images are compound, such as photos or colourful illustrations, in general, it is better to choose JPEG. If you have simple images or you want your images to have transparent backgrounds, you have to save them as 24-bit PNG files.

When it comes to saving your images, you need somewhere where you can put them. For this reason, and because you are going to have a lot of other files once you start developing your website, at this stage, you have to start organising your site.

If you plan to build a more complex website, I would recommend structuring everything with the help of Model View Controller (MVC) architecture, but in this post, we are trying to develop a simple page, I recommend that you create the following directories in the directory Site root:

  • CSS
  • Image
  • Scripts

Well, you are going to save your images in the/images directory and your CSS style sheets in the/CSS directory. The script directory is where you can keep JavaScript files and other scripts. In the root directory, it is also necessary to create an index.html file.

What is index.html?

Let’s say you have a unique HTML file called mydoc.html. If you upload it to your web server, that is, to your site mysiteweb.com, every time someone visits mysiteweb.com, you see a list of the directories of the files that you have uploaded or, possibly, nothing at all.

The name of the index.html file tells the web server to show that file if someone goes to that specific directory. If you put the index.html file in your image directory, every time someone visits, you see a representation of the HTML content of that index.html. An index.html file is the default HTML file to display, so you always need one.

Get a Free Quote

© 2014-2018,

Keen to Design

All Rights Reserved. ABN 81 193 563 194