Download as pdf
Download as pdf
You are on page 1of 29
71523, 7:30 PM [Lecture 0 = 6850's Web Programming wih Python and JavaScript CS50’s Web Programming with Python and JavaScript Donate (J (https://cs50.harvard.edu/donate) Brian Yu (https://brianyu.me) brian@cs.harvard.edu David J. Malan (https://cs.harvard.edu/malan/) malan@harvard.edu £ (nttpsy//www.facebook.com/dmalan) © (https://github.com/dmalan) © (https://www.instagram.com/davidjmalan/) EB (https/Awww.linkedin.com/in/malan/) ® (https://orcid.org/0000-0001-5338-2522) Q (https:/Avww.quora.com/profile/David-J- Malan) & (https://www.reddit.com/user/davidjmalan) o* (https://wwwtiktok.com/@davidjmalan) @ (https://davidjmalan.t.ne/) (https://twitter.com/davidjmalan) Lecture 0 ‘© Introduction ‘+ Web Programming «HTML (Hypertext Markup Language! © Document Object Model (DOM) © More HTML Elements © Forms * CSS (Cascading Style Sheets) + Responsive Design + Bootstrap ntactically Awesome Style Sheets) Introduction ntps:ifes50,narvard.edulweb/2020!notosO! 7115123, 7:30 Pa Lecture 0 - 6850s Web Programming wth Python and JavaSerit In this course, we're picking up where CS50 left off and diving into the design and creation of web applications. We'll build our web-design skills by working on a number of projects throughout the course, including an open-ended final project where you'll have the chance to create a website of your own! In this course, you'll need a text editor where you can write code Locally on your computer. Some popular ones include Visual Studios Code (https://code.visualstudio.com/), Sublime Text (https://www.sublimetext.com/), Atom (https://atom.io/), and Vim (https:/Avww.vim.org/), but there are many more to choose from! Web Programming Course Topics: We'll go into more detail later, but here's a brief overview of what we'll be working on during this course: 1 yawn HTML and CSS (a markup language used to outline a webpage, and a procedure for making our sites more visually appealing) Git (used for version control and collaboration) Python (a widely-used programming language we'll use to make our sites more dynamic) Django (a popular web framework we'll use for the backend of our sites) SQL, Models, and Migrations (a language used for storing and retrieving data, and Django- specific methods that make it easier to interact with SQL databases) JavaScript (a programming language used to make websites faster and more interactive) User Interfaces (methods used to make a website as easy to use as possible) Testing, Cl, CD (learning about different methods used to make sure updates to web pages proceed smoothly) Scalability and Security (making sure our websites can be accessed by many users at once, and that they are safe from malicious intent) HTML (Hypertext Markup Language) # HTML is a markup language that defines the structure of a web page. It is interpreted by your web browser (Safari, Google Chrome, Firefox, etc.) in order to display content on your screen. ® Let's get started by writing a simple HTML file! hitps/es50.harvard.edulweb2020inotes/o! 209 7115123, 7:30 Pa Lecture 0 - 6850s Web Programming wth Python and JavaSerit Hello, world! | When we open up this file in our browser, we get! Peles C @ cdn.cs50.net Hello, world! = Now, let’s take some time to talk about the file we just wrote, which seems to be pretty complicated for such a simple page. In the first line, we are declaring (to the web browser) that we are writing the document in the latest version of HTML: HTMLS. After that, the page consists of nested HTML elements (such as html and body), each with an opening and closing tag marked with either for an opening and for a closing. Notice how each of the inner elements is indented just a bit further than the last. While this is not necessarily required by the browser, it will be very helpful to keep this up in your own code. HTML elements can include attributes, which give the browser extra information about, the element. For example, when we include lang="en" in our initial tag, we are telling the browser that we are using English as our primary language. Inside the HTML element, we typically want to include both a head anda body tag. The head element will include information about your page that is not necessarily displayed, and the body element will contain what is actually visible to users who visit the site, hips es 50.harvard.edulweb2020inotes/O! 329 7:30PM Lecture 0 - 6850 Web Programming wth Python and JavaSerit Within the head, we have included a title for our webpage, which you'll notice is displayed in the tab at the top of our web browser. Finally,» our page. /e included the text “Hello, world!” in the body, which is the visible part of Document Object Model (DOM) body Hello, world! = The DOM is a convenient way of visualizing the way HTML elements relate to each other using a tree-like structure. Above is an example of the DOM layout for the page we just 0.harvard.edulweb/2020%note 7115123, 7:30 Pa Lecture 0 - 0850's Web Programming wih Python and JavaScript wrote. More HTML Elements = There are many HTML elements you may want to use to customize your page, including headings, lists, and bolded sections. In this next example, we'll see a few of of these in action ® One more thing to note: gives us a comment in HTML, so we'll use that below to explain some of the elements. A word and an ritalicized word! View the CS5@ Website! From Everand
The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good Life
Rating: 4 out of 5 stars
4/5 (5834)
  • The Gifts of Imperfection: Let Go of Who You Think You're Supposed to Be and Embrace Who You Are
    The Gifts of Imperfection: Let Go of Who You Think You're Supposed to Be and Embrace Who You Are
    From Everand
    The Gifts of Imperfection: Let Go of Who You Think You're Supposed to Be and Embrace Who You Are
    Rating: 4 out of 5 stars
    4/5 (1093)
  • Never Split the Difference: Negotiating As If Your Life Depended On It
    Never Split the Difference: Negotiating As If Your Life Depended On It
    From Everand
    Never Split the Difference: Negotiating As If Your Life Depended On It
    Rating: 4.5 out of 5 stars
    4.5/5 (852)
  • Principles: Life and Work
    Principles: Life and Work
    From Everand
    Principles: Life and Work
    Rating: 4 out of 5 stars
    4/5 (612)
  • The Glass Castle: A Memoir
    The Glass Castle: A Memoir
    From Everand
    The Glass Castle: A Memoir
    Rating: 4.5 out of 5 stars
    4.5/5 (1720)
  • Grit: The Power of Passion and Perseverance
    Grit: The Power of Passion and Perseverance
    From Everand
    Grit: The Power of Passion and Perseverance
    Rating: 4 out of 5 stars
    4/5 (590)
  • Sing, Unburied, Sing: A Novel
    Sing, Unburied, Sing: A Novel
    From Everand
    Sing, Unburied, Sing: A Novel
    Rating: 4 out of 5 stars
    4/5 (1194)
  • Hidden Figures: The American Dream and the Untold Story of the Black Women Mathematicians Who Helped Win the Space Race
    Hidden Figures: The American Dream and the Untold Story of the Black Women Mathematicians Who Helped Win the Space Race
    From Everand
    Hidden Figures: The American Dream and the Untold Story of the Black Women Mathematicians Who Helped Win the Space Race
    Rating: 4 out of 5 stars
    4/5 (903)
  • Shoe Dog: A Memoir by the Creator of Nike
    Shoe Dog: A Memoir by the Creator of Nike
    From Everand
    Shoe Dog: A Memoir by the Creator of Nike
    Rating: 4.5 out of 5 stars
    4.5/5 (541)
  • The Perks of Being a Wallflower
    The Perks of Being a Wallflower
    From Everand
    The Perks of Being a Wallflower
    Rating: 4.5 out of 5 stars
    4.5/5 (2106)
  • The Hard Thing About Hard Things: Building a Business When There Are No Easy Answers
    The Hard Thing About Hard Things: Building a Business When There Are No Easy Answers
    From Everand
    The Hard Thing About Hard Things: Building a Business When There Are No Easy Answers
    Rating: 4.5 out of 5 stars
    4.5/5 (350)
  • Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future
    Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future
    From Everand
    Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future
    Rating: 4.5 out of 5 stars
    4.5/5 (474)
  • Bad Feminist: Essays
    Bad Feminist: Essays
    From Everand
    Bad Feminist: Essays
    Rating: 4 out of 5 stars
    4/5 (1029)
  • The Outsider: A Novel
    The Outsider: A Novel
    From Everand
    The Outsider: A Novel
    Rating: 4 out of 5 stars
    4/5 (1872)
  • Her Body and Other Parties: Stories
    Her Body and Other Parties: Stories
    From Everand
    Her Body and Other Parties: Stories
    Rating: 4 out of 5 stars
    4/5 (824)
  • The Sympathizer: A Novel (Pulitzer Prize for Fiction)
    The Sympathizer: A Novel (Pulitzer Prize for Fiction)
    From Everand
    The Sympathizer: A Novel (Pulitzer Prize for Fiction)
    Rating: 4.5 out of 5 stars
    4.5/5 (122)
  • The Emperor of All Maladies: A Biography of Cancer
    The Emperor of All Maladies: A Biography of Cancer
    From Everand
    The Emperor of All Maladies: A Biography of Cancer
    Rating: 4.5 out of 5 stars
    4.5/5 (271)
  • Angela's Ashes: A Memoir
    Angela's Ashes: A Memoir
    From Everand
    Angela's Ashes: A Memoir
    Rating: 4.5 out of 5 stars
    4.5/5 (443)
  • Brooklyn: A Novel
    Brooklyn: A Novel
    From Everand
    Brooklyn: A Novel
    Rating: 3.5 out of 5 stars
    3.5/5 (1948)
  • The Little Book of Hygge: Danish Secrets to Happy Living
    The Little Book of Hygge: Danish Secrets to Happy Living
    From Everand
    The Little Book of Hygge: Danish Secrets to Happy Living
    Rating: 3.5 out of 5 stars
    3.5/5 (405)
  • A Man Called Ove: A Novel
    A Man Called Ove: A Novel
    From Everand
    A Man Called Ove: A Novel
    Rating: 4.5 out of 5 stars
    4.5/5 (4772)
  • Steve Jobs
    Steve Jobs
    From Everand
    Steve Jobs
    Rating: 4.5 out of 5 stars
    4.5/5 (809)
  • The World Is Flat 3.0: A Brief History of the Twenty-first Century
    The World Is Flat 3.0: A Brief History of the Twenty-first Century
    From Everand
    The World Is Flat 3.0: A Brief History of the Twenty-first Century
    Rating: 3.5 out of 5 stars
    3.5/5 (2259)
  • The Art of Racing in the Rain: A Novel
    The Art of Racing in the Rain: A Novel
    From Everand
    The Art of Racing in the Rain: A Novel
    Rating: 4 out of 5 stars
    4/5 (4214)
  • The Yellow House: A Memoir (2019 National Book Award Winner)
    The Yellow House: A Memoir (2019 National Book Award Winner)
    From Everand
    The Yellow House: A Memoir (2019 National Book Award Winner)
    Rating: 4 out of 5 stars
    4/5 (98)
  • Devil in the Grove: Thurgood Marshall, the Groveland Boys, and the Dawn of a New America
    Devil in the Grove: Thurgood Marshall, the Groveland Boys, and the Dawn of a New America
    From Everand
    Devil in the Grove: Thurgood Marshall, the Groveland Boys, and the Dawn of a New America
    Rating: 4.5 out of 5 stars
    4.5/5 (266)
  • A Tree Grows in Brooklyn
    A Tree Grows in Brooklyn
    From Everand
    A Tree Grows in Brooklyn
    Rating: 4.5 out of 5 stars
    4.5/5 (1930)
  • Yes Please
    Yes Please
    From Everand
    Yes Please
    Rating: 4 out of 5 stars
    4/5 (1905)
  • A Heartbreaking Work Of Staggering Genius: A Memoir Based on a True Story
    A Heartbreaking Work Of Staggering Genius: A Memoir Based on a True Story
    From Everand
    A Heartbreaking Work Of Staggering Genius: A Memoir Based on a True Story
    Rating: 3.5 out of 5 stars
    3.5/5 (231)
  • Team of Rivals: The Political Genius of Abraham Lincoln
    Team of Rivals: The Political Genius of Abraham Lincoln
    From Everand
    Team of Rivals: The Political Genius of Abraham Lincoln
    Rating: 4.5 out of 5 stars
    4.5/5 (234)
  • The Woman in Cabin 10
    The Woman in Cabin 10
    From Everand
    The Woman in Cabin 10
    Rating: 3.5 out of 5 stars
    3.5/5 (2526)
  • Wolf Hall: A Novel
    Wolf Hall: A Novel
    From Everand
    Wolf Hall: A Novel
    Rating: 4 out of 5 stars
    4/5 (3973)
  • Fear: Trump in the White House
    Fear: Trump in the White House
    From Everand
    Fear: Trump in the White House
    Rating: 3.5 out of 5 stars
    3.5/5 (738)
  • John Adams
    John Adams
    From Everand
    John Adams
    Rating: 4.5 out of 5 stars
    4.5/5 (2410)
  • On Fire: The (Burning) Case for a Green New Deal
    On Fire: The (Burning) Case for a Green New Deal
    From Everand
    On Fire: The (Burning) Case for a Green New Deal
    Rating: 4 out of 5 stars
    4/5 (74)
  • The Light Between Oceans: A Novel
    The Light Between Oceans: A Novel
    From Everand
    The Light Between Oceans: A Novel
    Rating: 4.5 out of 5 stars
    4.5/5 (789)
  • Manhattan Beach: A Novel
    Manhattan Beach: A Novel
    From Everand
    Manhattan Beach: A Novel
    Rating: 3.5 out of 5 stars
    3.5/5 (880)
  • The Constant Gardener: A Novel
    The Constant Gardener: A Novel
    From Everand
    The Constant Gardener: A Novel
    Rating: 3.5 out of 5 stars
    3.5/5 (104)
  • The Unwinding: An Inner History of the New America
    The Unwinding: An Inner History of the New America
    From Everand
    The Unwinding: An Inner History of the New America
    Rating: 4 out of 5 stars
    4/5 (45)
  • Rise of ISIS: A Threat We Can't Ignore
    Rise of ISIS: A Threat We Can't Ignore
    From Everand
    Rise of ISIS: A Threat We Can't Ignore
    Rating: 3.5 out of 5 stars
    3.5/5 (137)
  • Little Women
    Little Women
    From Everand
    Little Women
    Rating: 4 out of 5 stars
    4/5 (105)