HTML + CSS Examples

Aug 10, 20146 likes2,626 views

This document outlines the steps to create two basic websites using HTML and CSS. For the first website, it describes creating the HTML structure with a container, header, blog post, and footer sections. It then details writing the HTML code for each section and linking an external CSS stylesheet to style the webpage. Similar steps are followed for the second website, including defining the HTML structure, writing the code, linking the CSS, and styling elements like the container, header, content and footer. The document concludes by thanking the reader.

Technology

Most read

Agenda
 Part I: Website1
 Part II: Website 2

STEP 1: The site HTML structure
 Container
 Header
 h1
 p
 Blog-post
 h2
 p
 em
 Footer
 h3
 p

STEP 2: WRITING THE HTML
 Header
 Code:

STEP 2: WRITING THE HTML
 Footer
 Code:

STEP 2: WRITING THE HTML
 Container
 Code:

STEP 5: Adding our style sheet
 Body:
 Result: Code:

STEP 5: Adding our style sheet
 Container :
 Result: Code:

STEP 5: Adding our style sheet
 Header & Footer :
 Result: Code:

STEP 5: Adding our style sheet
 Footer :
 Result: Code:

STEP 5: Adding our style sheet
 Lead:
 Result: Code:

STEP 5: Adding our style sheet
 Blog-post:
 Result: Code:

STEP 5: Adding our style sheet
 H1,H2,H3:
 Result: Code:

STEP 5: Adding our style sheet
 Blog-post h2,p,em:
 Result: Code:

STEP 7: Your first Website with HTML and CSS

STEP 1: The site HTML structure
 Container
 Header
 H1
 Navigation
 ul
 Content-container
 Content
 H2
 P
 Footer

STEP 2: WRITING THE HTML
 Navigation
 Code:

STEP 2: WRITING THE HTML
 Content-container
 Code:

STEP 5: Adding our style sheet
 Header :
 Result: Code:

STEP 5: Adding our style sheet
 Content:
 Result: Code:

STEP 7: Your Second Website with HTML and CSS

This document provides an introduction to cascading style sheets (CSS) and covers several key concepts: CSS is used to style and lay out web pages and defines how HTML elements are displayed. Styles are normally saved in external CSS files so the appearance of an entire website can be changed by editing one file. A CSS rule has a selector that specifies which element the rule applies to and declarations that define properties for that element. Comments can be added to CSS code to explain it. Different selectors like ID, class, and inline styles allow targeting specific elements. The order of style precedence determines which styles get applied when multiple styles conflict. Background properties are used to define and customize element backgrounds.

Event In JavaScriptShahDhruv21

This document discusses JavaScript events and event listeners. It begins with an introduction that defines events as notifications that specific actions occurred, like user or browser actions. Event handlers are scripts that are executed in response to events. Events can be used to trigger JavaScript code that responds to user interactions. The document then provides examples of common event types like onclick, onsubmit, onmouseover, onmouseout, focus, and blur. It also discusses how to add and remove event listeners using addEventListener() and removeEventListener() methods. The document concludes with an example demonstrating how events can be used to change an HTML element in response to user clicks.

Php arrayNikul Shah

The document discusses various PHP array functions including: - Array functions like array_combine(), array_count_values(), array_diff() for comparing and merging arrays. - Sorting arrays with asort(), arsort(), ksort(), krsort(). - Other functions like array_search(), array_sum(), array_rand() for searching, summing and random values. - Modifying arrays with array_push(), array_pop(), array_shift() for adding/removing elements. The document provides examples of using each array function in PHP code snippets.

PPT on Basic HTML TagsVinitaPaliwal1

The document describes basic HTML tags used to structure and format web pages. It outlines structural tags like <html> and <body> that define the overall page. Header tags <h1> to <h6> are used to label sections. Other tags format text, insert links and graphics, and create unordered, ordered and definition lists. The tags <p> and <br> are used to create paragraph breaks within the visible page content.

Introduction to HTML5Gil Fink

The document is a presentation on HTML5 that covers: - What HTML5 is and why to use it - New HTML5 structural elements, forms, multimedia elements, and JavaScript APIs - Demonstrations of HTML5 features like Canvas, SVG, Geolocation, Web Workers, and Web Sockets - How CSS3 enhances HTML5 with features like media queries, colors, animations and more - Strategies for implementing HTML5 into websites while maintaining compatibility

Css PptHema Prasanth

This document provides an overview of various CSS topics including comments, colors, text formatting, positioning, and cross-browser compatibility. It explains concepts like using hexadecimal color codes, text properties like alignment and decoration, positioning elements with static, relative, absolute and fixed positioning, and strategies for aligning elements and dealing with browser inconsistencies.

CSS.pptMukulSingh293955

The document defines CSS (Cascading Style Sheets) and its advantages over HTML. CSS describes how HTML elements are displayed, controls layout, and saves work by allowing styles to be reused across pages. There are three ways to add CSS - inline using the style attribute, internally using the <style> tag, or externally using a separate .css file which is most common. CSS rules have selectors, properties, and values to style elements.

