Introduction to Front End Engineering
The Front End is the part of the application that users see, touch, and interact with. When we’re talking about web development, the Front End is the part of the code base that takes care of rendering the user interface in the web browser.
Over the last decade, the web has evolved from a platform that served static web pages with content to a platform that provides rich, interactive experiences to users.
Goals
- Build and customize an interactive website
- Gain exposure and familiarity with some HTML and CSS
- Determine if coding is something you enjoy doing and want to pursue further
Online Learning Norms
- Ask your questions and share your code in the chat.
- Mute your microphone.
- Keep your camera on during class (if possible).
- Disconnected? Jump back on!
Zoom Tools
Want to get my attention during the workshop? Raise your hand or type your question in the chat.
- Raise Hand - Find the reactions button in your zoom toolbar and raise your hand.
- Zoom Chat - Introduce yourself! In the chat, please share your name, pronouns, location, and why you’re here!
Programming Languages We Will Use
Writing code to build a Front End requires using three programming languages, and making the code in each language “talk to” the code in the others.
It can feel like a lot, but let’s start by understanding the role of each language in the context of our application. We will make some comparisons to the human body as a frame of reference.
HTML
HTML holds the content we see on a page (text, images) and defines the structure and order in which the content appears.
We can think of HTML as the skeleton of our webpage; without it, we'd just be a blob:
CSS
CSS defines the look and feel of a webpage - it can change the size or layout of items on a page, change colors, fonts, and more!
We can think of CSS as anything that makes us unique and recognizable - our skin, hair, clothes, style, etc.
JavaScript
JavaScript is what lets the user interact with a page. For example, clicking a button and getting some sort of response.
We can think of JavaScript as the brain and muscle of our webpage, as it powers all the action:
Be Nice to Yourself
This might be your very first day working with code. Learning is often uncomfortable and things are bound to break. When this happens, there are few things you can check first:
- Did you spell everything correctly? Capitalization matters!
- Do you have closing symbols for every opening symbol? Every opening bracket needs a matching closing bracket.
- Do the colors follow a predictable pattern? If the colors are consistent and then all of the sudden change, it could be a clue that something isn’t quite right.
Project Setup
We will work off of a starter kit that has already been created. Before we jump into writing code in CodePen, lets tour the screenshot below to get an idea of what to expect.
In the next part of the lesson, we will explore the HTML file to understand the “bones” of this app.