New and (hopefully) Improved Tribute Page!

Wow, this is honestly amazing! Iā€™ve only been learning html and css for the last month now and seeing your new tribute page has really inspired me!! I love the design and the responsiveness too. Iā€™m still trying to get my head around responsiveness but Iā€™m enjoying the learning experience :slight_smile:

Thank you for sharing!

1 Like

Beautifully done! Iā€™d love to give you some helpful feedback on what to improve, but I canā€™t think of anything. How long did this take you to do?

1 Like

Awww, that is really kind of you, thank you! I am glad to hear that it has given you inspiration and hopefully it will help you as well?? :slight_smile:

I know the feeling, I mean some topics in responsiveness were okay to learn, the one that did take me a bit to grasp was CSS grid, but this article actually helped me out so much, I will link it below and I hope this will help you. I also wish you all the best! :slight_smile:

CSS Grid Article

1 Like

Awww, thank you! I appreciated that! :blush:

:thinking: ooh I donā€™t know exactly, but because this is my second tribute page project (the first one was just plain basic and nothing special), luckily with two tribute projects upload showing its date, I would calculateā€¦maybe 3 weeks, the maximum?

1 Like

Thanks for all the help! :smile:

One more thingā€¦ are all the animations created using JQuery? If so, I have heard that it is now an outdated tool. I would appreciate it if someone could get me up to speed on that front. (Heard people say to use vanilla javascript instead, or maybe something else) :thinking:

Do you have any recommendations to some free tutorials/courses in which I can learn some of the topics you listed. Lastly, do you think it is wise splitting the scss into seperate files like _header or _main or _mixins or _variables? I understand that since you used a codepen it had to be in the same file.

Iā€™ll have you know that I just maybe, maybe will be using your project as an aspiration of mine. Hopefully, one day, I can write elegant and responsive and efficient code that results in a fluid and appealing design! :wink:

Anyways, great job once again, and Iā€™ll be looking for to perhaps seeing more projects from you someday! Good day/night! :smile:

PS: Lol, I have edited this so many times because I keep having stuff to say/ask. :smile: But since you have helped me so much, I think I can return the favor. If you put the cursor in a specific region around the social icons, it starts sputtering (it looks like it is vibrating). If this is not intentional, I think just making the parent container (the one with the :hover) larger should fix it. Although, this is small hopefully it helps in some way! :wink:

2 Likes

Oh, go check out all the courses on academind.com. Learn almost anything you want. :smiley:
Also see my post here

Yep.

Yep.

Certainly.

use it as much as possible! :DD

2 Likes

With animations, they can also be simply created using CSS itself using transitions or the animations keyframe, no JavaScript needed. Only time I find myself using JS for animations / transitions, is to remove or add a certain class list when an item is clicked.

If you find yourself dealing with super complicated animations that deal with timing, you can use a animation library for it, but then again, you can set delays and timing functions within CSS itself for it. CSS has come a long ways, and reduced some of the need for JS for simple animations / transitions.

2 Likes

Ah thank you so much for your response and advice! Iā€™m looking forward to seeing more projects of yours!! :grin:

Thank you for sharing the article, thatā€™s really helpful! Itā€™s definitely CSS Grid and media queries thatā€™s driving me a bit nuts at the moment haha I created my first ā€œproperā€ web page - https://codepen.io/toowee/full/NWKdRVo - Iā€™m still working on making it a responsive design but itā€™d be wonderful to have your initial thoughts on what you think of it, whenever of course!

Thank you again :slight_smile:

2 Likes

You are very much welcome! :blush:

Not all animations are created using Jquery, in fact, only the animation in book collection are created using Jquery and that is because it cannot be done with CSS animation, which all the other animations are created with.

That is correct. Jquery is now an outdated tool, I was not aware of this when creating this project, unfortunately I found out after the project was done, however I am grateful that @Steffan153 pointed it out, you should see the posts above of all the discussion about Jquery from @Steffan153 and @brandon_wallace, they have been really helpful! So, yes Vanilla JS would be a good choiceā€¦only I havenā€™t had to learn it yet :slightly_smiling_face:

