Introduction to Web Development

Workshop

Student Summer Sprint

Intro to web dev

• Frontend
• HTML (Hypertext Markup Language). It used to describe the structure of a web page
• CSS (Cascading Style Sheets). It used to style html elements.
• JavaScript. It’s a programming language that used to create interactive websites.

https://html-css-js.com/

• Backend
• Programming Language (PHP, Ruby, Python, JS)
• Database (MySQL, PostgreSQL)

HTML

• HTML is the standard markup language for Web pages.
• HTML document consist of elements.

HTML

Simple HTML document

​

HTML

Famous HTML elements:-

• Headings
• Paragraph
• Lists
• Images
• Links
• Forms
• Div and Span

HTML

Summary

• HTML is the standard markup language for Web pages.
• HTML documents consist of elements.
• HTML elements are defined by a start tag, some content, and an end tag. <tagname>Some Content…</tagname>
• HTML elements can have attributes

CSS

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS

• Syntax

​

h1

{

color: red;

background-color: black;

}

selector

property

value

CSS

• Selectors:

JavaScript

JavaScript is a programming language that is used to create interactive websites.

What we will learn:

• Variables
• Functions
• jQuery

Bootstrap

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

Bootstrap

Grid System

Row

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-12

col-4

col-8

Create a personal website

Summary

• HTML
• Tags
• Attributes
• CSS
• Syntax
• Selectors
• JS
• Variables
• Functions
• JQuery
• Bootstrap
• Grid System

Next Step

1. W3Schools (https://www.w3schools.com)

​

• Educative (https://www.educative.io/courses/learn-html-css-javascript-from-scratch)

​

Goodbye