javaScript.pptsentayehu

This document provides an overview of JavaScript and the DOM (Document Object Model) for a web programming course. It introduces JavaScript as a scripting language used to add interactivity to HTML pages. It describes what JavaScript can do, such as dynamically updating text and reacting to events. It also covers JavaScript syntax, variables, operators, functions, and objects. A significant portion of the document is devoted to explaining the DOM and how it allows JavaScript to access and modify HTML elements and structure programmatically.

PHP - Introduction to Object Oriented Programming with PHPVibrant Technologies & Computers

The document provides an introduction to object-oriented programming (OOP) in PHP, covering key concepts such as classes, objects, encapsulation, inheritance, and visibility levels for member variables. It includes code examples for creating classes, methods, properties, and discusses best practices for data access through getters and setters, as well as the use of constructors and destructors. Additionally, it outlines tasks for applying these concepts to create related classes for products and music CDs.

Javascript variables and datatypesVarun C M

JavaScript variables hold values and are declared with var. Variable names are case sensitive and must begin with a letter or underscore. Variables can hold numbers, strings, Booleans, objects, and null values. Arrays are objects that hold multiple values in a single variable. Functions are blocks of code that perform tasks and are executed by events or calls. Objects store related data and functions to represent self-contained entities.

Introduction of Html/css/jsKnoldus Inc.

Introduction to asp.netSHADAB ALI

Php formsAnne Lee

The document discusses PHP forms and includes the following key points: 1. Forms can submit data via GET and POST methods, with GET appending data to the URL and POST transmitting data hiddenly. Both methods store data in superglobal arrays ($_GET and $_POST). 2. Form validation ensures required fields are filled and data meets specified criteria. Common validations check for required fields, valid email addresses, URLs, and more. 3. HTML form elements like text fields, textareas, radio buttons, drop-downs are used to collect user input. PHP processes submitted data and can validate required fields are not empty.

html-tableDhirendra Chauhan

PHP POWERPOINT SLIDESIsmail Mukiibi

PHP is a server-side scripting language that can be embedded into HTML pages using PHP tags. When a PHP page is requested, the server will execute any PHP code and output the results. PHP allows variables, control structures, and functions to handle tasks like form processing, file uploads, and database access. Functions like file() can read file contents into an array, and files can be uploaded and moved using the $_FILES array and move_uploaded_file() function. PHP scripts can generate dynamic web page content on the server before sending the page to the client.

Javascriptmussawir20

JavaScript is a client-side scripting language that can be inserted into HTML pages to make them interactive. It allows dynamic validation of forms, changing HTML element properties like visibility, and reacting to user events like clicks or form submissions. The Document Object Model (DOM) represents an HTML or XML document as a tree structure, allowing JavaScript to programmatically access and modify the content, structure, and styling of the document. Common built-in JavaScript objects include String, Date, Array, Math, and Boolean, which provide properties and methods for manipulating text, dates, lists of values, numbers, and true/false values.

Cascading Style Sheet (CSS)AakankshaR

CSS (Cascading Style Sheets) is a markup language used to style and lay out web documents. There are three types of CSS: external style sheets, internal style sheets, and inline styles. External style sheets are ideal for applying styles to many pages, internal style sheets are used for styling a single document with unique styles, and inline styles are applied directly to HTML elements but lose advantages of style sheets.

HTML CSS BasicsMai Moustafa

This document provides an overview of HTML and CSS for website development. It discusses how websites use HTML for content, CSS for presentation, and JavaScript for behavior. It then covers basic HTML tags and structure, as well as CSS selectors, the box model, positioning, and floats. The goal is to teach the essentials of using HTML to structure content and CSS to style and position that content for websites.

Php introductionkrishnapriya Tadepalli

PHP is an open-source server-side scripting language used for web development. It was created by Rasmus Lerdorf in 1994. Some key points: - PHP scripts are embedded into HTML pages and executed on the server side, with the output sent to the client. This allows PHP to generate dynamic web page content. - PHP is free to use and runs on many platforms including Windows, Linux, and Mac. It is compatible with many databases like MySQL. - The language syntax is loosely based on C and Java. Key constructs include variables, strings, arrays, functions, loops, conditional statements, and object-oriented capabilities. - PHP files use .php extensions and code

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.

CSS BasicsWordPress Memphis

The document provides a comprehensive introduction to Cascading Style Sheets (CSS), detailing its structure, components, and benefits for web design. It covers essential concepts such as the box model, style sheet implementation, common CSS properties, and how CSS interacts with HTML. Additionally, it outlines methods for attaching CSS to HTML and explains various layout properties, selectors, and inheritance principles.

CSSPeople Strategists

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. CSS allows you to control the color, font, size, spacing, and other aspects of HTML elements. CSS properties like background, text, font, links, lists and box model can be used to format HTML elements. CSS rules have selectors that specify the element to which a declaration applies, and declarations that contain property-value pairs that define the presentation of the element.

HTMLCONNECTINGTO