Hmm, courses I am not so sure for smaller topics like how CSS works under the hood, or BEM as already mentioned, but I gathered a list of all the free articles of all the topics covered in that Udemy course for my friend earlier this year and I am happy to pass the list on to you if you like (bear in mind, it is a long list!) Here are the resources that I have copied and pasted:

If you wanted a free course, I found thiscourse (also on Udemy), it is free, however, I cannot guarantee if it is a good course or not as I never enrolled into this course. :stuck_out_tongue:

Also, Udacity is a good platform to learn web development and I can see they do responsive design course for free. Check it out! :slight_smile:

It is a better structure of CSS architecture, because when you are currently working on a big project and you need to keep going to a particular CSS selector, for example, a <h1> element with a class called ā€œheading__primaryā€, you would not have to going all the way down (or up) in a one big CSS file to search for it, instead you would go to a file _typography.scss because you (and even other developers would have to work on it in the future) know it will be in that file if you want to see or alter the styling of that element.

Bear in mind that SASS is a CSS pre-processor. Before the website goes live, you compile all the SASS files into one CSS file and that CSS file is what will be used in the live production. It is a hassle for Codepen because you have to copy and paste from all the SCSS files, but if it helps me to be a better web developer then so be it! :smiley:

That is really odd! I canā€™t see it from my end, but may I ask when it vibrates, does it go faster or slow? Also, from what device do you see it on? Thank you for pointing it out as I will check it out later in the evening!

Aww, again thank you so much for your kind words! If you really want something and you work your backside off, you WILL get it even if you go through high and low :blush: That is how I felt when I saw other peopleā€™s tribute page after finishing my first tribute page (which was nothing special about) :grimacing:

3 Likes

Justā€¦Bingo! If anything, I prefer CSS animation over JS as it is so simple and clear. It is getting even more better as time goes by as there is more control.

As you mentioned, JS animation is only used when it comes to having to remove or add an element (via its classes), if CSS have this ability, then I would not even think of using JS unless it has more benefits than CSS. Hopefully, this day will come when CSS jhave more control :slight_smile:

2 Likes

Well, theyā€™re not free but those so cheap courses on academind.comā€¦

2 Likes

Well, I hope it does help! :blush: may I ask what is it exactly on media queries that you are struggling on? Because I may be able to help out to explain or find a resource to pass onto you (I am not joking I keep a loooong list of helpful resources in my Evernote haha). in the above post to another fellow member, I mentioned this free course about responsive design on Udacity. I did learn responsive design through Udacity, which was super helpful, although not sure if it is this exact course. Still, hopefully, this is as good! :slight_smile:

So, I had a peep at your project and yes, I donā€™t likeā€¦but that is because I SUPER LOVE IT! :heart: :heart: :heart:

Okay, there is some room for improvements, not majorly as you are almost there :slight_smile:

First, I will tell you what I do love about your page

Your color scheme is just perfect. It works well with the Parakeets because of their appearance, but also their personality, which the color scheme is cool, but it promotes friendliness.

I love the parakeet logo, it is just simply cute and works well with the branding of the project

The typography choice works well too, especially the font of the headings, it works as it symbolises the culture of London (for its history), yet the san-serif font does work in harmony because in some way London has its modern elements too. Also, the serif headings got that friendly vibe too.

Okay, so could be improved? (I will bear in mind this is a work in progress), it is mostly the use of spacing.

As cute the Parakeet logo is, I would make it slightly smaller to give room in height-wise of the nav-bar. But also, I would give some room between the logo and the heading text ā€˜LONDON PARAKEETSā€™

Also, it is best to add padding between the heading page and the text:

Weā€™re the UKā€™s most abundant naturalised parrot. We became established in the wild in the 1970s after a few of us captive birds escaped or were released.

To understand what I mean, see my tribute page where I added padding between the heading page and the title:

The life of John Steinbeck

Also, you added the space between the heading ā€˜About usā€™ and its body text? that works well and that also should be applied the same the ā€˜Find usā€™ heading and its body text too :slight_smile:

