Makram El TimaniA few weeks ago my brother asked me how he should learn web development. He is still a second year in university studying computer science and wanted my advice. I obviously didn't waste this opportunity to boast and talk about my experience building and managing websites for 10 years 🤓 but I told him that web dev experience comes best with practice. You can sit and watch tutorials for weeks but until you work on some projects, you won't retain any of this experience.
So I got inspired to write up these 7 projects to help him and potentially you 🫵 practice web dev from scratch.
KEEP IN MIND: I will not be holding your hand in this post. This isn't a tutorial. I will simply suggest ideas for you to turn into code. Use whatever means you are used to in order to learn. Use google searches, tutorial inspiration, or ask AI to explain to you the task you are trying to accomplish. DON'T COPY-PASTE but try to understand the solution in the context of your task.
Post screenshots of your progress 📷
I will love to see it!
Here is a preview:
- Blog Page
- Image Slideshow
- Tic-tac-toe
- Cat Quote Generator
- Professional Redesign
- Movie Theater
- Modernize The Movie Theater
Note: Some projects are intentionally small in order to maximize your learning time. If you feel they are easy, add your own twists to them
Blog Page
The best way to learn html elements is with a blog IMO. You tackle almost all important elements you would see on blogs such us the one you're reading now.
First you would need content. You can copy content from somewhere or write it yourself; can be about anything, your favorite game, your local museum, feet. Gather some text to display on a website.
Use the following elements to organize and build your blog in the best way you see fit. Again, I am encouraging your creativity here but you can also use inspirations from your favorite blog site or this one maybe 😉
Elements to use:
- article
- headings 1 to 6 (not necessary to use all of them)
- paragraphs
- links
- ordered lists
- unordered lists
- images
- stylized text (bold, italic, strike-through)
You can always use W3Schools to reference the html elements. It's a great place to start.
Next add a little sparkle to your blog with styles. Can either use inline styles, <style> tag, or (my preferred way) cascading stylesheet file linked in the html file you are working on
Experiment with the following styles:
- background color
- font color
- font size
- font family
- font weight
- text alignment
- image width
- link hover color
- any other styles you might want to do
Nice work lil' bro! You have successfully created an html page that looks subjectively cool.
Learnings: html, css
Image Slideshow
Now it's time to level up your html and css and introduce a little bit of javascript.
Gather up a list of 4+ images. They can be whatever you want; your friend group, your pets, your feet. You will be building the following:
Things to notice:
- They are a list of images with only one "active" at a time
- When an image becomes active, there is a fade-in animation
- The next and previous buttons are located center right and center left above the image
- There are small dots below the slideshow to indicate which image is currently active, when you click one, it shows the corresponding image at that index
In this exercise, you will learn the uses of the <div> and <span> tags.
You will also explore new css properties such as position and border-radius in addition to animations.
But now it is time to write your first javascript code
Create a <script> tag inside the html file, or use an external file with extension .js referenced in the html file (my preferred way).
Create the necessary functions for the next button, the previous button and little dots underneath the images.
HINT: do not forget to link the buttons to the functions
🤔 Question: What do you think should happen if you click next on the last image? Or when you click previous on the first image?
There you have it! Your first code in javascript. The possibilities are endless from here.
Learnings: html, css, js
Tic-tac-toe
😬 Grit your teeth my brother, you will be creating AI... sort of.
Remember when I said the possibilities in js are endless? You're about to hate me now.
See this GIF? I am controlling only the X and the script is figuring out the best place of the O
The html is simple. You can use either a <div> or a <table> which ever you feel is simpler.
This will test your js logical coding skills. You can use either js objects, arrays, 2d arrays or whatever you want to create the functionality of the above GIF. Whenever the player(you) clicks a grid item, place an X there and save it somewhere in js. After than the AI will find the ideal place to put the O. Up until someone loses.
I don't expect it to look pretty, when the game is over you can just display the winner underneath (player or computer)
Bonus points if you make the user pick if he wants X or O
🚀🚀You have just launched your journey into web dev. Can't turn back now that you have created a sentient being 🤖.
Learnings: js, programming logic, js objects
Cat Quote Generator
My brother, you are about to venture into a quest into dark territories, mystical lands, and unknown error responses. Yes, this is API calls. 😨
For this small project, we will build a page that calls 2 api requests.
The page will use the data from these 2 endpoints to display an image with a quote underneath it or on top of it. You choose. Use your creativity to design this page. Here are the main requirements:
- Image of the cat
- Quote text displayed somewhere
- A button to refresh the image and the quote
The goal of this exercise is to get an introduction to API calls in js using fetch.
One page load, load a random image and a random zen quote and populate the html with them.
Then if the user clicks on the refresh button, do it again
Simple, easy, and gets you started where all internet starts: Cat Memes 😸
Now get to typin'!
Professional Redesign
We are done playing games. This is a big one. I introduced you to basic html and css, javascript, and even accessing the scary web. Now we put our big boy pants and we create a functioning website.
Take a look at this Free HTML Template
Notice above the preview page there is a Demo Preview button. If you click it, you will see the preview with a top where you can select the display device; mobile, ipad, etc...
The goal of this exercise is to learn using a UI Framework, namely Bootstrap to learn responsive design.
Create this exact same webpage using components from bootstrap.
See how there is a space between the content and the side edges? That is called a container in bootstrap
Did you notice the menu items and image are side by side? These are columns in bootstrap
A lot of people might disagree with bootstrap, and say you should learn Tailwind. The fact of the matter is, it doesn't matter. The point here is to learn how to use ANY UI Library and bootstrap in my opinion is the easiest.
Granted, you can accomplish this UI without the use of bootstrap. However, reading their documentation will help you understand mobile first
DO NOT COPY AND PASTE
Learnings: Responsive web development
Movie Theater
If the last challenge was not hard for you, this one might interest you 😈
I am a huge movie buff. I would love it if you would create a movie website for me.
We will tackle this similarly to the previous challenge; except now pick you own design to replicate. You can chose your local/favorite theater or you can use The Movie DB as inspiration
Same requirements as last challenge, make it responsive for smaller screens.
The Movie DB also has an API that you can use to get the information from.
Here are the requirements for this website
-
Create the UI
a. Header with links to other pages
b. Intro section with a search bar; no need to make the search bar functional now
c. Create a listing of movies by thumbnail, title release date and rating
d. Create an example move details page with the details of an example movie from the API -
Create the functionality; make it dynamic
a. Using the Movie DB API, add functionality to the search; here you should utilize the
<form>and<input>tags to understand how to submit website forms
- When the user searches, redirect to a search page to view search results
- Use the same display from (1.c) for the listing
b. Use the API to find the movies by category and display them in the home page (from step 1.c)
c. When you click on any movie in the list, redirect to the movie details page for that movie
You should not have a different html page for each movie; rather you should have amovie-details.htmlthat reads the movie id from the query paramters and uses the API to populate the necessary information on the page
You will have issues.
You will encounter errors.
You will see a lot of logs you will not understand.
DO NOT GIVE UP. YOU CAN DO IT.
I will be watch with my popcorn.
Learnings: dynamic display of information on websites
Modernize The Movie Theater
Final stretch. If you have made it this far, I would like to congratulate you. You have what it takes to make it in the web dev world.
Your final challenge is to attempt to do the previous challenge using a Javascript Framework 👻
There are many to choose from. React JS, Angular, Vue, etc...
To be honest, it doesn't matter which one. They were all created to make developers life easier and harder at the same time.
I would say pick 2 of them; React and Angular. And do this exercise in both
The concept you should be learning in the challenge is how to think of your website in components. Think about the previous challenge and try to find which areas in your code were duplicated a lot. These can be changed into reusable components that will make your website more data driven.
This is a wonderful exercise that is a welcome addition to your portfolio for a potential starting position as a Frontend Developer.
Research a lot, by now you would know the basics and following along Youtube tutorials should be much simpler.
I will not oversee this project or add any hints. Practice your problem solving and creative skills as they are skills that are needed in a developer before even having Web Dev skills. When you are satisfied with your results, you can move on to further studies.
Learnings: Modern Web Dev Frameworks
By completing these projects, you're not just learning web development—you're building a foundation for a future full of opportunities. Whether you're just starting out or refining your skills, these challenges will help you grow as a developer. Remember, the key to success is persistence and creativity. Don't be afraid to experiment, make mistakes, and learn along the way.
Now, it's your turn! Dive into the projects, share your progress, and let's grow together. 🚀
Thank you for reading and don't hesitate to contact me!
