Front-end: An Overview
- Every time you interact with a website using a browser such as Chrome or Edge, data is displayed onto your screen.
- Words, pictures, buttons you click, how it looks and what happens all creates a user experience.
- This is known as a User Interface, and is the core of Front-End development.
Front-End: An Overview
- Go to this website (to be created) with your browser of choice, right-click, and select ‘Inspect’.
- In the Elements tab, you will see a
<!DOCTYPE html>
, with a <header>
and <body>
section. In the <body>
, you’ll notice <div>
s and <script>
s are present.
- This structure represents the core design of a website.
Front-End: An Overview
- HyperText Markup Language (HTML) provides structure in the elements, while Cascading Style Sheets (CSS) define the layout and design.
- JavaScript, written inside
<script>
tags, adds interactivity, making the page come alive.
- Together, HTML, CSS, and JavaScript create a highly customizable and interactive User Experience.
Why Learn Front-End Design?
- Front-end is critical to user engagement.
- Fast-loading, intuitive, and interactive websites drive up user engagement, reduce user errors, and increase the efficient use of databases.
- Skilled front-end engineering creates websites that are adaptable across various devices, from phones and tablets to PCs.
What’s in This Course
- Explore the basics of front-end design and development.
- Use Git Codespaces to create a simple website using HTML.
- Learn how to style and make the website responsive using CSS.
- After an introduction to JavaScript, we’ll add interactivity with simple scripts.