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 […]
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.
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.
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 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...