Intro to HTML + CSS

2 likes1,619 views

This document is a class roadmap for an introductory course on HTML and CSS taught by Jamal O'Garro. The course covers the basics of HTML structure and elements, introduces CSS rules and properties for styling elements, explores CSS positioning and the box model, and provides an overview of responsive design and Bootstrap.

Technology

CODE CREW | INTRO TO HTML + CSS
INTRO TO
HTML + CSS
Jamal O’Garro
Code Crew
Software Engineer + Instructor

CODE CREW | INTRO TO HTML + CSS
CLASS ROADMAP

CODE CREW | INTRO TO HTML + CSS
WHAT IS HTML?

CODE CREW | INTRO TO HTML + CSS
WHAT IS HTML? (continued)

CODE CREW | INTRO TO HTML + CSS
HTML STRUCTURE
• Similar to a news article or word document
• Header, paragraphs, images
• Elements tell the browser what part is a header,
paragraph, etc.

CODE CREW | INTRO TO HTML + CSS
HTML STRUCTURE (continued)

CODE CREW | INTRO TO HTML + CSS
HTML ELEMENTS

HTML ELEMENTS (continued)
Head
Paragraph
Link
Image
List
List Item
Table
Div
Span
Section
Nav
Article
Header/Footer
Video
CODE CREW | INTRO TO HTML + CSS

CODE CREW | INTRO TO HTML + CSS
EXERCISE

CODE CREW | INTRO TO HTML + CSS
HTML5 ELEMENTS
<header>
<nav>
<section>
<article/div>
<aside>
<footer>
* Article can have header and footer

CODE CREW | INTRO TO HTML + CSS
HTML5 ELEMENTS (continued)
Audio
Video
Canvas
Geolocation WebAPI

CODE CREW | INTRO TO HTML + CSS
WHAT IS CSS?

CODE CREW | INTRO TO HTML + CSS
CSS RULES

CSS SELECTORS
element
class
id
CODE CREW | INTRO TO HTML + CSS

CODE CREW | INTRO TO HTML + CSS
CSS PROPERTIES
color
font-family
font-size
background-color
background-image
border
margin
padding

CODE CREW | INTRO TO HTML + CSS
THE BOX MODEL

CODE CREW | INTRO TO HTML + CSS
BLOCK ELEMENTS

CODE CREW | INTRO TO HTML + CSS
INLINE ELEMENTS

CODE CREW | INTRO TO HTML + CSS
CSS POSITIONING

CODE CREW | INTRO TO HTML + CSS
CSS POSITIONING (continued)

CODE CREW | INTRO TO HTML + CSS
RESPONSIVE DESIGN

CODE CREW | INTRO TO HTML + CSS
WHAT IS BOOTSTRAP?

BOOTSTRAP CLASSES
btn
btn-lg
btn-primary
success
danger
table
table-striped
CODE CREW | INTRO TO HTML + CSS

CODE CREW | INTRO TO HTML + CSS
THE GRID

CODE CREW | INTRO TO HTML + CSS
THANKS MUCH!!!
Jamal O’Garro
Code Crew
Software Engineer + Instructor

The document provides an introduction to HTML, CSS, and SASS. It discusses what each technology is, how they are used together, and some of their key features. It explains that HTML is a markup language used to define the structure and content of web pages, CSS is used to style and lay out HTML elements, and SASS is a CSS preprocessor that adds powerful features like variables, nesting, and mixins to make CSS more efficient to write and maintain. It then provides overviews of important HTML tags, CSS properties and selectors, and features of SASS like mixins and extends.

Intro to CSSRandy Oest II

This document provides an introduction to CSS (Cascading Style Sheets) and covers key concepts such as selectors, the box model, positioning, and responsive design. It explains that CSS is used to style and lay out elements on web pages and works together with HTML. The document outlines important CSS topics like selectors, properties and values, units of measurement, the box model, display types, flow, floats, and positioning. It emphasizes best practices like using relative units and media queries for responsive designs.

Web 102 INtro to CSSHawkman Academy

An Intro to HTML & CSSShay Howe

The document serves as an introduction to HTML and CSS, detailing their roles in web design, including the structure and meaning of HTML as a markup language and CSS as a presentation language. It covers essential concepts like elements, attributes, tags, document structure, as well as various selectors and the box model for formatting. Examples of HTML structure and CSS styling for navigation and layouts are provided, showcasing practical applications in web development.

Html Expression WebMark Frydenberg

Introduction to HTML and CSSFerdous Mahmud Shaon

This document summarizes a knowledge sharing session on HTML and CSS basics. It covers topics like HTML tags and structures, CSS rules and selectors, the CSS box model, positioning, sprites, and hacks for dealing with browser inconsistencies. The session introduced fundamental concepts for using HTML to structure content and CSS for styling and layout, providing examples for common tags, selectors, properties and techniques. It aimed to give attendees an overview of the core building blocks of HTML and CSS.

Cascading style sheets - CSSiFour Institute - Sustainable Learning

This document provides a comprehensive overview of Cascading Style Sheets (CSS), covering its purpose, syntax, selectors, and properties related to text, backgrounds, borders, and layout. It highlights CSS's benefits, including improved web page accessibility and maintainability, and discusses new features introduced in CSS3 such as transitions, transformations, and web fonts. The document also includes examples of inline and external CSS, demonstrating practical applications and linking methods.

Cascading Style Sheets - Part 02Hatem Mahmoud

