https://github.com/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.
https://github.com/marcomontalbano/an-introduction-to-frontend

course dom-manipulation es6 frontend nodejs parcel scss slides vanilla-javascript

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/marcomontalbano/an-introduction-to-frontend
• Owner: marcomontalbano
• License: mit
• Created: 2017-04-13T16:53:22.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2024-04-28T04:41:25.000Z (7 months ago)
• Last Synced: 2024-10-05T23:14:53.596Z (about 2 months ago)
• Topics: course, dom-manipulation, es6, frontend, nodejs, parcel, scss, slides, vanilla-javascript
• Language: HTML
• Homepage:
• Size: 17.5 MB
• Stars: 1
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](./slide-1-play.png)](https://speakerdeck.com/marcomontalbano/an-introduction-to-frontend-2020-edition)

## 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**](https://developer.mozilla.org/en-US/docs/Web/HTML) and applying styles with [**CSS**](https://developer.mozilla.org/en-US/docs/Web/CSS).

* Learning the fundamentals of [**JavaScript**](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and **DOM manipulation** to make your webpages interactive. 

* Understanding the benefits of using tools like:

  * **[NPM](https://www.npmjs.com/) (Node Package Manager)**:  A tool for managing code dependencies in your projects. 

  * [**Parcel**](https://parceljs.org/): 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**](https://sass-lang.com/): 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:

```sh

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