Is Web Design Still In Demand In 2020?

is web design still in demand in 2020

Is Web Design In Demand In 2020?

Is web design still in demand in 2020? Absolutely. But the ways web designers and developers build websites has evolved.

Continue reading “Is Web Design Still In Demand In 2020?”

How important are optimized images for SEO on Google? | SEO Tutorials

SEO Tutorials: How important are optimized images for SEO on Google?

SEO Tutorials: How important are optimized images for SEO on Google?

The short answer is: yes, optimizing your images is an important thing to do because it improves your website's rank and performance. Google has an article confirming the importance of page speed here.

There's also a tab within Google's Webmaster Tool that will show you how fast your website is as it's experienced by people around the world.

What is an optimized image?

An optimized image is an image designed for one of the three mediums we surf the web on: desktops, tablets, and mobile phones. Of the three, SEO experts are most concerned with the mobile version.

There are a few reasons for this. First, large images (images sized for desktop) load slowly on mobile phones. Second, they consume more bandwidth than necessary.

But the slow load does more than negatively affect your website's organic rank. It increases the chance that the person viewing your site on their phone won't wait around long enough for all the elements to load.

In other words, they'll leave your site before they read your site.

Know the Jargon: A Hiring Managers Guide to Basic Web Development/Designer Terms

Know the Jargon: A Hiring Managers Guide to Basic Web Development/Designer Terms

Who is this article's for?

If you're not sure what the in-industry terms, technical jargon and job titles the web development/designer field has means, and you're in charge of hiring someone(s) to develop a new website or update your existing one, this article's for you.

I kept it as plain English as possible, simplifying terms as much as I could within reason.

Why is knowing any of this jargon important to you?

Loosely understanding all this jargon allows you to ask the right questions to the person or agency you're considering hiring. One benefit is that you'll have a much better chance of hiring the person/agency with the right skills to get the job done.

Web Developer vs. Web Designer

Within this industry, those titles aren't interchangeable. This doesn't necessarily mean that a web designer isn't a web developer (or vice versa). It means that the skillsets associated with those two titles are different but often overlap.

The Basic Front End Developer -- Bare Minimums

There are three main branches of code developers use in the web design world:

  • HTML
  • CSS
  • JavaScript

Of the three, anyone you hire for web work should be able to code HTML and CSS comfortably. The third branch of code, JavaScript, is arguably unnecessary for most small - medium-sized websites. A passing familiarity is often enough (with the exception being your website heavily using/needing JavaScript).

That being, many developers choose to learn it because it does simplify an incredible amount of things within web development and opens a lot of doors within web development and beyond for the people who do know it.

More on HTML and CSS

HTML and CSS are the backbones of web development. They integrate to create the sites you're browsing every day. Every website in the world uses them.

The difference between HTML and CSS:

HTML is the content of your site, i.e., the code that places all of the images, titles, words, links, etc. into your website. CSS is the language we use to stylize all of those things, i.e., make your titles bigger than the rest of your text, color something blue, put a background behind something, make the images fit on different screen sizes, etc.

More on CSS

CSS is short for Cascading Style Sheets. Again, it's used to style the content on your website. But it does much more than that. CSS, through its use of CSS Grid, Flexbox and Media Queries (all jargon!), is a popular way of creating what you see advertised as responsive websites.

It boils down to this: Grid, Flexbox and Media Queries are a few of the tools developers use to make your website automatically adjust its content to fit on a desktop, tablet or phone.


JavaScript is big. I mean, it's really big. Out of the popular coding languages on the net, JavaScript's the biggest. In fact, W3Tech shows that 95% of websites use it.