This document provides an introduction to HTML and covers several basic HTML elements for formatting text. It discusses headings, paragraphs, breaks, and horizontal rules. It also covers setting document properties like background color and text color. Character formatting elements are introduced like bold, italics, font size, color, and alignment. The document recommends starting with a basic HTML template and provides examples of coding structures for the various elements.

jQuery for beginnersArulmurugan Rajaraman

Html PptHema Prasanth

XhtmlManav Prasad

XHTML was created to replace HTML and is defined using XML rather than SGML. It is nearly identical to HTML but aims to be cleaner and more extensible by requiring elements to be properly nested, closed, and case-sensitive. Documents must also have a DOCTYPE declaration and refer to a DTD that defines syntax requirements. There are three main DTDs that can be used with XHTML - Strict, Transitional, and Frameset - depending on whether style information or frames are needed.

HTML: Tables and FormsBG Java EE Course

The document discusses HTML tables and forms. It covers core table tags like <table>, <tr>, and <td> and how to structure tables with headers, bodies, and footers. It also explains how to customize tables using attributes like cellspacing, cellpadding, colspan, and rowspan. For forms, it describes common form controls like text fields, textareas, radio buttons, checkboxes and how to lay them out in a form with a submit button. It provides an example form to demonstrate these concepts.

Active server pagesmcatahir947

Active Server Pages (ASP) was introduced in 1996 and bundled with Internet Information Server 3.0. ASP allows developers to create dynamic web pages by mixing standard HTML tags with server-side scripting code. Some key capabilities of ASP include generating dynamic web pages, processing HTML forms, creating database-driven pages, and tracking user sessions. The core ASP components include the Request, Response, Session, Server, and Error objects which provide functionality for handling requests, sending responses, storing session data, accessing server properties, and displaying error information.

Introduction to HTML and CSSdanpaquette

The document is an introduction to HTML and CSS that provides a tutorial on the basic syntax and structure of each language. It begins by explaining how to create simple HTML files and add basic HTML tags like headings, paragraphs, and lists. It then introduces linking an external CSS stylesheet and using CSS selectors to style HTML elements by changing properties like colors, backgrounds, padding and more. The document provides examples of additional CSS concepts like classes, inheritance, the box model, specificity and more. It concludes by recommending additional resources for references, validators, code editors and tutorials.

Css umesh patil

This document discusses how CSS (Cascading Style Sheets) is used to style and format HTML documents. CSS describes how HTML elements should be presented and is kept in a separate file from HTML code. CSS allows formatting of elements like comment boxes, background colors, fonts, and navigation bars. The document explains how to link a CSS file to an HTML file using the <link> tag and provides an example of CSS code to change the font color of <h1> tags to blue.

More Related Content

What's hot (20)

PHP - Introduction to Object Oriented Programming with PHPVibrant Technologies & Computers

Javascript variables and datatypesVarun C M

Introduction of Html/css/jsKnoldus Inc.

Introduction to asp.netSHADAB ALI

Php formsAnne Lee

html-tableDhirendra Chauhan

PHP POWERPOINT SLIDESIsmail Mukiibi

Javascriptmussawir20

Cascading Style Sheet (CSS)AakankshaR

HTML CSS BasicsMai Moustafa

Php introductionkrishnapriya Tadepalli

JavaScript - An IntroductionManvendra Singh

CSS BasicsWordPress Memphis

CSSPeople Strategists

HTMLCONNECTINGTO

jQuery for beginnersArulmurugan Rajaraman

Html PptHema Prasanth

XhtmlManav Prasad

HTML: Tables and FormsBG Java EE Course

Active server pagesmcatahir947

PHP - Introduction to Object Oriented Programming with PHPVibrant Technologies & Computers

Javascript variables and datatypesVarun C M

Introduction of Html/css/jsKnoldus Inc.

Introduction to asp.netSHADAB ALI

Php formsAnne Lee

html-tableDhirendra Chauhan

PHP POWERPOINT SLIDESIsmail Mukiibi

Javascriptmussawir20

Cascading Style Sheet (CSS)AakankshaR

HTML CSS BasicsMai Moustafa

Php introductionkrishnapriya Tadepalli

JavaScript - An IntroductionManvendra Singh

CSS BasicsWordPress Memphis

CSSPeople Strategists

HTMLCONNECTINGTO

jQuery for beginnersArulmurugan Rajaraman

Html PptHema Prasanth

XhtmlManav Prasad

HTML: Tables and FormsBG Java EE Course

Active server pagesmcatahir947

Similar to HTML + CSS Examples (20)

Introduction to HTML and CSSdanpaquette

Css umesh patil

[SUTD GDSC] Intro to HTML and CSSBeckhamWee

Intro to HTML & CSSSyed Sami

The document provides an overview of HTML and CSS, covering topics such as the structure of an HTML document, HTML tags, CSS, and how to create a basic webpage. It discusses what HTML and CSS are, why they are needed, popular HTML tags, and gives examples of adding CSS to an HTML document. It also provides a hands-on tutorial showing how to build a simple website covering HTML basics and using CSS for styling.

Cssmreckman