HTML/CSS Crash Course (april 4 2017)Daniel Friedman

This document provides an introduction to HTML and CSS for frontend development. It begins with an overview of the instructor and goals of the course. Key concepts of HTML like tags, elements, and attributes are explained. CSS topics covered include selectors, properties, values, and layout techniques like positioning. Code examples and exercises are provided to demonstrate and practice the concepts. The document encourages continued learning and offers additional resources through Thinkful.

CSSMallikarjuna G D

Web Development Basics: HOW TO in HTMLDer Lo

HTML is a markup language used to define the structure and layout of web pages. It uses tags like <html> and <body> to mark elements in a document like headings, paragraphs, and links. Tags have start and end tags like <p> and </p> to delineate content. CSS can be used to style HTML elements by specifying rules that are applied using the style attribute, <style> element, or external CSS files. Basic HTML tags include those for headings, paragraphs, bold, italics, underlining, links, images, and buttons. HTML documents are edited in text editors and browsers use the tags to render and display the structured content.

CSS Walktrough Internship CourseZoltan Iszlai

This document provides an overview of CSS (Cascading Style Sheets) and various CSS concepts. It begins with explaining what CSS is and how it is used to define styles for HTML elements. It then covers different methods for including CSS like inline, internal and external stylesheets. The document discusses CSS selectors, specificity, units and colors. It also explains the box model, positioning elements, z-index, and the display model. Flexbox and floats are described. Other topics covered include calc(), media queries and breakpoints.

Fundamental CSS3Achmad Solichin

Web Design Course: CSS lecture 4Gheyath M. Othman

The document discusses various CSS properties for controlling layout and spacing of elements. It defines the margin, padding, and dimensions properties and how they control spacing around, within, and size of elements respectively. It also covers the float, clear, and display properties for controlling element positioning and whether elements display as block-level or inline. Examples are provided to demonstrate the usage of each property.

Web front end development introduction to html css and javascriptMarc Huang

This document provides an introduction to HTML, CSS, and JavaScript for building websites. It discusses how websites work by connecting clients and servers, and compares making a website to writing a book by organizing content into pages. The document then covers the basic purposes and syntax of HTML for creating page content, CSS for styling, and JavaScript for interactivity. It provides many code examples and explains common elements, properties, and methods in each language to demonstrate basic front-end web development concepts and tools.

Introduction to HTML and CSSMario Hernandez

The document provides an agenda for a workshop on HTML, CSS, and putting them together. It covers HTML topics like semantic tags, comments, and best practices. It then discusses CSS topics such as IDs vs classes, floats, shorthand, and putting HTML and CSS together with project structure and layouts. The workshop aims to give an introduction to HTML, CSS, and how to structure websites using these languages.

Lesson 02Gene Babon

This document provides an agenda and overview for a lesson on front-end web development. It covers reviewing HTML basics like headings, paragraphs, links and lists. It then introduces images, discussing image file formats like JPG, GIF and PNG as well as the img tag attributes of src and alt. The document also introduces CSS, covering linking a separate CSS style sheet, specifying colors using keywords, hex codes and RGB/RGBA values, and font properties. It assigns homework to create a basic two-page personal website.

Web Design Course: CSS lecture 3Gheyath M. Othman

The document discusses various CSS properties for styling fonts, text, links, borders, and outlines. It defines properties like font-family, font-size, text-align, border-style, and outline-width. Examples are provided to demonstrate how each property can be used to style text and elements on a webpage. Key CSS properties and their possible values are summarized in tables for easy reference. Code snippets and HTML examples further illustrate the use of these properties in practice.

Modular HTML, CSS, & JS WorkshopShay Howe

The document is a guide on modular HTML, CSS, and JavaScript practices, emphasizing the importance of organized, maintainable, and reusable code. It discusses common issues in web development, best practices for styling, and methodologies like OOCSS and SMACSS. It also covers topics related to JavaScript functions, objects, and prototypes, advocating for component-based design and separation of concerns.

Web Design Course: CSS lecture 2Gheyath M. Othman

The document discusses different ways to insert CSS styles into HTML documents, including external style sheets, internal style sheets, and inline styles. It provides examples of each method. It also covers CSS background properties like background-color, background-image, background-repeat, background-position, and background-attachment, giving their descriptions and allowed values. Examples are given demonstrating how to set page and element backgrounds, add background images, control image repeating, and set the starting position of background images.

CSS3 IntroductionJaeni Sahuri

CSS3 is the latest standard for cascading style sheets (CSS). CSS3 introduces several new modules that expand the capabilities of CSS, including selectors, box model, backgrounds/borders, image values, text effects, transformations, animations, multiple column layout, and user interface. The document provides examples of CSS3 properties and modules, demonstrating borders, selectors, text effects, menus, and creating multiple columns. It concludes by thanking some websites for information on CSS3.

Web Design Course: CSS lecture 5Gheyath M. Othman

The document discusses CSS positioning properties and opacity. It provides examples of how to use: 1) The position property to set element positioning as static, relative, fixed, or absolute and how each affects element layout. 2) The z-index property to specify stacking order of overlapping elements. 3) The opacity property to specify transparency levels from 0-1 and examples applying opacity to images and boxes.

CSS Part IDoncho Minkov

Web Design Course: CSS lecture 1Gheyath M. Othman

