Natours Project

Setup and First Steps

Blog Questions

  • Describe how the files are organized for the Natours project and how they are linked together.
    Within the Natours the file we will have a folder for each version. Within each version folder, the corresponding files will be inside. This allows for you to easily create new versions of the files without having to change the links in each.
  • Describe two interesting new pieces of CSS or CSS techniques you learned in this first set of tutorials. Include a code sample with Enlighter
.header {
    background-image: linear-gradient(
        to right,
    background-size: cover;
    background-position: top;
    position: relative;
    clip-path: polygon(0 0,100% 0, 100% 75vh, 0 100% );

I found the positioning of the header to be interesting because this would have been very helpful to have understood while I was creating my first final project. Also the gradient is a nice effect to make images left is distracting.

    transform: translateY(3px);
    box-shadow: 0 10px 20px rgba(0,0,0,.2) ;
    transform: translateY(-1px);
    box-shadow: 0 5px 10x rgba(0,0,0,.2) ;

I think overlaying mutiple buttons then animating each to get the desired effect is pretty smart.

How CSS Works

Blogging 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.
Font-Family, Font-size, Line-height, and color are all properties that can be inherited from a parent element. These elements are all easily inherited because it would be a pain in the bum to set the font-size, line-height etc for every element of your webpage.

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.

  • display: inline-block creates side by side boxes that collapse and wrap based on the available space in an element. display: inline allows you to set a width and height on the element. Also, with display: inline, top and bottom margins & paddings are can be used. display: block, a line break happens after the element, so a block element doesn’t sit next to other elements.

Introduction to Sass and NPM

Blogging Questions

Describe how you are using node.js for this project. What is node.js? What is the node package manager (npm)? What is the particular package you’re using for this project? How did you install it and note that it going to be required for your project moving forward? How did you setup the Sass compiler to run?

Node.js allows for us to write Sassy CSS. Which is being able to nest selectors within each other to create DRY code. The package manager helps the computer to understand and compile the information given so that the SCSS can create a CSS style sheet for the browser to read. For this project, we are using the node-sass package. I installed Node.js onto my computer then selected for the npm init the asked for the package.json and finally npm install node-sass –save-dev. For the compiler to run automatically I set the script to compile sass to -w for watching.

Sass nesting / 7-1 architecture grid system

Blogging Questions

There is a ton of CSS architecture covered in these three videos and how to use Sass to implement your 7-1 architecture. But hidden in there are a few bits of interesting CSS to mull:

  • :not() pseudo selector
  • calc() function
  • [] attribute selector with the ^ operator used.
  • ::after pseudo selector to write a clearfix hack

Pick two of these and described how they were used in the tutorials. Give an example piece of code using Enlighter to support your description.

the :not() pseudo-selector tells the program to apply all the properties listed to the element but not to apply to what is placed in the parenthesis.

// selects everything expect last child
    &:not(:last-child) {
        margin-bottom: $gutter-vertical;
@mixin clearfix {
    &::after {
        content: "";
        display: table;
        clear: both;

clearfix is used to float based layouts. The ::after pseudo-element can be used to insert some content after the content of an element.

Natours about section

Blog questions

Describe how the :not pseudo selector works. Give an example in an Enlighter code snippet to support your description.

the :not() pseudo-selector tells the program to apply all the properties listed to the element but not to apply to what is placed in the parenthesis.

// selects everything expect last child
    &:not(:last-child) {
        margin-bottom: $gutter-vertical;

Natours Features and Tours

Blogging Question

To accomplish the angled look of the top and bottom of the features section, the tutorial makes use of CSS selectors to skew the parent then de-skew the direct children. Why direct children vs. all children? How do both selectors work? Describe how this works using a SCSS code snippet to illustrate.

The selector skews the parent element and the direct children because it’s unlikely a person would like their entire project skewed. The selector skews all the children in the element. If this isn’t the effect you desire then you have to go back and select all the children of the element and unskew them.

    padding: 20rem 0;
    background-image: linear-gradient(to right bottom,
    rgba($color-primary-light, 0.8),
    rgba($color-primary-dark, 0.8)),
    background-size: cover;
    margin-top: -10rem;

    transform: skewY(-7deg);

    & > * {
        transform: skewY(7deg); 


Natours Stories

Natours booking

Footer Navigation pop-up


Leave a comment

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