Guide to Web Development

How Does a Website Work?

 A website is a collection of individual documents and files made up of text, graphics, colours, links, and formatting that come together to create a complete user experience. Websites are accessible through web browsers. A web browser is a computer application capable of downloading and displaying the files and components that make up a website. Websites and their associated HTML documents and files are stored on computers called web servers. Combining everything When you type a domain name into your web browser, your browser sends a request to a web server where the website’s files are located. Your browser downloads these files, usually HTML documents and accompanying images or videos, and renders them on your screen. HTML and other languages used to display the data by your web browser are typically referred to as front-end technologies in the web-development space because of their user-facing tendencies. As you enter things like credit card information or submit a form on a site, the data you send back and forth to the web server is managed by server-side languages, sometimes referred to as back-end technologies. These languages make the organizing of databases easier, as well as manage user requests for new web pages as they navigate a site.

 

Writing your first web page

Once you’ve got an idea for the kind of web page you want to build, you’ll need to start writing some HTML and CSS.

HTML is a mark-up language that was created solely for making web pages. The idea is that, at their core, web pages are just a bunch of text and images arranged on the screen in different ways, and mark-up is just a way to attach instructions for how to make those text and images appear. Which Browser Should you Use? – The web browser knows how to take all those tags and the content inside them and display them as a web page. But if all browsers have the ability to display web pages, then why isn’t there just one instead of multiple? Well, each browser implements the rendering of HTML and CSS a little differently. This is actually a source of much stress for web developers — they have no way to control which web browser a user will experience their site with, so they spend a lot of time tweaking CSS to ensure it displays equally as close as possible across all different browsers. Styling the Page can be done While HTML is a mark-up language used for arranging content on a page, CSS is a separate language for changing the style of how those tags are displayed. We started this article by removing all the CSS, so let’s look at how we can add CSS back in.

Server-side Languages

Websites require two key components to function: a client and a web server. Clients, as we’ve learned, are any web browser or device that’s used to view and interact with a website. All of the files and data associated with displaying a website on a client are stored on a web server. If you’ve ever purchased something online, many of the processes necessary to complete a transaction happen on the shop’s web server. Shopping sites need things like user accounts, up-to-date inventories, product descriptions, the ability to receive shipping and credit card information, and a place for shoppers to review products they’ve purchased. This information is stored in large databases on web servers, away from users’ web browsers. In order to display products on the screen, you would need a programming language that runs on a server. Such a programming language would take care of creating, reading, updating, and deleting products from a database, which is where the products are stored. Languages that do this are referred to as server-side languages. Below are a few popular server-side languages you may have heard of (presented in alphabetical order), as well as the most popular frameworks used to simplify workflows and establish development standards across teams.

C# (pronounced C-Sharp)

C# was developed by Microsoft and is typically used by businesses to manage large databases. Because of the prevalence of existing Microsoft software in businesses, C# was adopted quickly.

Making Web Pages More Interactive With JavaScript

In the early days of the web, web pages were largely static — meaning that after a site’s HTML documents were downloaded and displayed by the web browser, the content wouldn’t change. To display changes made on a web page, the web browser would have to download a completely new version of the HTML documents from the web server — a slow and inefficient process. The language capable of providing much of this interactivity and responsiveness is called JavaScript, and it runs directly inside of the web browser. All modern web browsers are capable of interpreting the JavaScript language. JavaScript code is written in separate files that are downloaded alongside a site’s HTML documents when the browser visits a website. Both file types are capable of referencing each other’s content.

Creating a Button

To conceptualize some of the things JavaScript is capable of, let’s take a look at a button that changes colour every time it’s clicked. Let’s assume we created this purple button using HTML. Using JavaScript code, we’re able to “watch” for when a user clicks our button. After we see a user click, we can use JavaScript to change the button’s colour to green.

Without JavaScript responding to user input in real time, our button wouldn’t have the ability to change colours when clicked. Before JavaScript, we would have had to re-download an entirely new HTML document that contained a green button instead of a purple button in order to display the change to the user.

 

Deploying your first website

Once you’ve put in all the hard work of creating a website, you need to get it on the web so people can navigate to it and access its content. This process is called deployment. Deployment is a fancy word for “getting your website on the web,” and there are a few different parts of that process we’ll discuss below:

  • Finding a domain name
  • Finding a hosting service
  • Uploading files with SFTP
  • Deploying server-side applications

 

