MENU

Fun & Interesting

Learn HTML & CSS by Building Reddit (Step-by-Step)

Dima L 1,150 1 week ago
Video Not Working? Fix It Now

🎓 *Get a certificate* with premium learning experience here: 👨‍💻 *Full Premium Course – Only $14.99 for YouTube Viewers (Limited-Time Offer)* https://www.udemy.com/course/html-css-from-scratch-build-your-first-web-pages-today/?couponCode=C0A98FB876D39D8F6552 👋 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.* 🏗️ 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 Contacts 📧 My email - [email protected] 👨‍💻 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

Comment