This document provides an introduction to CSS (Cascading Style Sheets). It defines CSS, lists some advantages of CSS like saving time and loading pages faster, and explains that the CSS Working Group creates and maintains CSS specifications. It also covers CSS syntax including selectors like element, id, class and attribute selectors. Finally, it discusses CSS combinators that explain the relationship between selectors like the descendant, child, adjacent sibling, and general sibling selectors.

CSS, CSS Selectors, CSS Box Modeljamiecavanaugh

HTML(5) and CSS(3) for beginners - Ivincentleeuwen

This document provides an introduction to basic HTML and CSS elements for building web pages. It begins with an overview of the document structure, including the <html>, <head>, <title>, and <body> tags. It then covers common page elements like headings, paragraphs, lists, links, and images. The document progresses to explaining how to style elements with fonts, colors, backgrounds and more using inline CSS styles. Later it introduces external CSS files, IDs and classes, and properties like margins, padding, borders. Exercises are included throughout to help learn and practice the concepts. The goal is to teach the reader enough to build their own basic profile page using HTML and CSS.

Unit 2 (it workshop)Dr.Lokesh Gagnani

The document provides an overview of HTML and XHTML topics including: 1. It defines HTML as a markup language used to define the structure and layout of web pages using tags. XHTML is defined as a stricter version of HTML that follows XML syntax rules. 2. Key HTML topics covered include basic tags for headings, paragraphs, colors, fonts, lists, links, images and tables. It also discusses HTML forms, headers and bodies. 3. The document contrasts XHTML with HTML and outlines requirements for XHTML documents such as mandatory DOCTYPEs and proper nesting of tags.

About Best friends - HTML, CSS and JSNaga Harish M

The document provides a comprehensive overview of HTML5, CSS3, and JavaScript, detailing their new features, benefits, and how they enhance web development. It discusses the capabilities of HTML5 such as local storage, multimedia support (audio, video), and new form elements, while CSS3 introduces animations, media queries, and background enhancements. Additionally, it highlights JavaScript's advancements with web workers and web sockets for improved user experience and performance.

HTML CSS Best PracticesDen Widhana

HTML and CSS best practices include having proper document structure with a DOCTYPE, loading HTML content before scripts, using semantic elements, avoiding inline CSS, keeping code lean and well organized with comments, using practical class names, and utilizing CSS preprocessors for better file organization and avoiding repetitions. The overall goals are to have code that is well organized, modular, flexible, easy to read, edit, and maintain.

Web1O1 - Intro to HTML/CSSNYCSS Meetup

This document provides an introduction to HTML, CSS, and the basic structure of a web page. It explains that HTML is the content layer and defines the structure and semantics of a web page using tags. CSS is the presentation layer and controls the styling and layout of HTML content. The main parts of an HTML document are the <DOCTYPE>, <html>, <head>, and <body> tags. The <head> contains meta information while the <body> holds visible page content. CSS can be included inline, embedded, or through an external stylesheet to style HTML elements. JavaScript adds interactivity and functionality to web pages.

More Related Content

What's hot (20)

HTML/CSS Crash Course (april 4 2017)Daniel Friedman

CSSMallikarjuna G D

Web Development Basics: HOW TO in HTMLDer Lo

CSS Walktrough Internship CourseZoltan Iszlai

Fundamental CSS3Achmad Solichin

Web Design Course: CSS lecture 4Gheyath M. Othman

Web front end development introduction to html css and javascriptMarc Huang

Introduction to HTML and CSSMario Hernandez

Lesson 02Gene Babon

Web Design Course: CSS lecture 3Gheyath M. Othman

Modular HTML, CSS, & JS WorkshopShay Howe

Web Design Course: CSS lecture 2Gheyath M. Othman

CSS3 IntroductionJaeni Sahuri

Web Design Course: CSS lecture 5Gheyath M. Othman

CSS Part IDoncho Minkov

Web Design Course: CSS lecture 1Gheyath M. Othman

CSS, CSS Selectors, CSS Box Modeljamiecavanaugh

HTML(5) and CSS(3) for beginners - Ivincentleeuwen

Unit 2 (it workshop)Dr.Lokesh Gagnani

About Best friends - HTML, CSS and JSNaga Harish M

HTML/CSS Crash Course (april 4 2017)Daniel Friedman

CSSMallikarjuna G D

Web Development Basics: HOW TO in HTMLDer Lo

CSS Walktrough Internship CourseZoltan Iszlai

Fundamental CSS3Achmad Solichin

Web Design Course: CSS lecture 4Gheyath M. Othman

Web front end development introduction to html css and javascriptMarc Huang

Introduction to HTML and CSSMario Hernandez

Lesson 02Gene Babon

Web Design Course: CSS lecture 3Gheyath M. Othman

Modular HTML, CSS, & JS WorkshopShay Howe

Web Design Course: CSS lecture 2Gheyath M. Othman

CSS3 IntroductionJaeni Sahuri

Web Design Course: CSS lecture 5Gheyath M. Othman

CSS Part IDoncho Minkov

Web Design Course: CSS lecture 1Gheyath M. Othman

CSS, CSS Selectors, CSS Box Modeljamiecavanaugh

HTML(5) and CSS(3) for beginners - Ivincentleeuwen

Unit 2 (it workshop)Dr.Lokesh Gagnani

About Best friends - HTML, CSS and JSNaga Harish M

Viewers also liked (8)

HTML CSS Best PracticesDen Widhana

Web1O1 - Intro to HTML/CSSNYCSS Meetup

Intro to CSSUC Berkeley Graduate School of Journalism

