SASS work flow

• get into JMJ cards project
• start up “watch”
• create a new section in the index.html file  <section class=”courses page__content”>
• give it an overall class for referencing in javascript (select by class = courses, families, enrollments, etc
  • this gives the ability to check which page it is and attach appropriate event listeners, etc
• create a new sass file for the section _courses.scss, _families.scss, etc
• add the file into main (@import ‘families’; @import ‘courses’; ,etc
• edit new scss file
• incorporate new scss stuff into the html
• use “go live” on the lower left to start up the page
• make changes and observe what is happening on the golive page
• once good , run build
• copy the style.css to the JMJ Dev server project
• convert the html to pug
• add the pug to jmj Dev Server

.courses {
  padding: 2rem 5rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7rem;

  &__title{
    text-align: center;
  }

  .course_card{
    &__grades, &__semesters{
      display: flex;
      justify-content: left;
    }
  }

}

.year-selector {
  display: flex;
  justify-content: center;
}

 <section class="course page__content">
      <h1 class="courses__title">My Course</h1>
      <div class="year-selector">
        <select name="year-selector" id="yearSelector">
          <option value="2021-2022">2021-2022</option>
          <option value="2020-2021">2020-2021</option>
          <option value="2019-2020">2019-2020</option>
          <option value="2018-2019">2018-2019</option>
        </select>
      </div>