HTML & CSS Crash Course – Build Reddit Step-by-Step (2025)

👉 Reddit Project Course - https://www.youtube.com/watch?v=XGTAtr0dcug

🏗️ Resources:
Reddit Clone Finished: https://dimal-dev.github.io/html-css/reddit-webdev/index.html
Exercise Solutions: https://github.com/dimal-dev/html-css/tree/main/solutions
Tutorial Code: https://github.com/dimal-dev/html-css/tree/main/tutorial-code
Course Assets: https://dimal-dev.github.io/html-css
_Tutorial 1_
Google Chrome Download Link - https://www.google.com/chrome/
VSCode Download Link - https://code.visualstudio.com/download
_Tutorial 3_
Images for Practice Exercises - https://dimal-dev.github.io/html-css/images.html
_Tutorial 4_
Tutorial image absolute URL - https://dimal-dev.github.io/html-css/img-1.png
Images for Practice Exercises - https://dimal-dev.github.io/html-css/images-2.html
YouTube Video 1 (mkbhd) - https://www.youtube.com/watch?v=kFz9afj8lu0
YouTube Video 2 (Time Travel) - https://www.youtube.com/watch?v=dBxxi5XAm3U
YouTube Video 3 (Math) - https://www.youtube.com/watch?v=Zrv1EDIqHkY
_Tutorial 5_
Images for Practice Exercises - https://dimal-dev.github.io/html-css/images-3.html
_Tutorial 6_
Resources for Practice Exercises - https://dimal-dev.github.io/html-css/resources-6.html
_Tutorial 7_
List of colors - https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
List of cursor values - https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
Image absolute URL - https://dimal-dev.github.io/html-css/img-1.png
_Tutorial 9_
Sidebar 1 - https://dimal-dev.github.io/html-css/sidebar.html
Buttons - https://dimal-dev.github.io/html-css/buttons-9.html
Sidebar 2 - https://dimal-dev.github.io/html-css/sidebar-2.html
_Tutorial 10_
Images - https://dimal-dev.github.io/html-css/resources-10.html
_Tutorial 11_
Sidebar Reference Design - https://dimal-dev.github.io/html-css/sidebar-improved.html
_Tutorial 12_
Supercomputer - https://en.wikipedia.org/wiki/Supercomputer
Black Hole - https://en.wikipedia.org/wiki/Black_hole
_Tutorial 13_
Form code - https://raw.githubusercontent.com/dimalos/html-course/main/forms.html
Baldur's Gate 3 embed link - https://www.youtube.com/embed/wWHEw36gTwU?si=OxYntLjPcIF1BplE

🎓 *Get a certificate* with premium learning experience here:
👨‍💻 *Full Premium Course – https://www.udemy.com/course/html-css-from-scratch-build-your-first-web-pages-today/

👋 Hi, I’m Dima — a Full Stack Developer with 12+ years of experience.
I’ve worked with startups and large companies, building real-world web apps using HTML, CSS, JavaScript, and more.
I love sharing what I’ve learned and helping others get started in web development.
*If this helped you, give it a like and sub—more content is coming.*

Contacts
📧 My email - dmytro.los@gmail.com
👨‍💻 LinkedIn - https://www.linkedin.com/in/dima-los

-----
⏱ TIMESTAMPS:
00:00 - Welcome, Goals, and Final Project
01:10 - 1. Create your first webpage
41:23 - Udemy Full Premium Course
42:09 - 2. Add links to other pages
1:07:23 - 3. Add images to your page
1:30:31 - 4. How to use CSS
1:53:29 - 5. How to style text
2:23:55 - 6. Mini Project: Reddit Sidebar
2:46:52 - Udemy Full Premium Course
2:49:07 - 7. Learn CSS Pseudo-classes
3:21:15 - 8. Backgrounds, colors and transitions
3:46:11 - 9. How to use Developer Tools
4:11:09 - 10. Learn CSS Box Model
5:04:16 - 11. Mini Project 2: Improved Reddit Sidebar
5:36:02 - 12. Standard HTML5 page structure
6:08:46 - 13. How to use HTML forms
6:31:14 - 14. Hands-on CSS Selectors
7:08:12 - 15. Learn Intermediate CSS
8:32:44 - 16. Learn Flexbox
9:12:48 - Next Steps

Видео HTML & CSS Crash Course – Build Reddit Step-by-Step (2025) канала Dima L