CS50W - Lecture 0 - HTML and CSS

TABLE OF CONTENTS

00:00:00 - Introduction
00:00:15 - Web Programming
00:03:41 - HTML
00:37:14 - CSS
01:25:06 - Responsive Design
01:38:21 - Bootstrap
01:47:54 - Sass

This course picks up where Harvard University's CS50 leaves off, diving more deeply into the design and implementation of web apps with Python, JavaScript, and SQL using frameworks like Django, React, and Bootstrap. Topics include database design, scalability, security, and user experience. Through hands-on projects, students learn to write and use APIs, create interactive UIs, and leverage cloud services like GitHub and Heroku. By semester’s end, students emerge with knowledge and experience in principles, languages, and tools that empower them to design and deploy applications on the Internet.

***

This is CS50, Harvard University's introduction to the intellectual enterprises of computer science and the art of programming.

***

HOW TO SUBSCRIBE

HOW TO TAKE CS50

HOW TO JOIN CS50 COMMUNITIES

HOW TO FOLLOW DAVID J. MALAN

***

CS50 SHOP

***

LICENSE

CC BY-NC-SA 4.0
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License

David J. Malan

[chrismcgalliard]

Not only is this information powerful, but the fact that Harvard is putting it out for the whole world is amazing. Thank you!

[thien]

Notes for me for future use

00:21:53 - Creating Links
01:21:35 - Creating Links 2
00:29:54 - Creating an User entry form
00:41:10 - Text alignment
00:49:20 - Linking CSS in another file
00:53:45 - Adjusting Size
00:55:45 - Padding (Area inside)
00:56:20 - Margins (Area outside)
00:58:25 - Changing Font style
00:59:14 - Using secondary fonts (if in case the first font is not supported)
00:59:46 - Changing Font size
01:01:00 - Adding a Border
01:08:35 - Creating ID
01:10:10 - Creating Class
01:13:38 - Rules of Specificity
01:23:30 - Creating Buttons

[tomatoetom]

I’m 13 years old and I feel these lectures are providing a path for my future. Thank you so much for making this information free.

[wick]

HTML
5:50 Intro to HTML
9:10 DOM (Document Object Model)
HTML Tags
10:55 Headings
12:05 Lists (UL, OL)
17:14 Images
20:20 Attributes
21:20 Links (URL)
23:50 Tables
28:09 Dont Memorize (Use Google)
29:25 Input (Form)
33:05 Forms Advance
34:25 Datalist
38:32 Outro
CSS
37:14 Intro to CSS
39:10 Inline CSS
41:50 Inheritance (DOM)
43:10 Internal CSS
48:30 External CSS
52:25 Common CSS Properties
53:13 Div
55:45 Padding
56:25 Margin
58:00 Font
1:01:10 Border
1:03:30 Selectors in CSS
1:07:00 id (Unique)
1:10:45 Class (Not Unique)
1:13:00 Specificity Problem (inline -> id -> class -> type)
1:17:00 More Selectors
1:17:45 Descendants Selector
1:20:45 Attribute Selector
1:22:50 Pseudo-Class
1:23:30 Hover
Responsive Design *

[xmnkhod]

this man legit took 2 hours of lecture without drinking water during that period.... ;-;

[lakhdeepsingh]

This course is one of the best course about web programming ( including both paid and free )..
Thank you Brian, David and harvard CS50...
Lots of Love from India <3

[Neron]

Probably one of the most efficient 2 hours to learn from!

[matthewphilipssilveradohs]

Not only is this a great lesson, this guy is an excellent communicator. Concise, clear, only repeats himself when necessary to clarify.

[rinneganistaken]

As a web developer a found this to be one of the best courses I have seen. Great work!

[JJ-cyfi]

42 dislikes are from Yale students lol.
Jokes aside, this is one of the best courses you can possibly find on the Internet. I'm glad I've found it and have a chance to learn it for free!

[nisha.najihah]

Wow, why is it so easy to understand😭. I'm currently in college learning this and I don't understand what my lecture is even saying. OMG, This is really worth my 3 months of learning HTML & CSS. Shorten, this lecture video only uses up to 2 hours to teach and I understand the whole programming about HTML and CSS now 😏👏👏👏. REALLY APPRECIATE HARVARD😭😭 THANK YOU CS50. Will explore more :)

[pfever]

1:18:25 This is a mistake, an unorder list or order list, can only contain list items <li> as direct descendants, so you must place a nested list like the <ul> inside a <li> so it is valid HTML5.

[mrCetus]

I've tried a few different sources to learn this info and this has been the clearest, most concise and easy to understand method yet. The instructor's ability to speak with very little stutter or error is extremely helpful for me as I am easily distracted by such things! Already working confidently on my page as we speak...Thanks Harvard!

[mattmont]

Excellent presenter. Amazing that quality information like this is available for free. I am BLESSED. Much love to you Brian - thank you!

[brianochieng]

This course is powerful and the lecture is one of the best, most efficient indeed compared to lots of universities. THANK YOU BRIAN, DAVID AND CS50.

[Thearkillian]

Learnt more from this intro lecture than I did all term (semester) at my university! Thanks Brian!

[justsimplykath]

I love how all of this information was explained in a simple and understandable manner. An excellent presenter indeed!

[divyanshjainbhajan]

3:47 to 37:00 It took me 3 years to learn that much in my school.
Where were you for so many years?

[farhad.hossain]

He is one of the best teachers for this and his the ability to understand level is outstanding/extraordinary ... He didn't say anything extra. Love from Bangladesh <3

[dnguyendev]

Absolutely wonderful! All the contents packed in only 2hrs. Normally it takes more time to understand all of these topics but the instructor has done an excellent job!