This document provides an introduction to CSS (Cascading Style Sheets) and how to link a CSS stylesheet to an HTML document. It explains that CSS is used to describe the presentation and styling of HTML elements and belongs in a separate file. It then demonstrates how to add a link tag in the HTML head to connect the HTML and CSS documents. The document proceeds to provide examples of CSS code to change properties like font color and discusses selecting HTML elements to style them.

Lesson 109 23 aug13-1430-ayCodecademy Ren

1. Separating HTML and CSS into different files saves time by allowing code reuse. A single CSS stylesheet can be linked to multiple HTML pages to style them all the same way. 2. It helps with debugging by keeping the files organized and readable. Combining HTML and CSS leads to "code bloat" that is difficult to navigate. 3. Separation of concerns keeps code divided into logical sections focused on specific tasks like page structure (HTML) and presentation (CSS). This makes the code easier to work on and maintain, especially for collaborative teams.

Css for Developmenttsengsite

Steve Barman - CSS and WordPressAnthony Montalbano

The document discusses the basics of CSS for beginners, explaining that CSS allows styling of website content with minimal code and enables full customization of a site's appearance without risk of breaking pages. It provides an overview of the key components of a WordPress site, recommends tools for working with CSS like text editors and browsers, and gives examples of CSS syntax and how specificity determines which styles take precedence.

Cascading Style Sheetssanjay joshi

This document introduces CSS (Cascading Style Sheets) and how it is used to style HTML documents. CSS code belongs in a separate file than HTML and is linked using the <link> tag. CSS allows you to control things like backgrounds, colors, fonts and layout. An example is provided of how to change the font color of an <h1> tag by selecting it with CSS and specifying the new color value. The key aspects of CSS code, like selecting elements, properties, and values, are explained.

Presentation 1 [autosaved]AbdulrahmaanDhagacad

- In this course you will learn how to create a responsive web design that adapts to different screen sizes by changing the layout and rearranging content, and also optimizes the design for printing. You will start by building the HTML structure and then use CSS to style the content and create different layouts based on screen size and media queries. The course provides step-by-step instructions to teach techniques for responsive design, CSS styling, and combining HTML elements with CSS properties.

HTML5 - Just the basicsJames VanDyke

HTML5 is intended as a replacement for HTML4 and XHTML. It is based on usage data and developed through cooperation between the W3C and browser makers. An HTML5 page uses the <!DOCTYPE html> declaration and introduces several new semantic elements like <header>, <nav>, <article>, <aside>, and <footer> to help describe different parts of a page. It also includes new form input types and specialized elements for things like canvas, video, geolocation, and offline web apps.

BITM3730 9-19.pptxMattMarino13

The document discusses Cascading Style Sheets (CSS) and how they are used to control the layout and formatting of web pages. It covers the basic syntax of CSS code and the three main ways to apply stylesheets: internally, inline, and externally. Key points include that CSS separates structure and presentation, stylesheets allow consistent styling across pages, and the <link> tag is used to connect external CSS files to HTML documents.

BITM3730 9-20.pptxMattMarino13

The document provides an overview of CSS (Cascading Style Sheets) including its basic syntax and the three main methods for applying stylesheets: inline, internal, and external. It explains that CSS is used to control the layout and formatting of HTML elements and allows for consistent styling across multiple web pages. The key points covered are: - CSS syntax uses selectors, properties, and values to style HTML elements - Stylesheets can be defined internally within HTML, inline within elements, or externally in separate files - External stylesheets are considered the best practice and allow linking CSS to HTML documents

Lesson 108 23 aug13-1430-ayCodecademy Ren

This document provides a lesson on learning to use CSS by writing a CSS file and linking it to an HTML file. It explains how to create a CSS file, write CSS code to style text properties, and link the CSS file to an HTML file. When the files are linked, the CSS styling is applied and the page is formatted as specified in the CSS code. The document emphasizes that CSS allows for creative styling of web pages in many different ways.

New Ora Tec HTML ClassShahid Qureshi

This document provides an introduction to creating websites using HTML, CSS, and JavaScript. It explains that HTML is a markup language used to structure content, CSS is used to style HTML elements, and there are three ways to apply CSS - inline, internal, and external. It also gives examples of common HTML tags and outlines the basic structure of an HTML page with sections for headers, menus, content areas, and footers.

CHAPTER 1_ HTML and CSS Introduction Modulessusera4f8281

This document provides an introduction to HTML and CSS. It begins with learning objectives about learning the features of HTML and benefits of CSS. It then defines HTML as the standard markup language for web documents and CSS as the style sheet language used for describing presentation of HTML documents. The document outlines some advantages and disadvantages of HTML and CSS. It also introduces some common code editors used for HTML and CSS, such as Visual Studio Code, Notepad++, Sublime Text, and Atom. Finally, it discusses how HTML provides structure for web pages while CSS enhances the appearance, and how they work together with HTML providing the content and CSS controlling the presentation.

ch04-css-basics_final.pptGmachImen

