Scribd
Upload
35 views29 pages

Introduccion CHATGPT WEB

The webinar will cover HTML, CSS, and AI introductions. Attendees will learn how to build a landing page using these technologies. They will set up a development environment in Visual Studio Code and learn the basic structures of HTML and CSS, including common tags and properties. An introduction to ChatGPT will also be provided, along with resources for further learning.

Uploaded by

Edu Campre
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
35 views29 pages

Introduccion CHATGPT WEB

The webinar will cover HTML, CSS, and AI introductions. Attendees will learn how to build a landing page using these technologies. They will set up a development environment in Visual Studio Code and learn the basic structures of HTML and CSS, including common tags and properties. An introduction to ChatGPT will also be provided, along with resources for further learning.

Uploaded by

Edu Campre
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

Webinar

HTML & CSS & AI


What are we learning today?
● What are we building?
● Dev Environment
● HTML Intro
● CSS Intro
● AI Intro
● Resources
What are we building?
Landing Page
● Welcome Header
● Navbar
● 4 Sections with various
functionalities
● Footer
What are we learning today?
● What are we building?
● Dev Environment
● HTML Intro
● CSS Intro
● AI Intro
● Resources
What is VS code ?
Visual Studio Code is a source-code editor made by Microsoft.

run
How does this work?

The Dev The Server The Client


Environment
(IDE)
LiveServer
What are we learning today?
● What are we building?
● Dev Environment
● HTML Intro
● CSS Intro
● AI Intro
● Resources
What’s a website composed by ?
HTM
CSS JS
L
Let’s check it out!

www.ironhack.com
What is HTML ?
Basic structure of a HTML file

In VS code, we can generate the initial structure by typing “!” or “html:5”


Some commonly used tags
<h1> <p> <span>
For create titles. See For individual text sections
For paragraphs
other <h> inside other text elements

<img> <a> <button>


Anchor tags are used to link To create buttons
For images to internal/external sections/ obviously
pages
Tags to wrap content
<div> <header> <section>
A semantic element to
To define contained A semantic element to create logical divisions in
elements create headers. the page

<nav> <footer> <form>


A semantic element to To show forms, see
A semantic element to
create nav bar items also <label>, <input>
create a footer
and <textarea>
All HTML Elements
Interactive HTML Cheat Sheet
What are we learning today?
● What are we building?
● Dev Environment
● HTML Intro
● CSS Intro
● AI Intro
● Resources
What is CSS?
How can we target HTML elements ?

By Tag By Id By Class
Some CSS properties
background-color Sets the color of the background

color Sets the font color

margin Separation between border and outer elements

padding Separation between content and the border

height Sets the vertical size of the element

width Sets the horizontal size of the element


All CSS Properties
Interactive CSS Cheat Sheet
What are we learning today?
● What are we building?
● Dev Environment
● HTML Intro
● CSS Intro
● AI Intro
● Resources
What is chatGPT?

ChatGPT is an artificial intelligence chatbot


developed by OpenAI based on the company's
Language Model called Generative Pre-trained
Transformer (GPT)
What are we learning today?
● What are we building?
● Dev Environment
● HTML Intro
● CSS Intro
● AI Intro
● Resources
Resources
● Visual Studio Code
● … or Web Dev Online Playground Codepen
● Simple Wireframe Tool: Excalidraw
● Web Dev Documentation in MDN
● HTML Elements: Documentation - Cheat Sheet
● CSS Properties: Documentation - Cheat Sheet
● ChatGPT
● Flexbox Documentation
● Github Repository with all the code done in the webinar (once webinar is over)

You might also like