Skip to content

It's collections of statics web pages consisting of information regarding CS50 courses made for practicing Bootstrap components, grid system,

Notifications You must be signed in to change notification settings

J-Raghav/CS50-courses

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

It's collections of statics web pages consisting of information regarding CS50 courses made for practicing Bootstrap components, grid system,

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published