This document discusses Cascading Style Sheets (CSS) basics including: - Separating content from presentation using CSS and HTML documents. - Configuring styles using inline, embedded, and external style sheets. - Selecting elements using tag names, classes, IDs, and other selectors. - Setting properties like colors, fonts, spacing in CSS rules. - Linking HTML and CSS documents in various ways including using <link> and @import directives.

Creative Web 02 - HTML & CSS BasicsLukas Oppermann

This document provides an overview of HTML and CSS basics: - HTML is used to define the structure and content of web pages using tags like <html>, <head>, <body>, etc. CSS is used to style and lay out HTML elements. - The <head> holds metadata like the page title and links to CSS. The <body> contains visible elements that define the page structure. - CSS rules are made up of selectors that target HTML elements paired with declarations in curly braces. Common selectors include classes, IDs, and element types. - CSS files are linked in the <head> with <link> tags. Paths to other files can be relative to the current

6_CasCadingStylesSheetsCSS.pptVARNITBHASKAR1

Cascading Style Sheets (CSS) allow formatting of web documents. CSS provides attributes to create dynamic effects on web pages. Style sheets allow predefining formatting properties in a single list to apply globally or selectively. There are three main ways to insert a CSS stylesheet - external, internal, and inline. External stylesheets define styles in a .css file and can change an entire website with one file change. Internal stylesheets define styles within the <style> element in the HTML <head>. Inline styles directly format individual elements using the style attribute.

Presentation on html, cssAamir Sohail

This document discusses HTML and CSS. It provides an overview of HTML, describing it as a markup language used to define web pages using tags. It gives examples of basic HTML tags and page structure. It also covers CSS, explaining that CSS is used to style and lay out HTML elements, including different ways of inserting CSS like inline, internal, and external stylesheets. The document provides examples of HTML code and CSS code.

Introduction to HTML and CSSdanpaquette

Css umesh patil

[SUTD GDSC] Intro to HTML and CSSBeckhamWee

Intro to HTML & CSSSyed Sami

Cssmreckman

Lesson 109 23 aug13-1430-ayCodecademy Ren

Css for Developmenttsengsite

Steve Barman - CSS and WordPressAnthony Montalbano

Cascading Style Sheetssanjay joshi

Presentation 1 [autosaved]AbdulrahmaanDhagacad

HTML5 - Just the basicsJames VanDyke

BITM3730 9-19.pptxMattMarino13

BITM3730 9-20.pptxMattMarino13

Lesson 108 23 aug13-1430-ayCodecademy Ren

New Ora Tec HTML ClassShahid Qureshi

CHAPTER 1_ HTML and CSS Introduction Modulessusera4f8281

ch04-css-basics_final.pptGmachImen

Creative Web 02 - HTML & CSS BasicsLukas Oppermann

6_CasCadingStylesSheetsCSS.pptVARNITBHASKAR1

Presentation on html, cssAamir Sohail

More from Mohamed Loey (20)

Lecture 6: Deep Learning ApplicationsMohamed Loey

Lecture 5: Convolutional Neural Network ModelsMohamed Loey

The document outlines the evolution and architecture of various convolutional neural networks (CNNs) developed for the ImageNet Large Scale Visual Recognition Challenge (ILSVRC) from 2012 to 2015, focusing on models like AlexNet, ZFNet, VGGNet, GoogLeNet, and ResNet. It describes key features such as layer compositions, error rates, and innovations like dropout and batch normalization aimed at improving performance and reducing overfitting. Each network's structure is compared, highlighting advancements in design and training techniques, culminating in the increasing complexity and depth of models over the years.

Lecture 4: Deep Learning FrameworksMohamed Loey

The document provides information on several popular deep learning frameworks: TensorFlow, Caffe, Theano, Torch, CNTK, and Keras. It describes each framework's creator, license, programming languages supported, and brief purpose or use. TensorFlow is noted as the most popular framework, created by Google for machine learning research. Caffe is described as the fastest, Theano as most efficient, Torch is used by Facebook AI, CNTK for high scalability, and Keras for easy experimentation across frameworks. The document also provides examples of building and running computational graphs in TensorFlow.

Lecture 4: How it Works: Convolutional Neural NetworksMohamed Loey

Lecture 3: Convolutional Neural NetworksMohamed Loey

The document discusses convolutional neural networks (CNNs), highlighting their structure and applications in image and speech recognition while outlining the importance of deep learning in machine learning. It details the various layers of CNNs, prominent architectures such as AlexNet and VGGNet, and the datasets used for training and evaluation. Additionally, it covers strategies to mitigate overfitting in CNNs and emphasizes the significance of deep learning for complex tasks in data science.

Lecture 2: Artificial Neural NetworkMohamed Loey

The document provides an overview of artificial neural networks (ANNs), detailing their structure and functionality, inspired by biological neurons. It discusses the perceptron model and its limitations, such as its inability to solve nonlinear problems like XOR, and presents multilayer perceptrons with backpropagation as a solution. Additionally, it outlines key concepts and methods related to neural networks, including forward propagation, backpropagation, and error minimization in training, while also mentioning a practical assignment related to neural network architectures.

Lecture 1: Deep Learning for Computer VisionMohamed Loey

