Web Development:
Front End Basics

Who is this guide for?

Internet technology is constantly evolving. If you are interested in web design, this overview might be a good starting point. Perhaps you've built a simple project website or utilized online tools like WordPress, but want to know more about creating and editing, or using your own code. This guide will introduce you to some key web technologies including HTML, CSS, and JavaScript.

design mockup

HTML

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.

<h3>HTML</h3>

<p>
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.
</p>

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/

Girl demonstrating responsive design at computer

CSS

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.

Open Sans
Roboto Condensed
Merriweather
Roboto Slab
Raleway


HTML SOURCE:

<div class="a">Open Sans</div>
<div class="b">Roboto Condensed</div>
<div class="c">Merriweather</div>
<div class="d">Roboto Slab</div>
<div class="e">Raleway</div>


CSS SOURCE:
.a {
background: rgb(50,0,50);
font-family: 'Open Sans', sans-serif;
color: rgb(250,100,100);
font-size: 1.5em;}

.a:hover {
background: rgb(70,20,70);
font-family: 'Open Sans', sans-serif;
color: rgb(250,100,100);
font-size: 1.5em;
font-variant-caps: all-small-caps;
}

.b {
background: rgb(90,0,50);
font-family: 'Roboto Condensed', sans-serif;
color: rgb(250,75,75);
font-size: 2em;}

.b:hover {
background: rgb(110,20,70);
font-family: 'Roboto Condensed', sans-serif;
color: rgb(250,75,75);
font-size: 2em;
font-variant-caps: all-small-caps;
}

.c {
background: rgb(120,0,50);
font-family: 'Merriweather', serif;
color: rgb(250,50,50);
font-size: 3em;}

.c:hover {
background: rgb(120,0,50);
font-family: 'Merriweather', serif;
color: rgb(255,120,120);
font-size: 3em;
font-variant-caps: all-small-caps;
}

.d {
background: rgb(200,0,50);
font-family: 'Roboto Slab', serif;
color: rgb(250,45,25);
font-size: 2em;}

.d:hover {
background: rgb(180,0,30);
font-family: 'Roboto Slab', serif;
color: rgb(250,25,25);
font-size: 2em;
font-variant-caps: all-small-caps;
}

.e {
background: rgb(255,0,50);
font-family: 'Raleway', sans-serif;
color: rgb(100,0,0);
font-size: 3em;}

.e:hover {
background: rgb(255,0,50);
font-family: 'Raleway', sans-serif;
color: rgb(120,0,50);
font-size: 3em;
font-variant-caps: all-small-caps;
}

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.



JAVASCRIPT

JavaScript is the programming language of the web. To continue our building analogy, JavaScript is like the electricity and water flowing throughout your home. The languages applications are extremely varied from implementing interactive website features to tracking consumer behavior. Scripts can also be malicious and exploit security vulnerabilities.

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.


js logo
<script></script>
<img alt="js logo" class="graphic size" id="switch" src="img/js1.jpg">
<button onclick="document.getElementById('switch').src='img/js.jpg'">On</button>




Conclusion

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: christopher@christopher-murray.com