New and (hopefully) Improved Tribute Page!

I didn’t quite know the exact terminology but I am quite confused about what is happening with these code snippets. What is exactly happening in both of those examples? I see that this occurs frequently inside your code. You call the mixin and pass a value for multiple elements.

Thanks! :smile:

You’re tribute page looks great! I’m not sure if this was prior to taking the course, if not, then you will definitely walk away stronger!

The amazing thing that I took from that course was setting up the overall font size to a percent, and then using rems throughout the entire page lol, makes adjusting to different screen sizes so much easier. The whole media query thing was definitely confusing at first, as he did a desktop first approach, so my brain was trying to work backwards with all the breakpoints.

You’ll for sure have a better understanding of animations as the course progress, I know I have for sure. The dreaded card flip lol, that was a pain in the butt to understand how that even worked, but hey, now that’s another tool that you can use.

I would say after you’re done with the course, you can go back to your tribute page and incorporate some neat transition effects or other concepts that you took out of the course, to practice on some new things, as your page looks pretty solid as it is now.

@Steffan153 I am not familiar with that. Can you please explain?

@paulgoogle This is the topic that will never end, it will go on and on forever.
Madalena.design will get some much feedback she will have the best website of all time.

1 Like

You know that you can animate an element in jQuery…

1 Like

Okay, this is going to be a very long one! I will be explaining to you about the conversion of px to em in due course, so sorry about that!

First of all, mixin can only be used in SASS (just stating in case it is not aware).

Mixin is like a reusable block of code. Some would say it is similar to a function. You create the definition using the keyword @mixin and give it a name. Then, add the CSS styles within the block.

To reuse those styles is to add the keyword @include followed by the name of the mixin within the declaration. Also, you can pass in an argument too (I will explain it in the example).

The only difference is what happens in the process:

  • Functions - you call the function and it returns the value.
  • Mixin - you reuse the mixin and applies reusable CSS styles

The purpose of mixin is to prevent writing the same CSS styles to different declarations over again and again. Especially if it is long = not very productive.

So, now you have seen some of the snippets in my code, using the two code snippets that were mentioned, I will show you the CSS way (the not so productive way) and the SASS way (which prevents repeating long codes), so that way you can see the difference.

Case One

In CSS

Well, I am sure you know the CSS syntax of media queries. In CSS, you would have to constantly either write the media queries for particular selectors OR you write one (say for tablet devices) and re-write all the needed selectors within.

In SASS
a) @mixin responsive($breakpoint) { 
    b) @if $breakpoint == small-phone { 
        // 28.125em = 450px 
        @media only screen and (max-width: 28.125em) { 
            c) @content; 
        } //450px 
    }
}

// other lines of codes

  &__social-media {
    display: inline-block;
    fill: url(#icons--social-media);
    font-size: 5rem;
    // more lines of code

    d) @include responsive(tsmall-phone) {
       font-size: 5.5rem;
    }

a) So I have created a mixin, responsive to apply media queries in certain conditions. It comes with one argument. What meant to be passed in are the descriptive names of breakpoints such as desktop, tablet (portrait size) and so on.

b) The media queries only get applied if the passed argument matches the keyword.

c) However, because it is unknown what CSS styles will be applied in the future, thankfully there is a special keyword @content that will take whatever the CSS styles are applied and placed it into the media query for that specific screen device

d) In the social-media selector, we want to change the font size to 5.5rem for small mobile phones. Instead of writing the long media query, you re-use the mixin, pass the argument, small-phone (so it matches the media query) and apply the font size changes

Case Two

Okay this is an easier to explain and this time I am going to make up names of classes just for demonstration purpose.

In CSS
Instead of having to write:
.paraForArticle {
    color: $col-brown-dark; 
    font-family: $font-lora; 
    font-size: 1.75rem; 
    font-weight: 400;

    @include responsive(tab-land) { 
        font-size: 1.9rem; 
    }
}


@media only screen and (max-width: 28.125em) { 
    font-size: 1.9rem;  
}

.textForSidebar {
    color: $col-brown-dark; 
    font-family: $font-lora; 
    font-size: 1.75rem; 
    font-weight: 400;

    @include responsive(tab-land) { 
        font-size: 1.9rem; 
    }
}


@media only screen and (max-width: 28.125em) { 
    font-size: 1.9rem;  
}

And so on…

In SASS

It is best to write is as:

@mixin body-text { 
    color: $col-brown-dark; 
    font-family: $font-lora; 
    font-size: 1.75rem; 
    font-weight: 400; 
    
    // you can even reuse the code within a mixin!
    @include responsive(tab-land) { font-size: 1.9rem; }
}