The document is a guide on Cascading Style Sheets (CSS), detailing its purpose, syntax, and methods of implementation including external, embedded, and inline styles. It explains key CSS concepts such as selectors, properties, and the box model, providing examples for each. Additionally, it highlights the differences between IDs and classes, and concludes with an assignment for styling a cookie recipe webpage.

Web 101 intro to htmlHawkman Academy

This document provides an introduction to HTML by outlining its basic structure and common elements. It begins with defining HTML as a markup language used to describe web pages. The core components of an HTML page are explained, including the <html>, <head>, and <body> tags. Common elements like headings, paragraphs, links and images are demonstrated. Formatting text with tags like <strong> and <em> is also covered. The document concludes with resources for learning more about HTML elements and web design frameworks.

Introduction to JavascriptAmit Tyagi

The document provides an introduction to JavaScript, detailing its execution environment, history, core features including dynamic web page creation, and the Document Object Model (DOM). It outlines JavaScript's syntax, variables, data types, functions, and memory allocation, along with advanced topics such as AJAX and event handling. The document emphasizes JavaScript's prototype-based programming model and its flexibility with objects and classes.

JavaScript - An IntroductionManvendra Singh

This document serves as an introduction to JavaScript, covering its history, programming concepts, and various functionalities. It explains the structure of websites using HTML, CSS, and JavaScript, and discusses libraries, variable types, functions, objects, and document manipulation through the Document Object Model (DOM). Additionally, the document provides insights into event handling, animations, and form management in JavaScript.

Introduction to multimediaSouthern Leyte State University

Multimedia is a blend of various content forms, including text, graphics, sound, animation, and video, delivered interactively through electronic means. It can be applied in different fields such as business, education, entertainment, and public spaces, with examples including interactive courses, games, and information kiosks. The document also distinguishes between linear and non-linear multimedia, highlighting the importance of user control and interaction in enhancing the multimedia experience.

JavaScript ProgrammingSehwan Noh

HTML CSS Best PracticesDen Widhana

Web1O1 - Intro to HTML/CSSNYCSS Meetup

Intro to CSSUC Berkeley Graduate School of Journalism

Web 101 intro to htmlHawkman Academy

Introduction to JavascriptAmit Tyagi

JavaScript - An IntroductionManvendra Singh

Introduction to multimediaSouthern Leyte State University

JavaScript ProgrammingSehwan Noh

Similar to Intro to HTML + CSS (20)

Code & design your first website (3:16)Thinkful

This document provides an overview of how to code and design a first website. It discusses HTML, CSS, and web development fundamentals. It guides the reader through building a simple "About Me" webpage using Codepen.io to practice HTML and CSS. Tips are provided on downloading the code to a text editor and making the page viewable locally. The document also briefly touches on additional layout concepts like inline vs block elements and the box model. Overall, the document serves as an introductory tutorial for someone with little to no experience to code their first website.

GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSSudaymore742

The document outlines a three-day web development workshop focused on HTML, CSS, JavaScript, and React/Node.js, featuring speakers Mayuresh and Tanuja. It provides an introduction to HTML's structure, elements, and forms, as well as CSS's syntax, selectors, and layout models like Flexbox. Participants are encouraged to engage in tasks throughout the workshop and can access further updates via a WhatsApp channel.

IT2255 Web Essentials - Unit II Web Designingpkaviya

Unit II of the Web Essentials course focuses on web designing, covering HTML form elements, HTML5 features, and CSS3 styling techniques. It explains the differences between HTML and HTML5, including new multimedia elements and form controls, as well as CSS3 capabilities such as selectors, box model, text effects, animations, and multiple column layouts. Key topics include the structure and attributes of form elements, styling techniques, and various CSS3 properties for enhancing web design.

Code & Design your first website 4/18TJ Stalcup

The document outlines a web development workshop led by TJ Stalcup, covering the basics of HTML, CSS, and web design. It includes essential topics like frontend development, wireframing, and creating an 'about me' webpage, while also emphasizing the importance of mentorship and practical coding experience. Additionally, it offers insights into Thinkful's educational programs and a special prep course for prospective students.

HTML+CSS: how to get startedDimitris Tsironis

This document provides an introduction to HTML and CSS for crafting webpages. It discusses basic HTML elements like headings, paragraphs, images and links. It explains how HTML pages work with doctypes, tags and content. It also covers CSS for styling HTML with rules, selectors, declarations and properties. Recommended tools include a text editor, browser developer tools, and resources like Mozilla Developer Network and CSS Tricks.

Intro to HTML and CSS basicsEliran Eliassy

This document provides an overview of HTML and CSS topics including: - A brief history of HTML and CSS standards from 1990 to present. - Descriptions of common HTML elements like <body>, <head>, <img>, <a>, and lists. - Explanations of CSS concepts like selectors, properties, units, positioning, and layout fundamentals. - Details on CSS topics like the box model, centering content, semantic HTML, and flexbox. The document serves as a course outline or reference for learning HTML and CSS fundamentals.

WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptxHarshwardhanPatil52

The document provides an overview of UI/UX, defining UI as the visual component users interact with and UX as the overall experience aimed at satisfaction and ease. It also introduces HTML as the standard language for web design, CSS for styling web elements, and Bootstrap as a framework for responsive web development, along with a brief mention of JavaScript for adding interactivity to websites. Essential HTML elements, CSS properties, and the historical context of JavaScript are also discussed.

EdTechJoker Spring 2020 - Lecture 4 - HTMLBryan Ollendyke

