Learning Full stack development through CS50’s Web Programming with Python and Javascript.
It is fast-paced, has excellent theory and offers well thought out hands-on projects. It dives into the design and implementation of web apps with Python, JavaScript, and SQL using frameworks like Flask, Django, and Bootstrap. The course touches on topics like Responsive designing, testing, scalability and security, which are very relevant in the real world.
Topics covered
- Lectures 0-1
- The basics of front-end languages - HTML, CSS (along with Git)
- An introduction to useful libraries like Bootstrap, Sass.
- Focus on responsive design.
- Lecture 2
- The basics of a server-side language - Flask.
- An introduction to jinja templates.
- Learn how to integrate static pages along with a Flask server
- Lecture 3-4:
- Basics of SQL and Object-Oriented Programming
- Using a database in your server with/without ORM
- Using SQLAlchemy and Flask-SQLAlchemy for smoother integration.
- Lecture 5-6:
- Introduction to JavaScript
- Building single-page apps
- Useful JS libraries like handlebars.js (templating), d3.js (SVGs)
- Lecture 7:
- Basics of Django
- Lecture 8-9:
- Basics of testing & CI/CD
- This week is handy as it introduces us to basic concepts in testing like unit testing, Continuous Integration and Continuous Deployment.
- Introduction to helpful testing frameworks like Django’s test.py, Selenium
- Introduction to Travis, Docker
- Lecture 10-11:
- How to handle more traffic on your website
- How to improve your website’s security and how to safeguard against common attacks
(DDoS, cross-site scripting, SQL injection, CSRF, etc.)
Projects
The course had exciting and useful projects that taught me a lot. During the course, I also did small self-projects to understand particular topics better. I have hosted these projects as static single page websites on Github.
Static pages
- nav(HTML,CSS) - A basic navigation bar with clickable buttons
- box(HTML,CSS) - Learning to use the CSS grid module
- members(HTML,CSS) - A generic members page for any organization
- members-dynamic(HTML,CSS,JS(Handlebars)) - Template for a generic members page for any organization with the ability to add/delete members
- Scroller(HTML,CSS(animation),JS) - An infinite list of posts that generates new posts as soon as you reach the bottom of the page
- Clock(HTML(SVG),CSS,JS) - An analog clock that shows your system time
- Paint(HTML(SVG),CSS,JS(Handlebars, D3)) - A paint like application where you can draw on the screen with your mouse
Project - Notes
An independant project. Check it out here
Project 1 - Books
I have a separate post for this project. Check out Project 1 - Books
Project 2 - Flack
Check out Project 2 - Flack
Project 3 - Pizza
Check out Project 2 - Pizza