Web Development und Web Design 

What is meant by web development and web design? Web development or web programming (English web development or web engineering) describes the design and implementation of software for the World Wide Web. This includes websites, web applications (‘web apps’), and other services such as web services.

Web developers or web developers are more responsible for coding. The web designer is more concerned with mocking up a page. If you want to design and program your own website yourself, then you are also responsible for the design. But there is also a range of software that will help you with this. For example for image editing and design. It depends on your budget in which programs you invest. But there are also a number of open sources. These programs are free.

Programming in Web Development

You need an editor to program. There are many free ones. The most popular and widely used at the moment is VS code. It can really be used for almost any programming language. I’ve tried a few like Brackets, Sublime Text, and Atom. But my personal recommendation is VS Code. All you need to do is install the software and you’re ready to go. Apart from that, you will also find helpful extensions.

HTML and its structure

What is HTML? HTML (Hypertext Markup Language) is the code that is needed to structure web content and give it meaning and purpose. For example, your content could contain paragraphs and graphics, but also pictures and tables.

The HTML framework:

  • html
  • head
  • title
  • body

A basic structure is an HTML document that only contains these elements.

  1. <DOCTYPE html >
  2. <html>
  3. <head>
  4. <title></title>
  5. </head> closing attribute
  6. <body></body>
  7. </html>

The easiest thing to do is to add Emmet in VS Code. With this extension, you just need to type ! and enter and Snippets will create the basic framework, which is the necessary basis for every website.

Now to the design of the content. The body is the visible area. Most websites have a so-called header that contains the logo, title, and navigation elements. The logo and a greeting can easily be inserted in the header. For this, you need the img and p element. The nav attribute is used for navigation, followed by a ul (unordered list) with the list elements.

What is the structure of a page structure like?
The construction takes place in the body. After the header, you start with the main (area). In the main container, there are articles and sections that can be individually designed. This also includes a sidebar that can be integrated with aside. At the end of a page, you add the footer/footer area.

Recommendation


Use article when the content is self-contained
Use section if there are several similar blocks …
… and don’t dwell on the hairline differences between the two elements.
Otherwise, it is perfectly legitimate to occasionally use a div element for structuring without any further semantic meaning.

Courses


On YouTube, you will find a lot of learning material for HTML but also for the later styling (CSS) and various animations (JS).

You will also find a lot of courses on Udemy, which are also highly recommended. The teachers are very experienced in this area and will give you the necessary knowledge. As a beginner, you might want to take a beginner course. I actually started with Code & Create, then continued with Traversy. I prefer longer courses to crash courses. Also highly recommended are those where you are given tasks. So you learn to build a website independently.

The beginning of a passion

I came across programming through my other courses on Udemy. Out of curiosity I bought a course for web development and started learning it. Starting with HTML and continuing with CSS and JS. I couldn’t get enough of this matter. From Bootcamp courses to introductions to new subjects. My curiosity strove for more. PHP, Python, AI, Node.JS, Angular, React, Bootstrap, Materialize, followed by WordPress.

There is no subject that would not be exciting. In times of technology and rapid development, new learning material is always added. I have created many websites without help and completed many courses. In addition, I am the administrator of a few groups and also have my own help group on FB. I try to give beginners tips and help when help is needed.

With basic knowledge, you can also register on various sites and try to work as a freelancer. They are always looking for a large number of competent workers. With an iron will and willingness to learn, you can build a great career for yourself. Programmers and designers will continue to be in demand in the future. The more you master and the more you educate yourself, the higher your chances of earning money. So, what are you waiting for? Get started today and embark on a future-oriented career in technology.

Leave a Reply

Your email address will not be published. Required fields are marked *