Getting advanced, Pt 1 Natours

I wish I can do web design all over again 🙂 web design two is a review but more things to learn that are difficult. I like the fact that I reviewed absolute and relative positioning and keyframes.

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

The way the files are setup is different from what I am used to doing last semester and it’ll take time to get used to. From what I have done, you have the main folder (natours) inside that folder is (v1), which is the first version we are working on and then you have the folder (CSS) for styling. You also have to make a folder for all images and your HTML file is not inside the CSS nor the images folder. For example, to add an image in your CSS file you would write it like this (../img/image.jpg) this shows that the CSS file is above the actual images folder. **I hope I explained it correctly**

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

A new thing that I learned that I never got the chance to do last semester or play around with it is the clip-path. Clip-path is when you clip inside a path and the remaining part is clipped out, and you can make an element into a circle, ellipse, polygon, or inset. These are examples of using the clip-path

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

Another thing that I learned is animation-fill-mode, which shows the animation applied to target before and after its task is over (basically before 0% of the keyframes).

animation-name: moveInBottom .5s ease-out .75s
animation-fill-mode: backwards

These are the exercises for this week:

natours/v1/img/all-tutorial-images

natours/v1/css/style.css

natours/v1/index.html

This is the problem set:

comment-box/index.html

comment-box/img/hero.jpg

comment-box/css/style.css

Leave a comment

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

css.php