[WEEK #1] – 02 Natours Project – Setup and First Steps + Problem Set + Blogging Question

HeLLo everyone. This week was not what I expected. I thought it would be a lot easier but it was sort of a wake up call. I haven’t done much HTML/CSS coding and it was not on top of my mind on the break.

The tutorials helped but I felt the guy repeated some obvious stuff that I already knew. Some of the times it was helpful though because it gave me a refresher of what it meant. I gave everything my best shot.


Problem Set

Blog Questions

Describe how the files are organized for the Natours project and how they are linked together.

I don’t quite get this question(I don’t know if this is a simple question, or a complicated question). I believe the Natours project has a starter HTML file in the root folder named “index.html”, a CSS folder that has the stylesheet, and then an image folder that has all the images used in the project. These files are linked in the HTML file. The CSS stylesheets are linked in the header using the link tag. The images are linked using img tags inside of the body tags..

    <link rel="stylesheet" href="css/style.css">
    <img src="../starter/img/logo-white.png" alt="Logo" class="logo">

Describe two interesting new pieces of CSS or CSS techniques you learned in this first set of tutorials. Include a code sample with Enlighter.

There is a couple of new pieces of CSS / Techniques that I learned in these tutorials. Some are

The Clip Path element. Before these tutorials, I knew about the website that makes clip paths but I didn’t know what any of the values meant. In the tutorials, the video instructor explained how to correctly make a clip path

clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);

Before this class I would create linear-gradients in a separate element from the background-image. I was not aware that you can combine all those elements into one line. I also didn’t know that you can add all transition effects by writing “all”. These will be useful for me in the future.

clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
transition: all .2s;

The last thing that I learned in this tutorial, that was cool to me was the transition affect of the text moving in from the right. I didn’t fully understand it before these tutorials but the instructor explained it really well

.heading-primary-sub {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 17.4px;

    animation: moveInRight 1s ease-out;

@keyframes moveInLeft {

    0% {
        opacity: 0;
        transform: translateX(-100px);

    80% {
        transform: translateX(10px);

    100% {
        opacity: 1;
        transform: translateX(0);

Don’t copy my work Qadeer

Leave a comment

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