Software Solutions

Student Voices: Your Website’s Front End, Explained

There is a lot that goes into the development of a website, far more than can be expressed in this single blog post. But for those interested in understanding the process, the front-end is a great place to start. Now, what exactly is the front-end? Well, you’re looking at it right now! Whatever the user […]

by | Aug 18, 2021

There is a lot that goes into the development of a website, far more than can be expressed in this single blog post. But for those interested in understanding the process, the front-end is a great place to start.

Now, what exactly is the front-end? Well, you’re looking at it right now! Whatever the user is seeing on a given website is the front-end: the interfaces, pictures, design, and more are all on the front-end of the website. In fact, you can see part of this website’s front-end structure right now just by pressing ctrl + shift + I and navigating to the elements tab. Hover your mouse over the text and you’ll see parts of the website that code corresponds to highlighted.

Unfortunately, it takes a lot more than just the HTML code you’re looking at to make this whole thing run – it takes a framework to put everything together. One such framework we’ll be discussing today is called Angular.

Angular is broken up into components which are themselves broken into four files, three of which we’ll be focusing on: HTML, Typescript, and CSS files. To start, the HTML file determines how the site layout will be set up. Think of it as a blueprint which determines what elements go where and what properties they have. You can set this blueprint up by creating dividers for each page element, like a page’s header for example. These dividers can interact with other parts of the component by having a set class, but we’ll get into that later. The HTML file also determines how the user will interface with your site, setting which functions occur when users interact with certain elements. Now you might be wondering if this file does all that, what exactly is the point of the other two?

Well, as mentioned before, a site most likely has functions that run under certain circumstances, such as a user clicking a button to open an image of a puppy saved on your site’s back-end. Without the Typescript file, clicking that button wouldn’t do a thing, even if the HTML file called for it. The Typescript file is where you go to define the behavior of the functions used in the HTML file. This division of labor lets you can quickly check the functions and layout of a page on two separate files. Additionally, these functions typically require some work on the back-end (the elements of your website you don’t want the user to see such as your databases) which is best done by calling functions set up in services following good coding practices.

After setting all that up, you’d technically have a functional site. I mean technically because it would resemble a white page with all your elements huddled in the top right-hand corner. Now, how exactly do we get from that mess to something that you could show other people? Simple: you utilize the CSS file to pretty it up. The CSS file allows you to format elements set up in the HTML file so that you can customize the bare bones site into something presentable. CSS files do this by having specified formats for classes created in the dividers within the HTML file. For example, let’s say you wanted some headers to be pink. To do this, you would set a common class name in each targeted header in the HTML file and add color formatting to make those elements pink in the CSS file. Presto! You have some pink headers now.

I’d like to say that’s it, but the world of Angular goes much deeper than my very top level run down of it. If you found this interesting and would like to figure out all those details, I would highly encourage you to check out this simple tutorial offered on Angular’s site. The tutorial takes you through what I’ve talked about in much greater detail, as well as other practices to keep in mind when using Angular for development. It’s a great resources for getting started and to keep around as an example project. Also helpful are Codecademy’s tutorials on HTML, JavaScript, Typescript, and CSS, but that’s less specific to Angular and more general knowledge on those languages.

Alternatively, you can leave development to the experts at Exelaration, who understand programming best practices and can help businesses take their tech to the next level.

 

matthew.enzinna@exelaration.com

Matthew Enzinna is a junior at Virginia Tech studying computer engineering with a focus on chip scale integration. Matthew joined Exelaration in spring 2021 and is currently working with Blue Tractor to help run DevOps for the company’s Alpha Shielding software. Outside of Exelaration Matthew works as a residential advisor and with the Astrobotics design team at Virginia Tech. In his spare time, Matthew enjoys Dungeons and Dragons with friends as well as a good jog.

Related Posts