Before you continue with this introductory article, ensure you:
- Have a working knowledge of HTML and CSS
What is a Static Webpage?
A static webpage inherently displays hardcoded contents from the HTML file that won't change based on any user actions.
The contents of the dashboard above can only be updated from the HTML document and not based on the currently logged-in user.
What is a Dynamic Webpage?
A dynamic webpage interacts with the user through triggered actions and a set of conditional rules, the contents of a dynamic web page change based on events and conditions.
The username and profile image are dynamic, which means the dashboard contents change each time a new user logs in.
A variable can only hold one data type at a time.
2.1. Variable Declaration
Variable keyword declaration technique includes:
2.2. Variable Initilization
Since variable declaration is the act of keeping space for later use, then variable initialization is the process of assigning or putting the value you're keeping the space for into the declared variable, which then means our container is not empty anymore.
- Global scope
- Local scope/function scope, and
- Block scope
These 3 scopes provide ways to either secure a variable from being accessed outside or within a particular scope.
Functions are capable of accepting inputs and generating output based on the logic in the function.
1. Regular function (ES5)
2. Arrow function (ES6)
Do not bother much about arrow functions if you're still very new to it, you will figure the difference as you code more.
- Learn more about the difference between regular functions and arrow functions
You need to know-how var, const, and let works to understand this concept better.
A callback is any function that is being passed to another function as an argument (input) and is executed later.
- Learn callback here
An array is also a container that can hold items, but unlike a variable that only holds a single data type at a time, the array data type on the other side can store as many collections of different data types at a time.
While working with Fetch or backend generally, you need a way to resolve failure or success calls from the backend, which might take a while to arrive.
11. Learn DOM manipulation
You can learn more about DOM manipulation from here
12. Build Projects
The best way to know you've really understood a concept is by implementing those concepts in a project. Ensure to apply all these concepts in a side project as your learning continues.
- Todo list.
- Count down.
- Tic Tac Toe.
- Pong game.
- A Quiz Application
- A Game Application
- Music App.
- File Converter.
- Interactive Map.
See you in the next one.
Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned something new from this article, I will like to connect with you.
Let's connect on
See you in the next article. Bye Bye 🙋♂️
Top comments (2)
What you’re saying is not exactly true, it is possible and also very much used nowadays to have a static website with user authentication and different data displayed based on the user.
I agree that static pages can be rendered from the server, plus static webpages can have a dynamic component within them, and I also think that is beyond the scope of this article.
Talking about server rending to the reader that is assumed to be a beginner from the begining of the article is really not an introductory article anymore.
This explanation should help the reader have an understanding of what static and dynamic pages works or looks like, and what differentiate them from one another.