marcomontalbano / an-introduction-to-frontend

A course I developed in 2017 to introduce backend developers and interns at Sopra Steria to the fundamentals of frontend development.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

An introduction to Frontend

Welcome to An introduction to Frontend, a learning resource designed to get you started with the fundamentals of frontend development.

In 2017, I developed and delivered a course tailored as an introductory program on frontend development specifically designed for backend developers and interns at Sopra Steria.

The course slides are available for reference here:

An introduction to Frontend - 2020 Edition - Slide 1

What will you learn?

The course covers various topics to equip you with a solid foundation in frontend development, including:

  • Building basic web pages with HTML and applying styles with CSS.
  • Learning the fundamentals of JavaScript and DOM manipulation to make your webpages interactive.
  • Understanding the benefits of using tools like:
    • NPM (Node Package Manager): A tool for managing code dependencies in your projects.
    • Parcel: It combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.
    • Sass: A CSS preprocessor that extend the capabilities of CSS for writing cleaner and more maintainable styles.

Getting started

To get started, you'll need a text editor or IDE (Integrated Development Environment) for writing code. Popular options include Visual Studio Code, Sublime Text, or Atom. Once you have a code editor, follow these steps:

git clone https://github.com/marcomontalbano/an-introduction-to-frontend.git

npm install

npm start
# http://localhost:1234

You can find the final result here: https://marcomontalbano.com/an-introduction-to-frontend

About

A course I developed in 2017 to introduce backend developers and interns at Sopra Steria to the fundamentals of frontend development.

License:MIT License


Languages

Language:HTML 39.6%Language:JavaScript 35.2%Language:SCSS 25.2%