// Yes, it is technically repeating, but in the shortest way as possible 
.paraForArticle {
    @include body-text;
}

.textForSidebar {
    @include body-text;
}
1 Like

So I’m just starting this project and decided to jump into the forums to see what others have done. After viewing this new one of your’s I was worried your first would be really good and look a lot different than FCC’s example haha, I am glad it was not far from the script because I certainly don’t plan to do much different for my first one. Anyways, this second one, and even the first, both look great! It looks like an actual website to me and I double checked that you are not already a web developer because of how good it looked.

2 Likes

This is pure knowledge from a person who really knows what they’re doing! :wink:

Thanks so much! And so excited to implement some of the things I learned from you in my next project. :smile:

Not only can you make stunning projects, you can also inspire and strengthen others! :upside_down_face:

1 Like

I feel like i suck when i see a project that’s this good :sweat_smile:

1 Like

this is excellent hey…keep up the good work

1 Like

Thanks for sharing,apreciate this

1 Like

@Vladaliman A wise man said that you should not compare yourself to others.
It is better to compare yourself to yourself. Ask yourself, Did I learn something yesterday?, Am I making improvement?, Am I better than I was last month?, Do I have more skills than I had last year?
If the anwser is “Yes”, then you are doing just fine, you are on the right track. Everyone has to start from at the beginner level. And the more you practice the better you will become.

1 Like

@Steffan153 Yes, I guess Javascript cannot replace everything Jquery can do with ease.

1 Like

Aww, thank you so much! :blush:

I was about to say sadly not…but then I realised it is not so much a bad thing that I am not at this stage because this is a good opportunity to learn as much I can and be prepared rather than rushing it and get into the job with low-quality skills.

Therefore, this is how I have managed to produce my second tribute page is to take online courses, learn in and out how a particular certain code work and test them. :slight_smile:

However, just bear in mind (excuse me if this sounds like a bummer) but creating pretty webpages is NOT enough to get into web development. To become a (good) web developer is to have the ability in problem-solving - something I feel I am not at that level, yet I am willing to learn to be able to do it! :grin:

2 Likes

I am really surprised and do not actually know what to say this!

I mean, yeah I did expect more responses and feedback when I posted this post on my second tribute page (especially in comparison to my first tribute page)…but not that many! :open_mouth:

Still, I am definitely not complaining because it has been a positive experience from lovely feedback to getting great advice and learning something new and I like to think that this hasn’t been helpful just to myself, but to others who have been involved in this post too :blush:

2 Likes

To be honest, in a way I shall be thanking you because there is one key role in being a good web developer and that is talking technical and my biggest weakest point is explaining clearly (in anything), so I hope this has been a successful opportunity for both of us! :wink:

1 Like

Thank you! It is much appreciated :blush:

1 Like

I am glad to see this, I hope it also help out too? :wink:

1 Like

@brandon_wallace I am glad you wrote this because you explained it better than I would have and probably would have misses some of these points to explain.

You know, this would have been exactly me many years ago. Until I learn to accept it that no matter how good you are, there is always going to be someone better than you and whatever work you have created, is not going to please everyone.

So, don’t learn to be the best, but to be better :slight_smile:

I will tell you about my experience creating this tribute page. (This is my second tribute page by the way)

When I first create my first tribute page, I thought I did a good job as it matches the criteria and thought I create a post here to see feedback. I got an ‘it is okay’ feedback and did have constructive criticism (and definitely right-so).

As I was about to improve it, my mind was niggling at me to see other people’s pages via Codepen. So I did, and I have found AMAZING tribute pages.

Now, I could have been like myself many years ago by feeling down. But instead, I felt inspired by their works and aim to be as good as they are. So, I decided to scrap my first tribute and really put my heart into the second project. I start questioning what I need to do to reach my goal and how am I going to get there? Will I need more time to learn coding and design?? Then, so be it! The trick is to always ask yourself non-stop of questions :slight_smile:

I mean thank you so much that you think it is good, but even if I think this is good and I am happy with my page, I know I could do even better and I am determined to get better by learning new tricks over my journey! :smiley:

Don’t put yourself down because life is short and only live this life once! After all, if you really want it, then you CAN do it if you push yourself to :blush:

2 Likes

i feel like we may as well just make this thread a sticky, and judge all over tribute threads against this :yum:

but seriously, i’m glad its got the recognition it deserves, and its even better that your spending so much time replying to the folk that have all these queries, its good that all the fame hasn’t gone to your head, Dame Madalena :smiley:

1 Like