It's tough to capture what JavaScript does in a brief, plain-English article because it does so much. But here's my attempt:

  • you use it style websites (similar to CSS)
  • it makes websites interactive (i.e., creating a service estimate/quote form that pops up when someone clicks a colored button);
  • it integrates other applications into your website (like displaying your Instagram feed or Facebook feed into your site
  • you use it to write code for you (i.e., creating a hip navigation menu that changes colors when you click it);
  • one last use: create websites that feel/look/act more like applications (e.g., the LinkedIn mobile application is a website written in JavaScript for mobile devices.

And that's not even the tip of the ice burg. But I'll leave it at that to keep this brief.

Website Hosting

You have to put your website somewhere. It's often hosted by a large company like GoDaddy, HostGator, Google, etc. You can host your website in your home or office if you have the equipment, but it's simply not worth it if you're a small to medium-sized business.

Back-End Web Development

You'll probably rarely directly work with back-end web developers, but their job is incredibly important. Above, we mentioned hosting (and how it's generally not worth it for companies to self-host). That's because most web designers or developers don't need to know too much about the back-end. In a way, it's an entirely different job, all-be-it related.

I think an analogy might work better than an explanation: A back-end developer is like a windows technician. The windows tech is in charge of making sure your computer's receiving updates, that all the programs work, and everyone has the right login info, etc. You, the user, don't need to understand most of that for your day-to-day job. In this example, you'd be more like the Frontend person.

Back-end developers deal with everything we don't see. Specific examples include how the server (what your site is on) communicates with the browser (you), making sure that the server is updated to its newest, stable environment (think windows updates), general server security (making it difficult to get hacked), backups (in case you do get hacked), administrative stuff, etc.

That list is nowhere near exhaustive. But it's enough info to grasp a few of their responsibilities.

Some Job Titles Associated With Web Development

The coding languages your familiar with influence what roles you'll be applying for. Here are a few popular roles:

  • Web Developer (the person coding it)
  • Web Designer (the person designing how it'll look)
  • JavaScript Engineer
  • Frontend Engineer
  • Frontend Developer
  • Software Developer

There's a lot more I could add to that list, but you probably don't need to know many of them. One additional thing to know is that many of the skillsets within these roles may overlap with each other.

More Specialized Kinds of Code

What's listed above is an overview of the basics. Coders, like most industries, usually fall down a rabbit-hole of further specializations. These come with additional possible job titles (titles I left out above). Some are more popular than others. It depends on the coders' interests, industry needs and the scale of their projects.

Three of the more popular terms you might run into are Webpack, React.js, and NPM. Most people I've spoken with have argued that those are the three significant components front end developers are concerned with after they've learned the basics.

One specialization example not mentioned above is WordPress Website Development. They, like myself, lean more towards HTML, CSS, PHP, and sometimes JavaScript.

And that covers a fair amount of the jargon you should know.

4 questions you need to ask them before you buy a website

4 questions you need to ask them before you buy a website

4 questions you need to ask them before you buy a website

We noticed that there are a lot of people in this industry selling WordPress websites, but aren't familiar with web development (the actual coding for the website). Instead, they rely on themes or outsource the developmental side.

So, we thought we'd write-up a brief article that'll help you ask the right questions when you're making your next website purchase. The goal's to prevent some of the inevitable costs that creep in when you aren't aware of what you're buying.

Here's the scenario: you're looking to hire a web designer to create a brand new site or update your existing one to WordPress. Now, the person you're talking to is a web designer, but you haven't asked whether they're:

  • designing the site, but farming out the development elsewhere
  • purchasing a pre-designed theme, then reselling it to you and adding your content to that (which is very common in this industry)
  • have at least one team member who will be doing the coding part once the design is approved.

Note: these scenarios aren't bad, but in my opinion, the estimate you receive should represent what you're buying. This is because two of those scenarios raise concerns for your website's future.

Which two should you look out for? The first and the second.

The first: the design is done in-house, but the development is farmed out

In this case, the person designs how the site will look and receives approval from you. But because they aren't coding it themselves or in-house, they have to take part of what you paid them and buy the development side elsewhere.

Where is elsewhere?

Other companies, freelance developers, other countries entirely.

This is my concern: WordPress and its Plugins need to be updated often. Additionally, your content, such as your service/product pages and its design/layout, will eventually need to be updated.


Who is going to perform the necessary work?


If they farmed out the developmental side because they can't code, the only option I can imagine is that they're going to hire someone else again to do the work for them.

As long as it's transparent, that's ok -- nowhere says a designer NEEDS to know how to code. But, as far as I'm concerned, if someone else needs to hire someone else to get the job done for them, I want it reflected in the estimate/invoice.

Scenario 2: they bought you a theme

WordPress Websites are built around themes, i.e., whether it's a custom coded/modified theme or built upon a pre-purchased theme, it's always called a theme. But there's a big difference between a person developing/customizing a theme, and a person selling you someone else's theme.

Consequences of pre-purchased themes

Themes often have a one to two-year lifespan. You see, WordPress updates happen a lot throughout the year, and most themes (pre-purchased or not) only last a year or two before they need updates to maintain compatibility with WordPress.

With pre-purchased themes, it's difficult to predict whether the theme they bought you will update/maintain compatibility with the WordPress updates that naturally happen over the years.

One consequence is that at some point, you'll probably be buying a new theme that's compatible with tomorrow's standards because your current theme is outdated/no longer maintained. This is sometimes sold as a "website redesign" or "website update". In this case, the redesign/update is because the theme they bought you is no longer being maintained by the person who developed it, meaning it's no longer able to keep up with the necessary security/software/code updates WordPress requires to function at its best.

Another consequence is customizability. Pre-purchased themes often have limited style/layout options. For example, some themes cannot change font sizes or colors. Other themes cannot adjust the layout very much at all.

That said, a person who knows how to code can usually get around some of these limitations. Example: if they're familiar with CSS, they can override some thematic elements, i.e., colors for fonts, headings sizes, link colors, etc. It's a case-by-case (theme-by-theme, hah!) basis because each developer codes their theme in a variety of different ways.

When a pre-purchased theme is a good idea

There are a few good reasons someone would want to purchase a pre-designed theme from a web designer. Here are two:

  • The person has a specific budget for the project in mind. Often, if the budget is capped at around $500-$1500, there's often not enough time to design and develop a theme due to budget restraints. If they can find a suitable pre-built theme that fits the client's needs/goals, the designer/developer can often work within the provided budget.
  • Clients sometimes need a stand-in website. What I mean is that they need a website up and running ASAP, there probably isn't a lot of content going into it, and the window for growth isn't important right now.

In these cases, the client understands the limitations of the theme and the high probability that something more customizable will be developed/bought in the future when the pre-purchased theme's upper-limit of customization is reached.

In both these cases, your needs and budget have been expressed, and the web designer has done their best to make sure you understand the limitations of your purchase.

Side Note: Theme Builders

Theme builders are a popular middle-ground option. I think they're wonderful. They're perfect for clients/their staff who need to be able to go in and modify something on their website on their own without needing to call up their designer every time a change needs to happen. Some examples include blog or portfolio updates, adding pictures to a gallery, and changing some basic text on a service/project page.

In an ideal circumstance, the developer uses a theme builder (with a developer's license that they've purchased) to build the site's layout based on the approved design. The developer then considers what parts of the website need to remain editable by the client, adding those parts in. Some examples include editable text boxes, headings for pages, galleries, blogs, portfolio's.

Safeguard's through login/user permissions are sometimes put in place to ensure that the client/their staff can't accidentally "break" the website by changing the layout. The safeguard's used depend on the client's familiarity with editing websites.


Theme builders have limitations. They don't solve every problem. The layout still has to implemented within the site. The elements also need to be responsive (adjust to desktop, tablet, mobile), and, as much as theme builders advertise themselves as "drag and drop," there's a catch. Many advanced website elements are often added in by the developer through code and plugins, and the overall style (fonts, headings, etc.) coded directly into the site.


Another price we pay for client-side customizability is bloated code. What that means is that in order to make sure it's relatively easy for the client to edit the site, the theme builder adds in a LOT of extra code. The consequence is that the extra code slows down how fast your website loads, which will drive the person in charge of your technical SEO crazy.


When it comes to farmed out web development, you should know what the costs of maintenance and updates will be so you can add those expenses into your yearly budget. For pre-purchased themes, what we're cautioning against is a lack of transparency. The transparency issue isn't about whether there will be additional costs, it's that you should have an idea of what those costs are the result of, and a best-guess at what conditions will trigger those costs.

What should I ask my web agency or freelance developer?

  • Is the work you're providing in-house?
  • Are you developing the website, or do you have a developer(s) in-house that you work together with?
  • Will you be using a pre-purchased theme?
  • Will I be receiving the license/receipt for my theme?
  • What are the upper limits of that theme's customizability? (layout, colors, alternate page layouts for services/products
  • Pre-purchased often have a time limit on the support they receive (usually 6mo - 1yr). How much will it cost to extend it? What happens after that time expires?
  • Is the pre-purchased theme being used compatible to today's WordPress standards?
  • Does the theme have positive reviews over-all?
  • When was the theme last updated?
  • Are you using a theme builder?
  • Do you have a developer's license or is this a one-off purchase?
  • What happens if/when the license expires? Costs?

The questions above should help you better understand what you're purchasing and what they're providing. If you have any questions regarding an estimate for a website you've received, contact us and we will help you better understand it.

A SEO’s guide to Google Analytics terms

A SEO's guide to Google Analytics terms (a brief intro)

A SEO's guide to Google Analytics terms (a brief intro)

Google Analytics' a powerful tool for data-minded people. But if you don't understand what the individual terms the tool uses mean, you won't be able to use the data effectively.

Now, this isn't going to be a complete, in-depth article. It's simply a selection of the more common terms you'll probably see within a report that aren't too intuitive.


I'm starting with hits because pretty much everything that happens on a website is considered a hit. A hit is a request made to a web server by a browser. Again, nearly everything's a hit, including web pages, images, programmed events, etc.


Every person who visits your website generates one session. A session lasts until the person leaves the site or 30 minutes of browser inactivity has gone by (example: they loaded your website but went out to grab a coffee). Each session is a group of hits (above) of that one user. If a user leaves and returns 30 mins later, a new session is created.

Average Session Duration

The metric displays the average amount of time each session added up to.

Time on page

The amount of time a single person spends on a page. Note: pages with more text might lead to higher times.

Entrances / Landing Page

Websites tend to have multiple pages. The entrance is the page a person entered your site. Example: if they arrived at your site via your contact page, the entrance page would list The most common entrance pages are your homepage and popular blog posts. Note: this is also referred to as the Landing Page.

Exit page

The last page a user viewed before leaving your site.

Bounce rate

If 100 people visited your website in one month, and 50 of them left immediately after viewing only one page, your bounce rate would be 50%.

Don't get alarmed, though. This isn't always a bad thing. Example: 40 of those 50 people who immediately left your website left because they read a headline, found your phone-number and called you. That's not a bad reason to have a high bounce rate.

Here's what I'm saying: before you make changes based on a bounce rate, you need to first discover WHY people are bouncing quickly.

Quick tip about this: it helps to know what organic or paid search terms are driving people to your site. If you can tie that in with the bounce rate, you'll have a better idea of what to change.


PageViews is the number of times a page is loaded/re-loaded in a browser.

Unique Page Views

How many times an individual page was viewed by different users (different sessions).


An impression is generated whenever a search term related to your website is seen organically in a search engine result. Example: if your website link is displayed 100 times in search results in one month, you'll have 100 impressions.


If someone clicks your link in a search engine result, a click is generated. This is a common metric SEO experts use to judge the success of their efforts.

Clickthrough-Rate (CTR)

Your clickthrough rate is calculated by dividing the number of CLICKS a link receives by the number of IMPRESSIONS it has. Example: if your link is displayed 100 times in a search result in one month, that counts as 100 impressions. If 50 people clicked the link, your CTR is 50%. Again, this is a common metric SEO experts use.

Traffic Sources

Direct Traffic

When someone types your specific website's URL into their browser (i.e., they do NOT find it through search engines), it's considered direct traffic. This triggers with bookmarks, email links, etc.

Organic Search Traffic

Organic traffic is the kind of traffic SEO is concerned with. It's the traffic to your site from organic search results, such as Google, Bing and Yahoo. This excludes Paid Search Traffic.

Paid Traffic

Traffic that's the result of paid advertising within Google AdWords or Bing Advertising.

Referral Traffic

Referral traffic includes search engine traffic, but it also includes links from other websites and social channels. In fact, you can see which channel by clicking on it (Facebook, Instagram, etc.).

Do you need a hand interpreting the results of a report or a second opinion on one? Feel free to contact us or give us a call.

What are CSS Media Queries?

What are CSS Media Queries?

CSS Media queries are snippets of code web developers use for building responsive websites. They work by triggering certain conditions based on the MEDIA used to access the web page (see what I did there?). For example, we would code one set of conditions for a desktop, and use media queries trigger different conditions for different sized browsers or devices, such as phones and iPads. The conditions are often placed within a style.css sheet.

CSS Media Queries Examples

For me, it's easier to imagine CSS media queries as if they're if - then statements that modify the rule(s) above them. For example, let's say we want to build a box that spans the entire webpage left to right. We might first build a box like this:

<div class="container">pretend the image is here</div>

.container {
Width: 1920px;

We know that one iPad resolution is 768x1024. Our general if-then statement could look like this:

.container {
width: 1920px;

@media only screen and (max-width: 1024) {
  .container {
   width: 1024px;

Pretty simple, right?

Now, you can add a query for a mobile phone. If you check the Chrome Developer Tools, you'll see that the iPhone 6/7/8 Plus is 414x736.

.container {
width: 1920px;

@media only screen and (max-width: 1024) {
  .container {
   width: 1024px;

@media only screen and (max-width: 736) {
  .container {
   width: 736px;

Up until now, I've been labeling these changes by devices. Most of the time developers don't think in device types, rather, they think in breakpoints. This is because a) websites today aren't created for each device and b) media queries are used to make sure the website looks good regardless of device or desktop browser size. You see, the responsiveness isn't tied to the device, rather, it's tied to the resolution. It just happens that certain popular devices are given priority in code and are used as a shortcut for developers to minimize the time they need to build a website.

Now, examples of how CSS media queries are endless. And there are already more than enough websites dedicated to tutorials and in-depth demonstrations of their uses. I just wanted to create a short answer to a big question that's geared towards people who aren't necessarily developers but want to better understand what a responsive website is and how CSS Media Queries make them possible.

What is responsive web design

What is responsive web design?

Ever since carrying a cell phone became as important as carrying a wallet, the mobile version of a website has been a critical part of web design. You might not know this, but nearly half of a website's traffic is mobile traffic. So it isn't all that surprising that web developers and designers are always talking about responsive web design.

So.... what is it?

If you're like most people, you access websites across multiple devices -- a desktop, iPad, Kindle, cell phones, etc., and each device has a different screen size. Responsive web design is the task of making sure that the website your browsing is able to respond to each of those devices' screen size on the fly.

Flexible Grids

One of the most common ways developers accomplish this is through the use of flexible grids. A flexible grid is a series of code that makes a website shift and scale the stuff on the website automatically. What's shifted and scaled includes the layout, images, text sizes, and the general position of things. It's done with CSS media queries.

The meta-concept of responsive web design

People often credit Ethan Marcotte for the concept of Responsive Web Design. In May 2010, he published an article titled, Responsive Web Design. In it, he drew a parallel between web design and responsive architectural design. You see, one problem many buildings have is space. Build a room too small, and large groups of people won't fit comfortably. Build a room too large, and small groups of people won't fit comfortably. The solution was to move the walls. Some buildings use partitions; others use machines to move the walls mechanically. Problem solved. Ethan argued that web developers could use the same principle in web design. By using code (CSS media queries), we could adjust the web site's content to flex to the devices' screen size.
The affect CSS media queries had within web development can't be overstated. It's arguably one of the best solutions we have to answer the compatibility demands our innumerable devices and their respective screen sizes place on web designers. And this demand is so vast that some business models entirely revolve around designing plugins that allow code illiterate people to create responsive websites. It's that important.

And this sparked an entirely new way of thinking about web design.

There are a lot of screen resolutions

New mobile devices are created every year. And more devices equal additional screen resolutions, which also include orientations (portrait and landscape). Given the rising popularity and capability of smartphones, how is someone able to design for all these ever-evolving situations?

We make everything flexible

Flexible layouts were a “luxury add-on” for websites a few years ago. And things weren't THAT flexible. Back then, the only things that were flexible were the layout columns (i.e., structural elements) and the text. Images more often than not break the layout as it resized, and even flexible structural elements broke down when sized down small enough.

Today, things are much more flexible. Images can be coded to adjust automatically, and we have workarounds to prevent layouts from entirely breaking down (although they may become squished and illegible in the process). While it’s not a total fix, the solutions we have today give us far more options. Added bonus: today's flexibility's perfect for devices that switch from portrait to landscape or for when users switch from a large computer screen to an iPad.


I hope this brief article helps you better understand what a responsive website is. While there is a ton more information out there about this, this should be enough to help you understand what this all is. So you're aware, there are limitations to CSS Media queries and flexible/fluid grids we haven't talked about. Maybe I'll write something about that in the future. But for now, responsive websites provide you, the user, a custom website designed for you without the developer having to spend too much time coding every single screen size. I call that a win-win.

Google Is Removing Third Party Cookies by 2022

Google Is Removing Third Party Cookies by 2022

A quick summary. Google's replacing third-party cookies with browser-based tools. They say their goal is to increase user privacy and personalization.

What are third-party cookies?

A third-party cookie's a cookie that's downloaded to your computer by your browser from a website OTHER than the one you're visiting. For example, you visit and you recieve a cookie from

A bit more about cookies.
Cookies are tiny bits of data stored on your computer. They are designed to store information on your computer for later use. Some examples include your shopping cart items in an eCommerce website (such as shopify), information for analytics (like if you're a new or returning user), or login information (so when you return your preferences are saved). While this is all well and good, cookies also have some serious drawbacks if you're concerned with privacy.

As mentioned above, cookies provide and track data. And the tracking extends far beyond your current browsing session. Advertisers and marketers keep track of as much of your browsing history as possible, and use this to create mini-profiles and campaigns targetting you. Here's a common scenario I'm sure you've expereinced: you browse look up some information on a car, or visit a site to read some reviews about boots. Next thing you know, you begin seeing advertisements for everything you've recently browsed in popular social media channels like YouTube, Instagram and Facebook.

Does this mean in-browser advertising and targeted advertisements are gone?
No. Instead, Google intends to gather your data directly through its browser Chrome (rather than through a cookie). Any leftover cookies will be handled differently, for example, their data will be sent only over HTTPS (instead of HTTP), amongst some other changes.

There's a bit of speculation and uncertainty on how exactly cookies will be handled, and the entire roadmap isn't out. So, in order to avoid speculation, I'll stop the article here and provide an update when more concrete information is available.

Web Design Agency vs. Web Development Agency

What's the difference between a Web design agency vs. web development agency?

I'd argue that as far as the general public is concerned, the differences between web design agencies and web development agencies are near nothing. But there is value in knowing the broad differences between the two. And in order to better understand it, let's look take the word agency off of the table and look at the concept of web design and web development independently.

Web Design vs. Web Development

A web designer tends to be focused on the look and feel of the website. They're hopefully someone who's taking the users' experience (or UX design) into consideration. A few of the aspects they're considering are button placement, CTAs (call-to-actions), branding consistency, how close the text is to it's other supporting elements, and how the website responds across different devices, i.e., mobile, tablet and desktop. There's a lot that can be said about this, and that list is definitely not exhaustive, but to keep it brief, I'll leave it at that.

A web developer tends to be the person coding the site. If they're like us, they're using a back-end like WordPress, often customizing the website's foundation to fit the design the web designer provides. This person is usually more comfortable with coding. They often know HTML and CSS, and sometimes have additional experience with PHP, JavaScript Python, etc.

Now, the designer and the developer are sometimes the same person. And the experience with both sides of that coin varies from person to person.

In our case, we have a person dedicated to web design / UX design, and another dedicated to the development side of things.

Do you need a web design agency or a web development agency?

That really depends on what you need out of your website. Like I said at the beginning of this article, in my opinion, the differences between the two are very slight. And this is because web developers and web designers are working together very closely. The result is businesses provide both to one extent or another.

However, the general rule of thumb is this: if you're leaning towards an eCommerce website with hundreds if not thousands of products, you'll usually be working with an agency that leans towards the web development side of things. This is mainly because of the development demands eCommerce websites require. Smaller to mid-sized companies who focus on building their presence through blogs, portfolios, and local SEO efforts typically agencies who lean towards the web design side of things.

Do you have more questions about this topic or just some questions in general? Feel free to reach out.

How do web designers make websites (coding)?

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, 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