This document discusses how deep learning has helped advance computer vision capabilities. It notes that deep learning can help bridge the gap between pixels and meaning by allowing computers to recognize complex patterns in images. It provides an overview of related fields like image processing, machine learning, artificial intelligence, and computer graphics. It also lists some specific applications of deep learning like object detection, image classification, and generating descriptive text. Students are then assigned a task to research how deep learning has improved one particular topic and submit a two-page summary.

Design of an Intelligent System for Improving Classification of Cancer DiseasesMohamed Loey

The document presents an intelligent decision support system designed for the early diagnosis of cancer by classifying gene expression profiles from datasets related to breast, colon, and central nervous system (CNS) cancers. The system overcomes challenges such as dimensionality and relevancy of gene data, utilizing advanced methodologies like information gain for feature selection and gray wolf optimization for feature reduction. Results indicate the proposed system has superior classification accuracy compared to existing methodologies, demonstrating a significant improvement in the reliability and efficiency of cancer diagnosis.

Computer Security - CCNA Security - Lecture 2Mohamed Loey

The document covers various aspects of network security, specifically focusing on authentication, authorization, and accounting (AAA) processes essential for effective network management. It discusses methods for implementing AAA, including local and server-based authentication, and explains protocols like TACACS+ and RADIUS used in these processes. Additionally, it highlights best practices for configuring AAA in different network environments, emphasizing the importance of securing access to network resources.

Computer Security - CCNA Security - Lecture 1Mohamed Loey

The document provides an overview of modern network security threats and methods for securing network devices, including various types of attacks such as denial of service, man-in-the-middle, and phishing. It also discusses the implementation of security measures such as firewalls, intrusion prevention, and cryptographic systems. Additionally, it highlights tools like Kali Linux and Wireshark for penetration testing and network analysis.

Algorithms Lecture 8: Pattern AlgorithmsMohamed Loey

The document discusses patterns in algorithms, particularly focusing on pattern searching techniques used in computer science. It explains naive pattern searching, provides examples of inputs and outputs, and outlines regular expressions for matching text patterns. Additionally, it covers best and worst-case scenarios for pattern searching and demonstrates the use of Python for regular expressions.

Algorithms Lecture 7: Graph AlgorithmsMohamed Loey

The document provides a comprehensive analysis and design of algorithms related to graph theory, focusing on concepts such as directed and undirected graphs, acyclic and cyclic graphs, and techniques for graph traversal including breadth-first and depth-first search methods. It explains the significance of vertices and edges, the operations of searching and traversing nodes, and includes examples illustrating the application of these concepts. Additionally, it addresses cycle detection in directed graphs using depth-first traversal.

Algorithms Lecture 6: Searching AlgorithmsMohamed Loey

Algorithms Lecture 5: Sorting Algorithms IIMohamed Loey

The document discusses sorting algorithms, focusing primarily on counting sort, which is a non-comparison based sorting technique that counts the occurrences of each unique key within a defined range. It outlines the steps for implementing counting sort, including creating a count array, modifying it, and producing the output array based on this count. An illustrative example is provided to demonstrate the counting sort process and its implementation details.

Algorithms Lecture 4: Sorting Algorithms IMohamed Loey

The document discusses three sorting algorithms: bubble sort, selection sort, and insertion sort. Bubble sort works by repeatedly swapping adjacent elements that are in the wrong order. Selection sort finds the minimum element and swaps it into the sorted portion of the array. Insertion sort inserts elements into the sorted portion of the array, swapping as needed to put the element in the correct position. Both selection sort and insertion sort have a time complexity of O(n^2) in the worst case.

Algorithms Lecture 3: Analysis of Algorithms IIMohamed Loey

The document discusses the analysis and design of algorithms, focusing on the maximum pairwise product, Fibonacci sequence, and greatest common divisors (GCD). It presents naive and efficient algorithms for calculating these values, emphasizing the importance of time complexity. Efficient algorithms reduce computational steps, highlighting the differences in performance between naive and advanced approaches.

Algorithms Lecture 2: Analysis of Algorithms IMohamed Loey

This document discusses analysis of algorithms and time complexity. It explains that analysis of algorithms determines the resources needed to execute algorithms. The time complexity of an algorithm quantifies how long it takes. There are three cases to analyze - worst case, average case, and best case. Common notations for time complexity include O(1), O(n), O(n^2), O(log n), and O(n!). The document provides examples of algorithms and determines their time complexity in different cases. It also discusses how to combine complexities of nested loops and loops in algorithms.

Algorithms Lecture 1: Introduction to AlgorithmsMohamed Loey

The document discusses the analysis and design of algorithms, focusing on time and space complexity while distinguishing between various algorithm types and their applications. It highlights the use of Python as a preferred programming language due to its ease of use, supportive community, and extensive libraries like NumPy and SciPy. The document also covers pseudocode as an informal method of describing algorithms and provides examples of sorting and searching algorithms.

Convolutional Neural Network Models - Deep LearningMohamed Loey

