Web Programming with Python and JavaScript
In these project I tried to create replica's of CS50 course pages on EdX.
- project0 ( main directory )
- SCSS ( contains SCSS files )
- CSS ( contains CSS files)
- master.css ( CSS file containing base style and imported by other styles using SASS )
- home.css ( CSS file containing style for home page )
- course.css ( CSS file containing style for course pages )
- mentor.css ( CSS file containing style for mentor pages )
- courses
- ( contains HTML files of each course page )
- mentors
- ( contains HTML files of each mentor page )
- imgs
- ( contains image files required )
- index.html ( main HTML file home page )
- connect.html ( connect with cs50 HTML file )
- README.md
- project0/index.html contains link to
- Courses ( project0/courses/ *.html ) pages
- Connect ( project0.connect.html )
- project0/courses/*.html contains link to
- Home ( project0/index.html )
- Mentors ( project0/mentors/*.html )
- Connect ( project0.connect.html )
- project0/mentors/*.html contains link to
- Courses ( project0/courses/ *.html )
- Home_ ( project0/index.html )
- Connect ( project0.connect.html )
- project0/connect.html contains link to
- Home ( project0/index.html )
I mostly used bootstrap classes and components for this project for style and layout structure for responsive pages.
List of some Bootstrap features used in project:-
- Bootstrap Cards
- Bootstrap Grid system ( breakpoints-row, col-* classes )
- Bootstrap Tables
- Bootstrap Collapse content button
List of some SASS features used in project:-
- SASS Variables ( only 2 for colors )
- SASS Nesting
- SASS Inheritance
- SASS Modules ( master.css )
List of some Media Query applications in project:-
- In master.css for changing font size for mobile devices.
- In course.css for changing order of rendering 2 main columns of page.
- In home.css for making iframe responsive.