How do web designers make websites (basic coding examples)

Web developers use various different platforms and kinds of  code to develop websites. At base, all of them use a combination of HTML and CSS (short for Cascading Style Sheet). From there, depending on the projects preference and needs, designers might also use PHP and Javascript (to name two).

Web development & CMS

As of writing this, w3techs.com shows that Content Management Systems (CMS) are the foundation of 56% of the worlds websites. As far as popularity goes, 61% of them are built on WordPress™. The next 3 most popular platforms are Joomla™ (4.9%), Drupal™ (3.1%), and Shopify™ (3.0%).

Side note: We develop all of our websites within WordPress and we are Shopify Partners.

Some web development code examples.

Some raw examples of HTML.

At it's most basic level, a website is a file type (a .html in this example) that has an opening HTML tag, followed by a body tag, followed by some content.

code example-01

As a stand-alone HTML file, that would load a fully functional webpage. But it would be rather.... plain. To dress it up, web developers use CSS.

Some raw examples of CSS.

As you can see in the example above, the body lacks style. Typically, the style is addressed in a separate file called a CSS file. Its code is simple to follow (see below): the body is getting a background color of lightblue, the h1 (or heading / title of the page) is going to be colored white and center aligned, and the p tag (short for paragraph) will use the verdana font and be sized at 20px.

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}

Wrapping it all up.

The code itself is actually very simple. It just that there's a lot of it, and learning it all to dress up a site nicely requires practice. Most websites require many lines of code, and CMS systems like WordPress, Joomla, etc., require a combination of HTML, CSS, Javascript and PHP, which means they often have hundreds if not thousands of lines of code that usually (HAH!) work together well.

And there you have it. That's how web developers develop websites.

Examples of code courtesy of www.w3schools.com.