[FINAL] – Trillo Project: Videos 82 – 88 (Description, User Reviews, and Media Queries)


Hey guys. I am finally finished the Trillo Project! I felt these videos were very informative and was way better than trying to make a website on my own. The only part I wish Jonas went over was after video 88. What do we do with the two compiled CSS files? style.comp.css and style.prefix.css? Do we attach them into the index.html file? I am not sure. Also I wish he used the 7-1 architecture while doing this project. I also had one problem on video 88. Basically the prefix:css script in the package.json was the issue. While running build:css script on a LINUX operating system, you will not see any issues, but if you are using windows, there will be error codes such as…

The simple fix is to replace ‘last 10 versions’ with \”last 10 versions\” inside the package.json file. This a simple fix which took me about 15 minutes to figure out with the help of Google and Github.

The work below will have videos 82-88 included.

This is the original.

This is 1200px.

This is 1100px.

This is 900px.

This is 600px

This is 500px.

Its about dam time I finished this project.

Overall, this project was great. Its a shame that the semester was cut short because I was enjoying using flexbox and SASS. I will be waiting for the blog questions, but other than that….


design1 – Page Layout and Responsive Design with Gridlex

We’re almost done with our card system problem set! All five card types have been created and now it’s time to work on our page layout. We’re going to use a CSS library called Gridlex to help us out. CSS libraries are pre-built CSS files that create a set of tools to help with design. This particular library gives a ‘grid’ system built using flexbox.

This system is going to allow us to divide our page into grids which then inside can be divided into columns. Gridlex uses a common 12 column standard, allowing for a lot of layout flexibility. Given that the CSS is already written, we’ll learn to implement it by mostly editing our HTML pages.

We’ll also use Gridlex as well as some of our own CSS to create some responsive design. This means to have your site’s page layout respond to the size and shape of the browser window. We’ll use ‘media queries’ to accomplish this with the @media (max-width: ) syntax to adjust all of our cards as well as the columns.

Tutorial Videos

For the Blog

Describe how nesting a grid works. What makes it possible to have a column also become a grid? Describe this in the context of flex containers and flex items.

Problem sets

Comment box

BEM Breakdown
The Huffington Post

  • A description of the block, element, modifier naming pattern. You do not have to list every single class in your example, just some representative ones. From the above example:
    • Zone is the block for this particular article preview on the Huffington Post homepage.
    • Within the Zone block there is One __title and several __cards each containing a story.
    • Each card has an card__image__linkcard__text.
<div class="zone__title"><h2 class="zone__title__text">LATEST NEWS</h2></div>
<div class="zone__content">
<div class="card"><a class="card__image__link" aria-label="Comedic Legend And ‘Seinfeld’ Star Jerry Stiller Dies" aria-hidden="true" tabindex="-1" href="https://www.huffpost.com/entry/jerry-stiller-dead-seinfeld-star_n_5eb9120ec5b6cf7f39bdaed2" data-ylk="g:f8b2806f-48bb-3954-9fae-a84575484d7e;itc:0;pkgt:lay-3|th-default;cpos:1;pos:1;elm:img" data-rapid_p="1" data-v9y="1"><div class="card__image" role="presentation"><div class="card__image__src img-sized img-sized--responsive"><div class="img-sized__placeholder"><div style="padding-top:56.25%"></div></div><picture><source type="image/webp" srcset="https://img.huffingtonpost.com/asset/5eb9158c24000013088ea97e.png?ops=224_126&format=webp"><img class="img-sized__img landscape" loading="lazy" alt="" width="224" height="126" src="https://img.huffingtonpost.com/asset/5eb9158c24000013088ea97e.png?ops=224_126"></picture></div></div></a><div class="card__text"><div class="card__text__top"><a href="https://www.huffpost.com/entertainment/entertainment" class="card__label__link" data-rapid_p="2" data-v9y="1"><div class="card__label card__label--hide-on-phone card__label--top card__label--entertainment">Entertainment</div></a></div><div class="card__headlines"><a class="card__headline card__headline--long" href="https://www.huffpost.com/entry/jerry-stiller-dead-seinfeld-star_n_5eb9120ec5b6cf7f39bdaed2" data-ylk="g:f8b2806f-48bb-3954-9fae-a84575484d7e;itc:0;pkgt:lay-3|th-default;cpos:1;pos:2;elm:hdln" data-rapid_p="3" data-v9y="1"><h3 class="card__headline__text">Comedic Legend And ‘Seinfeld’ Star Jerry Stiller Dies</h3></a></div></div></div>

BEM/SCSS

BEM/SCSS 7-1 Architecture

Layout and typography template

  • Google font pairing for my headings: Caladea and body font: Roboto
  • My primary color is a deep shade of gold.
  • color-primary:#ad974f;
  • color-primary-light:#c6b682;
  • color-primary-dark:#8e793e;

HTML template generic page and the first component

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 {
    height:95vh;
    background-image: linear-gradient(
        to right,
        #7ed56f2a,#28b485),url(../img/hero.jpg);
    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.

.btn:hover{
    transform: translateY(3px);
    box-shadow: 0 10px 20px rgba(0,0,0,.2) ;
}
.btn:active{
    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.

.section-features{
    padding: 20rem 0;
    background-image: linear-gradient(to right bottom,
    rgba($color-primary-light, 0.8),
    rgba($color-primary-dark, 0.8)),
    url(../img/nat-4.jpg);
    background-size: cover;
    margin-top: -10rem;

    transform: skewY(-7deg);

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

}

Natours Stories

Natours booking

Footer Navigation pop-up

Natours/v5-10

[FINAL] – Trillo Project: Videos 78–81 (Navigation and Overview)


Hola. This is just another set of work for the Trillo project. I believe that the navigation and the overview should have been different versions but other than that everything is fine.

The work below will have videos 78-81 included.


[FINAL] – Trillo Project: Videos 75-77 (Building the Header)


Hi. This is just another set of work. Everything is going smoothly.

The work below will have videos 75-77 included.


design1 – Last three cards

This week you will complete the CSS for the last three card designs in our project. There will a second ‘feature’ card as well as two additional ‘main’ cards. To help with the project and give your design some visual variety, you can use the card HTML and imgs I’ve uploaded. Since all the HTML right now is the same for each card, only class names that change, I’m not going to spend time writing the HTML. The process for downloading the zip and working the this HTML and the imgs is covered in the first video.

Videos to be completed:

For the Blog:

How do you get to choose whether or not each part of the card needs to have additional CSS written? For example the card-main-primary and card-feature have additional CSS to adjust card-slug, while the other three do not. Give an example from your CSS in a code block and describe how this works.

[FINAL] – Trillo Project: Videos 67-71 (Flexbox Review) and Videos 72-74(Project Layout)


Hello everyone. For the Final Trillo Project, I plan to wait for the professor to post the split up versions. I don’t want to do it myself and have different versions from the professor. I would much rather do it this way.

For the first set of videos, CodePen was used. All the CodePen work from videos 67-71 can be found here.

The work below will have videos 72-74 included.


css.php