https://github.com/j-raghav/cs50-courses

It's collections of statics web pages consisting of information regarding CS50 courses made for practicing Bootstrap components, grid system,
https://github.com/j-raghav/cs50-courses

bootstrap4 collapse-component css grid-layout html reponsive-web-design sass static-site

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/j-raghav/cs50-courses
• Owner: J-Raghav
• Created: 2020-06-04T08:02:23.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-06-06T16:15:14.000Z (almost 5 years ago)
• Last Synced: 2025-01-09T20:42:24.903Z (4 months ago)
• Topics: bootstrap4, collapse-component, css, grid-layout, html, reponsive-web-design, sass, static-site
• Language: HTML
• Size: 916 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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.