Have you ever noticed a website look different on your laptop and on your phone? Different devices have different widths or viewports; which means that our designs might not look cool on every device. (Check out the welcome page of this website on your phones to see what I mean!)
But we are designers and we are smart- we can make our designs adjustable to different devices, also called 'responsive design'.
How can you make your design responsive?
My #1 tip is to always use a flex display. Flex boxes are usually already responsive and do the work for you.
Another general tip is to use the dev tools from Chrome. Right click and use the inspect option. You can then change the width of the viewport and see how your webpage looks on different devices.
The advanced trick is to make completely different designs for different viewports using @media query.

Here's your challenge:

Show items in a row on wider screens and in a column on smaller screens.

You are learning to make all these amazing websites, but what would be more amazing is if you could show them to your friends and family from the internet. And thanks to GitHub, you can! There are several paid hosting platforms that allow us to publish or 'host' our websites, but GitHub (with some constraints) lets us do this for free. GitHub is an important tool for all developers and GitHub Pages is just one of its many features. Its constraints are that it is a static hosting service, but that's not a problem for us.
Visit GitHub to get started by making an account. Then create a new repository and name it username.github.io. Then upload your related files to the repository. Remember to name your main html file as index.html.

Here's your challenge:

Host your website on GitHub Pages.

This is an all time favorite of this generation. In execution, Dark Mode or pretty much any theme is very simple! All you need to do is to change the colors of your website upon the click of a button. Which means, we essentially have two tasks:
1. Create a button (HTML) and track its click event (JS).
2. Change the colors of the website (CSS/JS).
My favorite way to do this is using classes. I create a 'dark' class, which I add and remove alternately, or toggle everytime the button is clicked (which is very easy thanks to JS). In other words, my containers have a default color selection, which is changed to a dark color when the dark class is added. You can also use JS to change the colors of the website.
Try Me

Here's your challenge:

Create a dark mode for your website.

This is a very cool trick that you can use to make your website look more professional. It is a loading page that appears when the user first visits your website. It can have a simple shape, text, or animation on it.
Again, there are multiple ways to do this. The easiest way is to use overlapping divs. You can set the display of the loading div to none after a few seconds using the setTimeOut() function in JS (Remember that the function takes the time in milliseconds!).

Here's your challenge:

Create a loading page for your website.

This is one of the simplest animations, that can be useful for adding a fun touch to your website. One of my favorite parameters to play around with is text-shadow, because it can add a certain depth or 3D effect to your text. The glow effect can be done by gradually increasing the size of the text-shadow with a contrasting color.
(I am pretty sure that slight alterations of this effect can be used to create the glitching lights effect, which I will try out soon!)

Here's your challenge:

Create a glow effect for a header text.