TECH GUY
  • Home
  • Lesson
    Lesson 1 Lesson 2 Lesson 3
  • My Portfolio
  • Exercises

LESSON 1

Frontend Versus Backend

You may hear web designers and developers say that they specialize in either the frontend or backend of website creation. I, personally specializes in frontend of website creation. This whole lessons focuses primarily on frontend web design.

Frontend design

“Frontend” refers to any aspect of the design process that appears in or relates directly to the browser. The following tasks are commonly considered to be frontend tasks:

  • Graphic design and image production
  • Interface design
  • Information design as it pertains to the user’s experience of the site
  • HTML document and style sheet development
  • JavaScript

Backend development

“Backend” refers to the programs and scripts that work on the server behind the scenes to make web pages dynamic and interactive. In general, backend web development falls in the hands of experienced programmers, but it is good for all web designers to be familiar with backend functionality. The following tasks take place on the backend:

  • Information design as it pertains to how the information is organized on the server
  • Forms processing
  • Database programming
  • Content management systems
  • Other server-side web applications using PHP, JSP, Ruby, ASP.NET, Java, and other programming languages

HtML Markup for Structure

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages.

  • Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext.
  • As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display.

Before we begin, to be writing out HTML documents by hand, so the first thing we need to do is launch a text editor. I will recommend VS code editor. That's what I use in writing my codes. You'll definitely love it.

Creating a new document in VS code (Windows)

In this section, I'll show how to open new documents in VS code. There is a video below that shows how to setup VS code.