HTML is the foundation of a webpage. It is the base layer of information that dictates how content is displayed and how the user can interact with that content. Below is an example of the HTML tags being used to organize this element.
HTML is a relatively simple language to learn. In the example above you see the tags create a new heading text and a paragraph. Using HTML, you can create simple websites that have text, images, and hyperlinks to internal pages or external sites. There are so many great resources on the web for learning HTML. My favorite is one that I've been using since 1998, HTML Goodies.
Check them out here: https://www.htmlgoodies.com/
Cascading Style Sheets (CSS), as the name suggests, are used to add style to a web page. If HTML represents the structure of a home, then CSS is like the paint and decor the owner uses to create a mood or provide functionality. CSS can be used to create a lot of interesting effects. It allows designers to express more creativity and make web browsing more enjoyable. CSS also allows for responsive design techniques that bridge the gap between the mobile and desktop experience. Things like web fonts have also helped to make the internet more consistent across different devices.
In fact, all the fonts on this website will be displayed as Google Web Fonts where available. These fonts are supported by all modern web browsers and created by importing a stylesheet. That means it's no longer necessary to have a specific font installed on your OS to see it rendered. Below you will see some web fonts displayed with fun color effects. This is best viewed on a desktop. The functionality is limited from a smart phone because it uses the hover command to change colors when your cursor moves over the element.
Each segment is similar. I've given each a name, a background color, and text color. Style effects are used to import the web fonts and set their size. The font changes to Small Caps when hovered over as well.
Click the buttons below to change the modified image to the standard JS icon. You can view the code snippet below to see what is happening.
I hope this brief tutorial has enhanced your understanding of how websites are created. This is only a surface level introduction to front end technologies used in web development.
I will be working on more tutorials for the future, find out more about Front End vs Back End here: https://www.pluralsight.com/blog/film-games/whats-difference-front-end-back-end
In the meantime, if you have any questions for me, please send me an email at: firstname.lastname@example.org