This document provides an overview of HTML, CSS, JavaScript and related topics. It discusses the basics of each including what they are used for and key definitions. It mentions how these technologies are used on nearly every webpage and describes differences between browsers. The document discusses CSS frameworks like Bootstrap and tools for working with CSS like Sass. It also discusses using JavaScript and mentions jQuery as a popular library. The document promotes learning HTML and CSS before using libraries or frameworks. It discusses security implications of JavaScript and content delivery networks. Throughout it provides useful learning resources and links for further exploring these web technologies.

Tech Winter Break : Basics of Web DevelopmentVaishnavi186737

The document outlines the basics of web development, including the distinction between frontend and backend technologies, and the roles of HTML and CSS in creating web pages. Key elements include the structure of HTML, the styling capabilities of CSS, and tools for development and testing. It encourages beginners to start with small projects and provides best practices for writing clean and effective code.

Tech Winter Break- GDG on Campus Bajaj Institute of Technology, WardhaGDSCBITW1

Introduction to Web Development.pptxGDSCVJTI

The document provides an overview of web development fundamentals, covering HTML, CSS, and JavaScript. It discusses key concepts such as web developer salaries in different countries, the structure and purpose of HTML elements, and various CSS styling techniques. Additionally, it introduces JavaScript basics, including data types, variables, operators, and the development of interactive web pages.

Introduction to Web Development.pptxAlisha Kamat

The document covers web development concepts including salary comparisons for web developers in India, the USA, and the UK, and provides a comprehensive overview of HTML, CSS, and JavaScript. It discusses the structure of web pages, form elements, the importance of semantics in HTML, and various CSS styling techniques, along with JavaScript fundamentals like data types, operators, and functions. Additionally, it includes examples of code snippets and practical applications, culminating in a challenge for building a web page.

Introduction to Web Development.pptxAlisha Kamat

The document provides a comprehensive overview of web development, detailing aspects such as web technologies (HTML, CSS, JavaScript), their purpose, and relevant coding examples. It includes explanations of HTML elements, CSS styles, and JavaScript functions alongside practical examples and tips. Additionally, it touches on web design principles and best practices for creating interactive and well-structured webpages.

CSSAkila Iroshan

The document discusses various topics related to HTML, CSS, and client-side coding including: CSS selectors, properties, cascade, media queries, animations. It covers CSS syntax, selectors like type, ID, class, attribute, and pseudo selectors. It describes the box model and properties for text, background, positioning. It also explains cascade, specificity, inheritance in CSS and how media queries allow styling for different devices.

A practical guide to building websites with HTML5 & CSS3Darren Wood

The document provides an overview of HTML5 and CSS3 features for a presentation. It begins by introducing the presenter and their experience with WordPress, HTML, and CSS. It then covers new elements in HTML5 like video, audio, forms, and semantics. For CSS3, it discusses selectors, properties and fonts. The presenter notes they will focus on useful features they commonly use and not cover everything due to time constraints. They ask for questions and indicate they are still learning.

slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...MrunmayiLohakare

This document serves as a comprehensive guide to mastering HTML and CSS, outlining the essential tags, elements, and styling techniques necessary for web development. It covers key concepts such as the structure of HTML documents, the functionality of CSS for styling, the CSS box model, and the importance of responsive web design. The guide emphasizes the need for practice and awareness of common coding mistakes to enhance web development skills.

2h landing page AndryRajohnson

This document provides an overview and instructions for building a landing page workshop. It discusses setting up the page structure with HTML including the skeleton, head, and body. It also covers adding content with tags like headings, paragraphs, lists, and images. The document then explains styling the page with CSS, covering fonts, colors, box model, IDs and classes. Later sections discuss adding icons with Fontawesome, using semantic HTML, implementing a grid system for responsive design, and providing a thank you and link for further resources.

Tfbyoweb.4.9.17Jordan Zurowski

The document provides instructions for building a basic website. It begins with introducing the instructors and agenda. It then covers key HTML and CSS concepts like tags, elements, classes, and properties. Code examples are provided to demonstrate these concepts. Next, it discusses CSS properties for styling elements, like color, text-align, and size properties. The document concludes by providing a link to starter code for building a website and guidance on next steps for continuing to learn web development.

Tfbyoweb.4.9.17Jordan Zurowski

The document provides instructions for building a basic website. It begins with introducing the instructors and agenda. It then demonstrates HTML elements like headings, paragraphs, links and how to style them with CSS properties. It shows how to use concepts like classes, ids, color, font sizes etc. It provides a starter code and steps to build a simple website with sections and formatting. It emphasizes using resources like Google to learn and solve problems.

Intermediate Web Designmlincol2

The document provides an overview of a crash course that introduces common web technologies like CSS, PHP, and JavaScript and instructs attendees to download files to follow along with examples of creating a basic website with styled text, a menu included via PHP, and a randomly changing image generated by JavaScript code. The course emphasizes learning structures and asking questions over producing a polished final product.

Code & design your first website (3:16)Thinkful

GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSSudaymore742

IT2255 Web Essentials - Unit II Web Designingpkaviya

Code & Design your first website 4/18TJ Stalcup

HTML+CSS: how to get startedDimitris Tsironis

Intro to HTML and CSS basicsEliran Eliassy

WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptxHarshwardhanPatil52

EdTechJoker Spring 2020 - Lecture 4 - HTMLBryan Ollendyke

Tech Winter Break : Basics of Web DevelopmentVaishnavi186737