The document provides an overview of Convolutional Neural Network (CNN) models developed for image classification, highlighting notable models such as AlexNet, ZFNet, VGGNet, GoogLeNet, and ResNet. It outlines the architecture, training processes, and performance metrics of these models, including their respective top-5 error rates in the ImageNet Large Scale Visual Recognition Challenge. Additionally, it covers specific training techniques and innovations employed by each model to improve accuracy and efficiency.

Deep Learning - Overview of my work IIMohamed Loey

The document covers various aspects of deep learning, including definitions of artificial narrow, general, and super intelligence, and details on machine learning techniques like supervised and unsupervised learning. It discusses the architecture of neural networks such as convolutional neural networks and their application in image recognition, speech recognition, and natural language processing, along with datasets like MNIST and CIFAR-10. Techniques to mitigate overfitting in neural networks, such as dropout and L2 regularization, are also highlighted, along with a summary of a new CNN architecture built for classifying Arabic handwritten characters.

Lecture 6: Deep Learning ApplicationsMohamed Loey

Lecture 5: Convolutional Neural Network ModelsMohamed Loey

Lecture 4: Deep Learning FrameworksMohamed Loey

Lecture 4: How it Works: Convolutional Neural NetworksMohamed Loey

Lecture 3: Convolutional Neural NetworksMohamed Loey

Lecture 2: Artificial Neural NetworkMohamed Loey

Lecture 1: Deep Learning for Computer VisionMohamed Loey

Design of an Intelligent System for Improving Classification of Cancer DiseasesMohamed Loey

Computer Security - CCNA Security - Lecture 2Mohamed Loey

Computer Security - CCNA Security - Lecture 1Mohamed Loey

Algorithms Lecture 8: Pattern AlgorithmsMohamed Loey

Algorithms Lecture 7: Graph AlgorithmsMohamed Loey

Algorithms Lecture 6: Searching AlgorithmsMohamed Loey

Algorithms Lecture 5: Sorting Algorithms IIMohamed Loey

Algorithms Lecture 4: Sorting Algorithms IMohamed Loey

Algorithms Lecture 3: Analysis of Algorithms IIMohamed Loey

Algorithms Lecture 2: Analysis of Algorithms IMohamed Loey

Algorithms Lecture 1: Introduction to AlgorithmsMohamed Loey

Convolutional Neural Network Models - Deep LearningMohamed Loey

Deep Learning - Overview of my work IIMohamed Loey

Recently uploaded (20)

Quantum AI: Where Impossible Becomes ProbableSaikat Basu

GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdfPriyanka Aash

Enhance GitHub Copilot using MCP - Enterprise version.pdfNilesh Gule

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

From Manual to Auto Searching- FME in the Driver's SeatSafe Software

Finding a specific car online can be a time-consuming task, especially when checking multiple dealer websites. A few years ago, I faced this exact problem while searching for a particular vehicle in New Zealand. The local classified platform, Trade Me (similar to eBay), wasn’t yielding any results, so I expanded my search to second-hand dealer sites—only to realise that periodically checking each one was going to be tedious. That’s when I noticed something interesting: many of these websites used the same platform to manage their inventories. Recognising this, I reverse-engineered the platform’s structure and built an FME workspace that automated the search process for me. By integrating API calls and setting up periodic checks, I received real-time email alerts when matching cars were listed. In this presentation, I’ll walk through how I used FME to save hours of manual searching by creating a custom car-finding automation system. While FME can’t buy a car for you—yet—it can certainly help you find the one you’re after!

The Future of Technology: 2025-2125 by Saikat Basu.pdfSaikat Basu

Smarter Aviation Data Management: Lessons from Swedavia Airports and SwecoSafe Software

Managing airport and airspace data is no small task, especially when you’re expected to deliver it in AIXM format without spending a fortune on specialized tools. But what if there was a smarter, more affordable way? Join us for a behind-the-scenes look at how Sweco partnered with Swedavia, the Swedish airport operator, to solve this challenge using FME and Esri. Learn how they built automated workflows to manage periodic updates, merge airspace data, and support data extracts – all while meeting strict government reporting requirements to the Civil Aviation Administration of Sweden. Even better? Swedavia built custom services and applications that use the FME Flow REST API to trigger jobs and retrieve results – streamlining tasks like securing the quality of new surveyor data, creating permdelta and baseline representations in the AIS schema, and generating AIXM extracts from their AIS data. To conclude, FME expert Dean Hintz will walk through a GeoBorders reading workflow and highlight recent enhancements to FME’s AIXM (Aeronautical Information Exchange Model) processing and interpretation capabilities. Discover how airports like Swedavia are harnessing the power of FME to simplify aviation data management, and how you can too.

Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdfPriyanka Aash

You are not excused! How to avoid security blind spots on the way to productionMichele Leroux Bustamante

We live in an ever evolving landscape for cyber threats creating security risk for your production systems. Mitigating these risks requires participation throughout all stages from development through production delivery - and by every role including architects, developers QA and DevOps engineers, product owners and leadership. No one is excused! This session will cover examples of common mistakes or missed opportunities that can lead to vulnerabilities in production - and ways to do better throughout the development lifecycle.

