[WEEK #2] – 03 How CSS Works + Problem Sets + Blog Question

Hey all. This week has been very informative. The videos were great refreshers on basic CSS material from last semester. The main issues I had was picking a BEM website.


Problem Set – BEM Breakdown

For this problem set, I chose to use UDEMY. I will show the overall layout below.

For the portion I chose a specific card from a set of cards. The screenshot (not good quality) above shows the different divs for each card. Basically, there is a div with the class course-discovery-unit–course-discovery-unit-container–3MFr9. This section includes the card section and header that says “Students are viewing”. This is then followed by carousel-container. The container has a div called slick-slider. Its called slick-slider because there are multiple cards that can be shown by clicking the arrow and it would show other options (which slides the carousel to the right). Inside of the slick-slider div is a slick-list div. This div holds all the different types of cards. This div is then followed by slick-track (not that sure what this one does). The slick-slide is an actual card. These cards have the class “slick-active”, because the carousel only shows 5 cards at a time, until the user scrolls.

<div class = "carousel-container carousel-with-shadowed-items">

    <div class="slick-slider slick-initalied">
        <div class="slick-list">
            <div class="slick-track">
                <div data-index="0" class="slick-slide slick-active slick-current"></div>
                <div data-index="1" class="slick-slide slick-active"></div>
                <div data-index="2" class="slick-slide slick-active"></div>
                <div data-index="3" class="slick-slide slick-active"></div>
                <div data-index="4" class="slick-slide slick-active"></div>


I will now show a specific card layout below.

<div data-index="0" class="slick-slide slick-active slick-current">
    <div class="course-discovery-unit--card-margin">
        <a class="merchandising-course-card--mask"></a>

        <div class="merchandising-course-card--header">
            <img course="merchandising-course-card--course-image">

        <div class="merchandising-course-card--body">
            <div class="merchandising-course-card--course-title">
                <span class="merchandising-course-card--instructor-titles"></span>
            <div class="fx-jsb">
                <span class="star-rating--details__rating">
                    <span class="star-rating--star-container"></span>
                    <span class="star-rating-review__numbers-container"></span>
            <div class="merchandising-course-card--price-wrapper"></div>


Blog Question

There are certain CSS properties applied to a parent element that are “inherited” by the child elements. Name four properties that are inherited and four properties that are not inherited. Describe why you believe each is inherited or not.

  • 4 Properties that are inherited
  • font-family;
  • font-size;
  • font-weight;
  • color;
  • line-height;
  • 4 Properties that are not inherited
  • margin;
  • width;
  • border-box;
  • padding;

Describe the differences between inline, block, and inline-block. Why would you want to use the inline-block value? Hint you have an example use in your Natours project.

Inline elements do not start on a new line. Inline elements are on the same line as the content besides them. They share the width of other elements.

Inline-block elements are similar to inline elements, but they have other elements such as padding and margin.

Block elements uss the entire width that it can have.

Leave a comment

Your email address will not be published. Required fields are marked *