Your First Frontend Application

Table of contents

• Table of contents
• Setting up the dev envirement
• Some vscode extentions
• Pre-requisites
• Your Job
• Resources

⚠️ NOTE ⚠️

This workshop will not be teaching you the basics of html, css or js. The purpose of this workshop is to help you better understand how to impliment these 3 languages in a real web app that we might deploy after.

Setting up the dev envirement

1. Required software

Before starting, make sure your computer has up-to-date versions of the following installed:

• Node/NPM (choose the LTS option, which should be version 16.13)
• Git
• Visual Studio Code
  • If using a Mac, also follow these steps to install the code terminal command.
  • If you already had VS Code installed, check for updates!

2. Installing and opening the project

• Open VS Code and then press ctrl + ` (backtick, in top left corner of keyboard) to open the built-in terminal
• Use the cd (change directory) command to find an appropriate place for your code
• Type git clone https://github.com/AWIXOR/1337-HtML-CSS-workshop into the terminal to pull down a copy of the workshop code
• Type cd 1337-HtML-CSS-workshop to change your current directory to the workshop folder
• Type code -r . to open the bootcamp code in VS Code

If on a Mac, be sure you've followed these steps first to make the code command available.

Install some vscode extentions

• Vim (Optional)
• vscode icons (Recommanded)
• Prettier (Recommanded)
• Live server (Required)
• Eslint (Recommanded)
• Auto Close tag (Optional)

Pre-requisites

- HTML basics

- CSS basics

Your Job

In this repo you will find in the folder Our-web-app. It's the initial setup for the application.

This is the file structure:

.
├── design              # Folder where you will find the final design of the app.
├── images              # Folder contains all the assets (images and icons) you will need
├── .gitignore          # gitignore file same as the one you saw in C pool.
├── index.html          # The is the file you will be editing.
└── style-guide.md      # Some styles guide for the web page.

Basically you need to build a web page that looks like the image below using the assets given.

Make it work

In order to see your changes directly in the browser without refreshing the page, after installing the Live server extention, you will need to navigate to the index.html file the click the Go live button at the bottom of the vscode, same as what is shown in the extention page here.

Resources

• Master HTML (Darija)
• Master CSS (Darija)
• HTML Tutorial for Beginners (English)
• HTML & CSS Crash Course Tutorial (The Net Ninja)
• A Complete Guide to Flexbox
• A Complete Guide to Grid

Happy coding!