Cyber Defense Matrix Workshop - RSA ConferencePriyanka Aash

The Future of Product Management in AI ERA.pdfAlyona Owens

Hi, I’m Aly Owens, I have a special pleasure to stand here as over a decade ago I graduated from CityU as an international student with an MBA program. I enjoyed the diversity of the school, ability to work and study, the network that came with being here, and of course the price tag for students here has always been more affordable than most around. Since then I have worked for major corporations like T-Mobile and Microsoft and many more, and I have founded a startup. I've also been teaching product management to ensure my students save time and money to get to the same level as me faster avoiding popular mistakes. Today as I’ve transitioned to teaching and focusing on the startup, I hear everybody being concerned about Ai stealing their jobs… We’ll talk about it shortly. But before that, I want to take you back to 1997. One of my favorite movies is “Fifth Element”. It wowed me with futuristic predictions when I was a kid and I’m impressed by the number of these predictions that have already come true. Self-driving cars, video calls and smart TV, personalized ads and identity scanning. Sci-fi movies and books gave us many ideas and some are being implemented as we speak. But we often get ahead of ourselves: Flying cars,Colonized planets, Human-like AI: not yet, Time travel, Mind-machine neural interfaces for everyone: Only in experimental stages (e.g. Neuralink). Cyberpunk dystopias: Some vibes (neon signs + inequality + surveillance), but not total dystopia (thankfully). On the bright side, we predict that the working hours should drop as Ai becomes our helper and there shouldn’t be a need to work 8 hours/day. Nobody knows for sure but we can require that from legislation. Instead of waiting to see what the government and billionaires come up with, I say we should design our own future. So, we as humans, when we don’t know something - fear takes over. The same thing happened during the industrial revolution. In the Industrial Era, machines didn’t steal jobs—they transformed them but people were scared about their jobs. The AI era is making similar changes except it feels like robots will take the center stage instead of a human. First off, even when it comes to the hottest space in the military - drones, Ai does a fraction of work. AI algorithms enable real-time decision-making, obstacle avoidance, and mission optimization making drones far more autonomous and capable than traditional remote-controlled aircraft. Key technologies include computer vision for object detection, GPS-enhanced navigation, and neural networks for learning and adaptation. But guess what? There are only 2 companies right now that utilize Ai in drones to make autonomous decisions - Skydio and DJI.

AI VIDEO MAGAZINE - June 2025 - r/aivideo1pcity Studios, Inc

OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC

The OpenACC organization focuses on enhancing parallel computing skills and advancing interoperability in scientific applications through hackathons and training. The upcoming 2025 Open Accelerated Computing Summit (OACS) aims to explore the convergence of AI and HPC in scientific computing and foster knowledge sharing. This year's OACS welcomes talk submissions from a variety of topics, from Using Standard Language Parallelism to Computer Vision Applications. The document also highlights several open hackathons, a call to apply for NVIDIA Academic Grant Program and resources for optimizing scientific applications using OpenACC directives.

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.

“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...Edge AI and Vision Alliance

For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/mpu-a-transformative-solution-for-next-gen-ai-at-the-edge-a-presentation-from-fotonation/ Petronel Bigioi, CEO of FotoNation, presents the “MPU+: A Transformative Solution for Next-Gen AI at the Edge” tutorial at the May 2025 Embedded Vision Summit. In this talk, Bigioi introduces MPU+, a novel programmable, customizable low-power platform for real-time, localized intelligence at the edge. The platform includes an AI-augmented image signal processor that enables leading image and video quality. In addition, it integrates ultra-low-power object and motion detection capabilities to enable always-on computer vision. A programmable neural processor provides flexibility to efficiently implement new neural networks. And additional specialized engines facilitate image stabilization and audio enhancements.

"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.

" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...Fwdays

Let's talk about our history. How we started the project with a small vector database of less than 2 million records. Later, we received a request for +100 million records, then another +100... And so gradually we reached almost 1 billion. Standard tools were quickly running out of steam - we were running into performance, index size, and very limited resources. After a long series of trials and errors, we built our own low-cost cluster, which today stably processes thousands of queries to more than 1B vectors.

Python Conference Singapore - 19 Jun 2025ninefyi

WebdriverIO & JavaScript: The Perfect Duo for Web Automationdigitaljignect

In today’s dynamic digital landscape, ensuring the quality and dependability of web applications is essential. While Selenium has been a longstanding solution for automating browser tasks, the integration of WebdriverIO (WDIO) with Selenium and JavaScript marks a significant advancement in automation testing. WDIO enhances the testing process by offering a robust interface that improves test creation, execution, and management. This amalgamation capitalizes on the strengths of both tools, leveraging Selenium’s broad browser support and WDIO’s modern, efficient approach to test automation. As automation testing becomes increasingly vital for faster development cycles and superior software releases, WDIO emerges as a versatile framework, particularly potent when paired with JavaScript, making it a preferred choice for contemporary testing teams.

AI Agents and FME: A How-to Guide on Generating Synthetic MetadataSafe Software