Tech Winter Break- GDG on Campus Bajaj Institute of Technology, WardhaGDSCBITW1

Introduction to Web Development.pptxGDSCVJTI

Introduction to Web Development.pptxAlisha Kamat

CSSAkila Iroshan

A practical guide to building websites with HTML5 & CSS3Darren Wood

slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...MrunmayiLohakare

2h landing page AndryRajohnson

Tfbyoweb.4.9.17Jordan Zurowski

Intermediate Web Designmlincol2

More from Jamal Sinclair O'Garro (15)

A Look at TensorFlow.jsJamal Sinclair O'Garro

The document provides an overview of TensorFlow.js, a JavaScript library for machine learning, discussing its applications, API structure, and key components such as neural networks and training algorithms. It covers basic concepts in artificial intelligence, machine learning, and deep learning, along with TensorFlow.js functionalities for building and deploying models. Resources for further learning, including documentation, books, and courses, are also mentioned.

Intro to ReactJamal Sinclair O'Garro

This document provides an introduction and overview of React. It begins with biographical information about the author and an agenda. It then discusses what React is, its ecosystem, creating projects with Create React App, components, state, props, lifecycles, events, and resources. Code examples are provided to illustrate key concepts like JSX, components, and events. Useful tools and topics not covered are also listed.

React + Redux for Web DevelopersJamal Sinclair O'Garro

The document provides an introduction to React and Redux, covering their core concepts, component structure, lifecycle methods, and state management. It includes practical insights into building applications with these technologies and highlights useful tools, libraries, and resources for developers. The author also shares personal thoughts on the advantages and challenges of using React and Redux in projects.

Intro to ionic 2Jamal Sinclair O'Garro

The document provides an overview of Ionic 2, a framework for building hybrid mobile apps with web technologies. It introduces the speaker and their background in full stack development. Key points about Ionic 2 are that it is a rewrite built on Angular 2 and TypeScript that provides more native-like experiences for iOS and Android. It leverages components and directives to access device features via Cordova and offers navigation stack-based routing. Examples of features like navigation, styling and native plugins are demonstrated.

Intro to ES6 / ES2015Jamal Sinclair O'Garro

The document is an introduction to ES6/2015 presentation that covers new features in the ECMAScript specification including let and const, template strings, arrow functions, classes, iterators, promises, and generators. It provides a brief history of JavaScript and explains what ES6 is and why developers should use it. The presentation does not cover all new features in ES6 and notes some are not fully supported in current JavaScript engines.

The Ten Code CommandmentsJamal Sinclair O'Garro

The document outlines ten steps or commandments for learning how to code presented by Code Crew co-founders Jamal and Felicia O'Garro. The steps include deciding to learn, choosing a clear goal, learning a programming language like Ruby or JavaScript, working through a book or video course, building a simple project, starting work on your own idea, joining a tech community, and not giving up. Resources for learning are also provided.

Using TypeScript with AngularJamal Sinclair O'Garro

This document discusses using TypeScript with AngularJS. It begins with an introduction to TypeScript, covering its goals of statically identifying errors and organizing large codebases. It then reviews AngularJS's philosophy and architecture, including its use of MVVM pattern, dependency injection, and services. The document demonstrates building a sample app with TypeScript and AngularJS and notes lessons learned, such as TypeScript slowing initial development but reducing bugs. It concludes by discussing TypeScript and AngularJS's future integration.

Intro to UI-Router/TypeScriptJamal Sinclair O'Garro

This document summarizes an introduction to UI-Router and TypeScript presentation. The presentation covers UI-Router, a routing framework for AngularJS that allows for multiple views and a state machine-based approach. It also discusses TypeScript, a superset of JavaScript that provides strong typing and other features. The presentation shows code examples and provides resources for learning more about UI-Router and TypeScript.

Intro to Node.jsJamal Sinclair O'Garro

This document provides an overview and roadmap for an introductory course on Node.js. The course will cover Node basics, building web servers with Express.js, using MongoDB and Mongoose for the database, and building both simple and more complex applications. Expectations are a familiarity with JavaScript, databases, and basic web development principles. Asynchronous programming and the event loop model will also be discussed.

Intro to iOS DevelopmentJamal Sinclair O'Garro

This document provides an overview of iOS development, covering the history of iOS, the core technologies involved like Objective-C and Swift, the Xcode integrated development environment, and the different layers that make up the iOS software stack like Cocoa Touch and Core OS. It outlines the course roadmap and requirements for building iOS apps, and demonstrates how to get started with the development process through Apple's tutorials and resources.

Introduction to AngularJSJamal Sinclair O'Garro

This document outlines an introductory course on AngularJS taught over two days. Day one covers JavaScript review, Angular basics, and building a sample app. Day two focuses on best practices, using Firebase and the MEAN stack, and advanced topics. The course expects students to have a basic knowledge of JavaScript, HTML, CSS, and the MVC design pattern. It introduces key Angular concepts like directives, data binding, services and controllers. Students will learn to build a single-page application with Angular.

Intro to rails 2_kg_editedJamal Sinclair O'Garro

Intro to Ruby on RailsJamal Sinclair O'Garro

This document outlines an intro to Ruby on Rails class presented by Jamal O'Garro of Code Crew. The class roadmap covers Ruby basics, Rails architecture using the MVC framework, building an app from scratch, ActiveRecord, and deployment. It also provides overviews of Ruby syntax like strings, numbers, operators, variables, flow control, and collections. The document explains Rails concepts such as the anatomy of a Rails app, the Bundler gem manager, asset pipeline, MVC pattern, router, REST, and CRUD.

