Skip to content

Latest commit

 

History

History
67 lines (53 loc) · 2.3 KB

README.md

File metadata and controls

67 lines (53 loc) · 2.3 KB

Project 0

Web Programming with Python and JavaScript

In these project I tried to create replica's of CS50 course pages on EdX.

Project structure

  • 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

Relationships In Project

Internal links

  • 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 )

Bootstrap

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:-

  1. Bootstrap Cards
  2. Bootstrap Grid system ( breakpoints-row, col-* classes )
  3. Bootstrap Tables
  4. Bootstrap Collapse content button

SASS

List of some SASS features used in project:-

  1. SASS Variables ( only 2 for colors )
  2. SASS Nesting
  3. SASS Inheritance
  4. SASS Modules ( master.css )

Media Query

List of some Media Query applications in project:-

  1. In master.css for changing font size for mobile devices.
  2. In course.css for changing order of rendering 2 main columns of page.
  3. In home.css for making iframe responsive.