Following the development of many programming, personalization and markup languages, learning the basics of web design has become more difficult than ever. Fortunately, there are dozens of tools that can help you get closer to this subject. Search for some basic resources, start by mastering the fundamentals of HTML and CSS, then you can start exploring more advanced web design languages, like JavaScript!
Steps
Method 1 of 4: Find Web Design Resources
Step 1. Search online for web design courses and guides
The internet is full of detailed information on web design, often available for free. You can start taking free lessons on Udemy or CodeCademy and join a community dedicated to programming, such as freeCodeCamp. You can also search for instructional videos (or tutorials) on YouTube.
- If you know exactly what you are looking for, try searching using specific terms (eg "guide class selectors in CSS").
- If you are a beginner and have no previous web design experience, start by learning the basics of HTML and CSS programming.
Step 2. Consider taking a course at your local university
If you go to university, you can ask for information on any lessons dedicated to web design in the computer science department or in your faculty. If you are no longer a student, look for information anyway because universities sometimes offer web design courses that are open to the public.
Some universities organize web design courses via the internet that everyone can participate in. Check websites like Coursera.org to find free or inexpensive web design classes led by college professors
Step 3. Get books on web design at your bookstore or library
A good web design manual can be an invaluable resource as you try to learn and apply new techniques. Look for up-to-date books on web design in general or specific programming languages that interest you.
Reading web design magazines and blogs is another way to learn new techniques, find inspiration and stay up to date on the latest innovations
Step 4. Download or purchase an application dedicated to web design
A good web design program can help you build sites more efficiently and effectively, as well as help you learn all the ins and outs of programming, scripts, and the other most important elements that make up a website. You may find useful tools such as:
- Graphics programs, such as Adobe Photoshop, GIMP or Sketch;
- Website creation tools, such as WordPress, Chrome DevTools or Adobe Dreamweaver;
- FTP software to transfer completed files to your server.
Step 5. To get started, look for website templates to experiment with
There is nothing wrong with using templates while trying to learn the basics of web design. Search the internet for the sites you like the most and examine the code in detail to understand how the author created the pages. You can also try editing the code and adding custom elements to the template.
To get started, search the internet for free website templates or experiment with those available in the program you are using
Method 2 of 4: Master HTML
Step 1. Familiarize yourself with the most used tags in HTML
This simple markup language is used to determine the format of the basic elements of a web page. You can modify various elements of your site by using tags, which are expressions enclosed in angle brackets, which provide instructions on the function of an element within the page. To close a tag, insert the symbol / in front of the second part of the tag, inside the brackets.
- For example, if you want a sentence to appear in Bold, you need to enclose the text in the tag, like so: This text is in bold.
- Some of the more common tags include (paragraph), (anchor, which defines links), and (font, which allows you to define various attributes of the text, such as size and color).
- Other tags define the various parts of the HTML document itself. For example, it is used to contain information about the page that is not visible to the user, such as keywords or the description of the page that appears in search engine results.
Step 2. Learn to use tag attributes
Some tags need other information that specifies their function. These additional data must be inserted inside the opening tag and are called "attributes". The attribute name must be inserted immediately after the tag name, separated by a space. The attribute value is matched to the name with the = symbol and must be written in quotation marks.
- For example, if you want to color some text red, you can do so using the tag and color attribute, like so: This text is red.
- Many of the effects that used to be achieved with HTML attributes, such as font colors, are now usually achieved by programming in CSS.
Step 3. Experiment with nested elements
HTML allows you to position elements within others, in order to create more complex formatting. For example, if you want to define a paragraph and then display part of it in italics, you can do this as follows:
I love programming!
Step 4. Learn to use empty elements
Some HTML elements don't need opening and closing tags. For example, if you want to insert an image, you just need a simple "img" tag that contains the name of the tag and all the necessary attributes (such as the name of the image file and the alternative text you want to appear in case of accessibility problems). For instance:
Step 5. Explore the basic structure of an HTML document
In order for your HTML website to work flawlessly, you need to know how to assign the right format to the entire page. To do this, you'll need to define where the HTML starts and ends, as well as using tags to determine which parts of the code will be displayed and which will compose the necessary hidden information. For instance:
- Use the tag to define a page as an HTML document;
- To continue, enclose the entire page in the tag, in order to establish the starting point and the ending point of the code;
- Type all the information that will be hidden from the user (such as the page title, keywords and description) within the tag;
- Define the body of the page (i.e. all text and images that can be viewed by the user) with the tag.
Method 3 of 4: Familiarize yourself with CSS
Step 1. Use CSS to apply various styles to an HTML document
CSS is a style sheet language that allows you to apply various formatting and design elements to web pages. For example, if you want to selectively apply a specific font or color to some textual elements on a page, you can do so by creating a CSS file. At that point, you can insert the file into the HTML document, wherever you like.
-
For example, to create a CSS file that turns all paragraph elements in your HTML document to green, just type the following lines:
- p {
- color: green;
- }
- To finish the job, save the file with a name that has the extension.css, for example style.css.
- To apply the stylesheet to your HTML document, you need to insert it as an empty link inside the tag. For instance:
Step 2. Familiarize yourself with the elements that make up the CSS rules
A single line of CSS code is called a "rule" or "rule set". The rules contain the various elements that define how the code works and include:
- The selector, which defines the HTML element whose style you want to change. For example, if you want a rule to affect paragraph elements, start typing it with the letter "p".
- The declaration, which defines the properties you want to customize (such as the font color). The declaration is contained within curly brackets {}.
- The property, which specifies which HTML element property you want to change. For example, within the tag, you can specify that you want to customize the text color style.
- The property value specifically defines how you want to change it (for example, if the property is the font color, the value would be "green").
- You can change various properties in one declaration.
Step 3. Improve the graphical presentation of the site by applying the CSS rules to the text
This programming language is useful for applying various effects to text, without having to specify every single property in HTML. Experiment, changing various font properties with CSS, for example:
- Font color;
- Font size;
- Font family (for example the font category you want to use for the text);
- Text alignment;
- Row height;
- Spacing of the letters.
Step 4. Experiment with text fields and other CSS layout tools
This programming language is also useful for adding elements that make your web page more pleasing to the eye, such as text fields and tables. Furthermore, you can use it to change the overall layout of the page and define the positions of the various elements that compose it.
For example, you can define attributes such as the width and background color of an element, add borders or set margins that create spaces between various elements on a page
Method 4 of 4: Working with Other Web Design Languages
Step 1. Learn JavaScript if you want to add interactive elements to your pages
JavaScript is the ideal language to learn if you are interested in adding more advanced features to your website, such as animations and popups. Take a course or search the internet for JavaScript programming guides, then integrate those elements into your web pages using HTML.
Before moving on to JavaScript, you need to familiarize yourself with the basics of building web pages with HTML and CSS
Step 2. Familiarize yourself with jQuery to make JavaScript programming easier
jQuery is a JavaScript library, able to simplify programming thanks to access to many elements already compiled. jQuery is a great tool, if you already know the basics of JavaScript.
You can access the jQuery library and many other valuable resources at jQuery.org, the website of the jQuery Foundation
Step 3. Study server-side programming languages if you are interested in backend development
While HTML, CSS, and JavaScript are ideal for web designers who are dedicated to creating the user interface, server-side languages are useful for those more interested in behind-the-scenes operations. If you want to learn backend development, focus on languages like Python, PHP, and Ruby on Rails.