Intro to javascript (4 week)Jamal Sinclair O'Garro

This document is an introduction to JavaScript presented by Jamal O'Garro of Code Crew. It covers the basics of JavaScript including data types, operators, variables, functions, objects, and the DOM. It also discusses more advanced topics like object-oriented JavaScript, prototypal inheritance, AJAX, APIs, frameworks, and Node.js. The goal is to provide an overview of the core concepts and capabilities of the JavaScript programming language.

Intro to ProgrammingJamal Sinclair O'Garro

This document is an introduction to programming with JavaScript. It discusses what programming is, how to communicate with computers using programming languages like JavaScript, and what makes a good programmer. It also provides an overview of common JavaScript programming concepts like variables, data types, logical operators, conditionals, functions, and objects. The document encourages learners to continue learning programming through books, meetups and practice, and provides some resources for doing so.

A Look at TensorFlow.jsJamal Sinclair O'Garro

Intro to ReactJamal Sinclair O'Garro

React + Redux for Web DevelopersJamal Sinclair O'Garro

Intro to ionic 2Jamal Sinclair O'Garro

Intro to ES6 / ES2015Jamal Sinclair O'Garro

The Ten Code CommandmentsJamal Sinclair O'Garro

Using TypeScript with AngularJamal Sinclair O'Garro

Intro to UI-Router/TypeScriptJamal Sinclair O'Garro

Intro to Node.jsJamal Sinclair O'Garro

Intro to iOS DevelopmentJamal Sinclair O'Garro

Introduction to AngularJSJamal Sinclair O'Garro

Intro to rails 2_kg_editedJamal Sinclair O'Garro

Intro to Ruby on RailsJamal Sinclair O'Garro

Intro to javascript (4 week)Jamal Sinclair O'Garro

Intro to ProgrammingJamal Sinclair O'Garro

Recently uploaded (20)

Securing Account Lifecycles in the Age of Deepfakes.pptxFIDO Alliance

Python Conference Singapore - 19 Jun 2025ninefyi

Cyber Defense Matrix Workshop - RSA ConferencePriyanka Aash

Techniques for Automatic Device Identification and Network Assignment.pdfPriyanka Aash

"Database isolation: how we deal with hundreds of direct connections to the d...Fwdays

What can go wrong if you allow each service to access the database directly? In a startup, this seems like a quick and easy solution, but as the system scales, problems appear that no one could have guessed. In my talk, I'll share Solidgate's experience in transforming its architecture: from the chaos of direct connections to a service-based data access model. I will talk about the transition stages, bottlenecks, and how isolation affected infrastructure support. I will honestly show what worked and what didn't. In short, we will analyze the controversy of this talk.

CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025pcprocore

👉𝗡𝗼𝘁𝗲:𝗖𝗼𝗽𝘆 𝗹𝗶𝗻𝗸 & 𝗽𝗮𝘀𝘁𝗲 𝗶𝗻𝘁𝗼 𝗚𝗼𝗼𝗴𝗹𝗲 𝗻𝗲𝘄 𝘁𝗮𝗯> https://pcprocore.com/ 👈◀ CapCut Pro Crack is a powerful tool that has taken the digital world by storm, offering users a fully unlocked experience that unleashes their creativity. With its user-friendly interface and advanced features, it’s no wonder why aspiring videographers are turning to this software for their projects.

Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...Josef Weingand

Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdfPriyanka Aash

AI vs Human Writing: Can You Tell the Difference?Shashi Sathyanarayana, Ph.D

OpenPOWER Foundation & Open-Source Core InnovationsIBM

penPOWER offers a fully open, royalty-free CPU architecture for custom chip design. It enables both lightweight FPGA cores (like Microwatt) and high-performance processors (like POWER10). Developers have full access to source code, specs, and tools for end-to-end chip creation. It supports AI, HPC, cloud, and embedded workloads with proven performance. Backed by a global community, it fosters innovation, education, and collaboration.

Raman Bhaumik - Passionate Tech EnthusiastRaman Bhaumik

ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...revolcs10

FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptxFIDO Alliance

The Future of Data, AI, and AR: Innovation Inspired by You.pdfSafe Software

Security Tips for Enterprise Azure SolutionsMichele Leroux Bustamante

Delivering solutions to Azure may involve a variety of architecture patterns involving your applications, APIs data and associated Azure resources that comprise the solution. This session will use reference architectures to illustrate the security considerations to protect your Azure resources and data, how to achieve Zero Trust, and why it matters. Topics covered will include specific security recommendations for types Azure resources and related network security practices. The goal is to give you a breadth of understanding as to typical security requirements to meet compliance and security controls in an enterprise solution.

FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptxFIDO Alliance

Creating Inclusive Digital Learning with AI: A Smarter, Fairer FutureImpelsys Inc.

Have you ever struggled to read a tiny label on a medicine box or tried to navigate a confusing website? Now imagine if every learning experience felt that way—every single day. For millions of people living with disabilities, poorly designed content isn’t just frustrating. It’s a barrier to growth. Inclusive learning is about fixing that. And today, AI is helping us build digital learning that’s smarter, kinder, and accessible to everyone. Accessible learning increases engagement, retention, performance, and inclusivity for everyone. Inclusive design is simply better design.

War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdfbiswajitbanerjee38