Semantic HTML

HTML is a mark-up language, which means it’s made up of two things: content and mark-up to describe that content. In HTML, mark-up exists in the form of different tags, and you can use those tags to describe the individual pieces of content throughout a website. When a site’s mark-up is “semantic,” it means the tags appropriately describe the content.

Why Is Semantic HTML Important?

Before a browser can show anything on screen, it has to read a website’s HTML and then figure out what to do with it. Every HTML tag has its own default styles and behaviour, so if the wrong tag gets used on some content, that element won’t work in the browser as expected. Semantic mark-up is important because it keeps websites working in a consistent and usable way.

CSS Pre-processors and Frameworks

CSS pre-processors and frameworks are both tools to help developers save time building websites. A CSS pre-processor is its own language built on top of CSS that adds scripting functionality. A CSS framework is a prewritten style sheet that includes its own layout and theme for user interface elements.

CSS Pre-processors

CSS is designed to be a simple language. It’s intuitive to learn CSS and write it on small websites, but on larger, more complex websites, writing CSS can become very tedious. That’s where pre-processors come in. Developers wanted more options when writing their style sheets, so they created CSS pre-processors to add programming functionality.

CSS Frameworks

CSS frameworks contain prewritten styles for common design elements across the web. Websites today often need a lot of the same things: buttons, tables, forms, and grids, for example. CSS frameworks offer a quick and well-documented way to style all of these and more.

Frameworks like Bootstrap and Foundation are popular open source projects with hundreds of contributors. Their code is well tested by developers all over the world.

Building Responsive Websites

Web designers and developers used to just make different versions of websites for different devices, but now that sites are viewable on desktop, laptop, Smartphone, and tablet screens, there needs to be a way to build a single website that can display appropriately on each device. Enter responsive websites.

A single, responsive website offers people a consistent experience across all their devices.

Build Once, Not Twice

Responsive web design doesn’t just make things easy to use and understand for users — it’s also better for web designers and developers. Creating a responsive website means coordinating design and development all at once, rather than separately for different desktop and mobile sites. It’s much simpler to design and develop one website than two.

Single-page Applications

The term “single-page application” (or SPA) is usually used to describe applications that were built for the web. These applications are accessed via a web browser like other websites, but offer more dynamic interactions resembling native mobile and desktop apps.

The most notable difference between a regular website and an SPA is the reduced amount of page refreshes. SPAs have a heavier usage of AJAX — a way to communicate with back-end servers without doing a full page refresh — to get data loaded into our application. As a result, the process of rendering pages happens mostly on the client-side.

There are a lot of open source JavaScript frameworks that help with building SPAs, such as:

 

Learning Git and Version Control

If we could only pick one tool for any modern web developer to learn, it would be Git. Git is a version control system (VCS) that helps you manage changes to all the files in your project as you write and change code. Git also has the added benefit of being a distributed VCS, which means teams with many developers can use Git to avoid issues while working on the same part of an app at the same time.

Before we dig deeper into what Git is actually doing, let’s talk about how making changes to files works without a version control system.

Open Source Contributions

Open source software generally means code that is open to the public, and anyone is welcome to propose changes or enhancements to it. (Keep in mind, though, that just because open source software is open to the public does not mean it is not subject to proper licensing and copyright laws.)

Most of the world’s open source code today lives under a service called GitHub, which not only hosts code but also allows people to manage and moderate the code repositories. Having an active GitHub account with relevant open source contributions in your field of work has become increasingly more attractive to prospective employers and is slowly becoming a standard measurement for the quality of an engineer.

Choosing an IDE or Text Editor

Three popular text-based code editors are Sublime TextAtom, and Visual Studio Code. Each of these offer features beyond just simple text editing, like standardizing the colours that are used to display different parts of code so you can easily understand code at a glance, powerful find and replace that lets you find all instances of a variable in a certain scope and just replace those, and multiple editing panels in a single window so you can view several related files at once (like HTML, CSS, and JavaScript files). These editors also have a community-driven plugin system so they can be extended to perform all sorts of useful tasks.

 

 

 

 

 

 

 

 

 

 

 

 

 

    Contact us

Leave a Reply

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