Exelaration

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.

Share this

Share on Twitter Share on Facebook Share on LinkedIn

Related Posts

Why Your Developers Are Leaving

by | Sep 09, 2021 | Exelaration

“Big Chief’s gotta move on.” This is a family saying in our house, and we don’t really know why. When it’s time to leave or switch activities, we use this phrase...

Why Forward-Thinking Startups Are Outsourcing Their Tech Projects

by | Jun 17, 2021 | Digital Service Delivery

Exelaration partners with lots of companies, but recently we have noticed an undeniable shift in our client base. A new type of client has emerged – the startup – and it’s...

The ELITE Grant’s Impact on Region 2 Employers

by | Jun 10, 2021 | Exelaration

The Experiential Learning in Tech Employment (ELITE) Grant has launched as Virginia’s first ever work-based learning grant for mentored software developers. These two inaugural projects engage student engineers from Virginia Tech...

Does Your Team Have a Ban on Learning?

by | Feb 17, 2021 | Exelaration

The quote landed with a thud. “On our project, we don’t want anyone learning on the job.” Someone said this to me in a meeting, and I couldn’t get it out...

Our Clients Include: