Scribd Logo
Upload

Welcome to Scribd!

  • HTML y CSS

    Uploaded by

    Luis A.
    12 views47 pages
    The document discusses topics for web programming including HTML, CSS, Git, Python, Django, JavaScript, testing and deployment. It covers the basics of HTML and CSS like common tags, properties and responsive design techniques. Frameworks like Bootstrap and preprocessors like Sass are also mentioned. Other topics include the document object model, flexbox, grids, media queries and responsive design patterns using viewports.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses topics for web programming including HTML, CSS, Git, Python, Django, JavaScript, testing and deployment. It covers the basics of HTML and CSS like common tags, properties and responsive design techniques. Frameworks like Bootstrap and preprocessors like Sass are also mentioned. Other topics include the document object model, flexbox, grids, media queries and responsive design patterns using viewports.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    12 views47 pages

    HTML y CSS

    Uploaded by

    Luis A.
    The document discusses topics for web programming including HTML, CSS, Git, Python, Django, JavaScript, testing and deployment. It covers the basics of HTML and CSS like common tags, properties and responsive design techniques. Frameworks like Bootstrap and preprocessors like Sass are also mentioned. Other topics include the document object model, flexbox, grids, media queries and responsive design patterns using viewports.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 47

    Web Programming

    with Python and JavaScript


    Web Programming
    HTML

    HTML and CSS


    Git
    Python
    Django
    SQL, Models,
    and Migrations
    JavaScript
    User Interfaces
    Testing and CI/CD
    Load Balancer
    Scalability
    and Security
    Server Server Server
    HTML and CSS
    HTML
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Hello!</title>
    </head>
    <body>
    Hello, world!
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Hello!</title>
    </head>
    <body>
    Hello, world!
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Hello!</title>
    </head>
    <body>
    Hello, world!
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Hello!</title>
    </head>
    <body>
    Hello, world!
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Hello!</title>
    </head>
    <body>
    Hello, world!
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Hello!</title>
    </head>
    <body>
    Hello, world!
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Hello!</title>
    </head>
    <body>
    Hello, world!
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Hello!</title>
    </head>
    <body>
    Hello, world!
    </body>
    </html>
    Document Object Model
    html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    head body
    <title>Hello!</title>
    </head>
    <body> title Hello, world!
    Hello, world!
    </body>
    </html> Hello!
    Common HTML Tags
    • <h1>, <h2>, ..., <h6>
    • <ol>, <ul>
    • <img>
    • <a>
    • <table>
    • <form>
    • ...
    CSS
    Common CSS Properties
    • color
    • text-align
    • width, height
    • margin, padding
    • font-family, font-size, font-weight
    • border
    • ...
    Identifying Elements

    • div
    • span
    • id
    • class
    Specificity

    1. inline
    2. id
    3. class
    4. type
    Specificity
    <div id="foo">
    Hello!
    </div>

    div { Hello!
    color: blue;
    }
    Specificity
    <div id="foo">
    Hello!
    </div>

    div { Hello!
    color: blue;
    }

    #foo {
    color: red;
    }
    Specificity
    <div id="foo">
    Hello!
    </div>

    #foo { Hello!
    color: red;
    }

    div {
    color: blue;
    }
    CSS Selectors
    a, b Multiple Element Selector
    a b Descendant Selector
    a > b Child Selector
    a + b Adjacent Sibling Selector
    [a=b] Attribute Selector
    a:b Pseudoclass Selector
    a::b Pseudoelement Selector
    Responsive Design
    Responsive Design

    • viewport
    • Media Queries
    • Flexbox
    • Grids
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    Viewport

    a
    Viewport

    a
    Media Queries

    • Media Types: print, screen, ...


    • Media Features: height, width, orientation, ...
    Flexbox

    1 2 3 4 5 6
    Flexbox
    1 2 3 4 5 6

    1 2 3 4 5 6
    Flexbox

    1 2 3 4 5 6
    Flexbox

    1 2 3 4 5 6
    1 2 3 4 5 6
    Flexbox

    1 2 3 4 5 6
    Flexbox

    1 2 3
    1 2 3 4 5 6

    4 5 6
    Bootstrap
    Sass
    Web Programming
    with Python and JavaScript

    You might also like