Russia is one of the most aggressive nations when it comes to state coordinated cyberattacks — and Ukraine has been at the center of their crosshairs for 3 years. This report, provided the State Service of Special Communications and Information Protection of Ukraine contains an incredible amount of cybersecurity insights, showcasing the coordinated aggressive cyberwarfare campaigns of Russia against Ukraine. It brings to the forefront that understanding your adversary, especially an aggressive nation state, is important for cyber defense. Knowing their motivations, capabilities, and tactics becomes an advantage when allocating resources for maximum impact. Intelligence shows Russia is on a cyber rampage, leveraging FSB, SVR, and GRU resources to professionally target Ukraine’s critical infrastructures, military, and international diplomacy support efforts. The number of total incidents against Ukraine, originating from Russia, has steadily increased from 1350 in 2021 to 4315 in 2024, but the number of actual critical incidents has been managed down from a high of 1048 in 2022 to a mere 59 in 2024 — showcasing how the rapid detection and response to cyberattacks has been impacted by Ukraine’s improved cyber resilience. Even against a much larger adversary, Ukraine is showcasing outstanding cybersecurity, enabled by strong strategies and sound tactics. There are lessons to learn for any enterprise that could potentially be targeted by aggressive nation states. Definitely worth the read!

OWASP Barcelona 2025 Threat Model LibraryPetraVukmirovic

FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptxFIDO Alliance

Securing Account Lifecycles in the Age of Deepfakes.pptxFIDO Alliance

Python Conference Singapore - 19 Jun 2025ninefyi

Cyber Defense Matrix Workshop - RSA ConferencePriyanka Aash

Techniques for Automatic Device Identification and Network Assignment.pdfPriyanka Aash

"Database isolation: how we deal with hundreds of direct connections to the d...Fwdays

CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025pcprocore

Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...Josef Weingand

Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdfPriyanka Aash

AI vs Human Writing: Can You Tell the Difference?Shashi Sathyanarayana, Ph.D

OpenPOWER Foundation & Open-Source Core InnovationsIBM

Raman Bhaumik - Passionate Tech EnthusiastRaman Bhaumik

ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...revolcs10

FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptxFIDO Alliance

The Future of Data, AI, and AR: Innovation Inspired by You.pdfSafe Software

Security Tips for Enterprise Azure SolutionsMichele Leroux Bustamante

FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptxFIDO Alliance

Creating Inclusive Digital Learning with AI: A Smarter, Fairer FutureImpelsys Inc.

War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdfbiswajitbanerjee38

OWASP Barcelona 2025 Threat Model LibraryPetraVukmirovic

FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptxFIDO Alliance

Intro to HTML + CSS

1. CODE CREW | INTRO TO HTML + CSS INTRO TO HTML + CSS Jamal O’Garro Code Crew Software Engineer + Instructor

2. CODE CREW | INTRO TO HTML + CSS CLASS ROADMAP

3. CODE CREW | INTRO TO HTML + CSS WHAT IS HTML?

4. CODE CREW | INTRO TO HTML + CSS WHAT IS HTML? (continued)

5. CODE CREW | INTRO TO HTML + CSS HTML STRUCTURE • Similar to a news article or word document • Header, paragraphs, images • Elements tell the browser what part is a header, paragraph, etc.

6. CODE CREW | INTRO TO HTML + CSS HTML STRUCTURE (continued)

7. CODE CREW | INTRO TO HTML + CSS HTML ELEMENTS

8. HTML ELEMENTS (continued) Head Paragraph Link Image List List Item Table Div Span Section Nav Article Header/Footer Video CODE CREW | INTRO TO HTML + CSS

9. CODE CREW | INTRO TO HTML + CSS EXERCISE

10. CODE CREW | INTRO TO HTML + CSS HTML5 ELEMENTS <header> <nav> <section> <article/div> <aside> <footer> * Article can have header and footer

11. CODE CREW | INTRO TO HTML + CSS HTML5 ELEMENTS (continued) Audio Video Canvas Geolocation WebAPI

12. CODE CREW | INTRO TO HTML + CSS WHAT IS CSS?

13. CODE CREW | INTRO TO HTML + CSS CSS RULES

14. CSS SELECTORS element class id CODE CREW | INTRO TO HTML + CSS

15. CODE CREW | INTRO TO HTML + CSS CSS PROPERTIES color font-family font-size background-color background-image border margin padding

16. CODE CREW | INTRO TO HTML + CSS THE BOX MODEL

17. CODE CREW | INTRO TO HTML + CSS BLOCK ELEMENTS

18. CODE CREW | INTRO TO HTML + CSS INLINE ELEMENTS

19. CODE CREW | INTRO TO HTML + CSS CSS POSITIONING

20. CODE CREW | INTRO TO HTML + CSS CSS POSITIONING (continued)

21. CODE CREW | INTRO TO HTML + CSS CSS POSITIONING (continued)

22. CODE CREW | INTRO TO HTML + CSS CSS POSITIONING (continued)

23. CODE CREW | INTRO TO HTML + CSS RESPONSIVE DESIGN

24. CODE CREW | INTRO TO HTML + CSS WHAT IS BOOTSTRAP?

25. BOOTSTRAP CLASSES btn btn-lg btn-primary success danger table table-striped CODE CREW | INTRO TO HTML + CSS

26. CODE CREW | INTRO TO HTML + CSS THE GRID

27. CODE CREW | INTRO TO HTML + CSS THANKS MUCH!!! Jamal O’Garro Code Crew Software Engineer + Instructor