But, honestly, this is fantastic work and excuse me for being nosy but do you have any design background??? Because I think you also have the potential to become a web designer as well as a web developer :slight_smile:

I hope this helps and I didnā€™t go too far on my thoughts! haha

2 Likes

Might have a quick peep to see what they have :stuck_out_tongue:

Cheers for this! :+1:

2 Likes

also lots of free videos

1 Like

It happens pretty quickly but keep in mind it is like a 2x2 pixel area. It rarely ever occurs and only happens if I put my cursor on the edges of the icon.

I noticed throughout your code you included @mixins which converted px to ems. Which resource could further explain that for me? I would want to start experimenting with that in my web development.

Thanks for everything! I hope to collaborate further on future projects or see more AMAZING work from you! :smile:

2 Likes

Iā€™m glad to see youā€™re taking Jonas course as well! You will definitely walk away more confidently with more advanced CSS and SCSS after you finish :grinning:

And yep, I have yet to come across where I couldnā€™t fulfill the need of animations with css. As a tip though, if you are incorporating in transitions, I would never animate over any other property, other than opacity and transform, as if you were to do so on another property such as margin.

The whole animation will be choppy, as your computer takes more to try and optimize those properties, whereas if you just animate over transforms, youā€™ll get the same effect, but they are more efficient as the elements wonā€™t need to be re-rendered. I learned this the hard way, figured I would throw this tip in here for anyone looking to take advantage over css transitions/animations.

2 Likes

Oh Evernote is great :joy:! this might sound silly but whilst building my landing page, I was getting confused as to how many media queries I actually needed to make the page responsive on all devices and I donā€™t quite understand the widths of different breakpoints. I think Iā€™m still a media queries noob haha! The free Udacity course looks good! Iā€™ll have a look into this

2 Likes

I just experimented it myself and saw what you meant! That is so crazy, it felt like it was pounding my head in! :stuck_out_tongue: Oh god, I will try and fix this so thank you very much for pointing this out! :blush:

Not exactly sure by what you mean. Do you mean with the media query in the mixins like this:

// Media Queries
// 1em = 16px

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

or as in general in any mixins, for example like this one:

@mixin body-text {
  color: $col-brown-dark;
  font-family: $font-lora;
  font-size: 1.75rem;
  font-weight: 400;

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

Awww wow Iā€™m actually really stunned at your great detailed feedback! Thank you so much for even taking the time to look at it and for your super kind words and suggestions :sweat_smile: Iā€™m genuinely surprised because I feel so critical of it haha

I definitely agree - I do feel itā€™s almost there but was getting a bit stuck on how to improve it which is why I came on here :slightly_smiling_face:

I shall make the improvements you suggested (smaller logo, increase spacing between the logo and heading ā€˜LONDON PARAKEETSā€™, add padding between heading page and the below text, additional space under 'Find Us whilst also improving the responsiveness of the page. I opened the page on a desktop for the first time at work today and realised there is definitely alot of unnecessary space around the content beneath the hero image, and the about section could be more centered. I didnā€™t realise this on my laptop.

I donā€™t actually have a background in design (I donā€™t know if having Art & Photography GCSEs count haha) but I would say Iā€™m the ā€˜creativeā€™ person at work and home. I recently created my website on WordPress for a future side biz idea which is unrelated to this, but itā€™s what triggered me to pursue a career change into web design or web developer because I had so much fun creating this (www.virtualtoowee.com).

Youā€™ve been super helpful and your kind, encouraging words have honestly made my day! :smile:

1 Like

It is a fantastic course! I hope you are enjoying it (or enjoyed it if you have finished it) I have now finished it and you are right I feel happier that I have learned so much and feel safe to say I have decent skills in advanced CSS and SCSS (by the way I LOVE SCSS as well as BEM, it is just amazing) :slight_smile:

oh wow, I mean I was aware that not all properties canā€™t be used in transitions (such as padding) and because I have seen the use of transform (specifically translate) so much, I (wrongly) assume margins does not work in transitions.

However, this is very useful to know so thank you for this advice! I will take this on board! :slight_smile: