In Step 1, I delved into the study of 'HTML' and 'CSS,' covering topics such as Grid and Flex in CSS, along with an introduction to JavaScript. In this step, I undertook a project to design a Windows 10 calculator, and I will share its demo and GitHub link with you.
-
My Calculator's GitHub link:
https://github.com/Hanieh-Sadeghi/Calculator-windows10-cs_internship.git -
Calculator’s demo link:
https://hanieh-sadeghi.github.io/Calculator-windows10-cs_internship/ - Watch the video Step 1
During the second step, I delved into the principles of responsive web design and initiated my exploration of JavaScript, alongside gaining proficiency in debugging techniques. A significant task during this step involved enhancing the responsiveness of our previously designed Calculator.
-
My Calculator's GitHub link:
https://github.com/Hanieh-Sadeghi/Calculator-windows10-cs_internship.git -
Calculator’s demo link:
https://hanieh-sadeghi.github.io/Calculator-windows10-cs_internship/ - Watch the video Step 2
In the third step, the focus shifted towards a deeper exploration of JavaScript concepts, particularly emphasizing scopes, functions, and block scopes. Additionally, we familiarized ourselves with Chrome Dev Tools to enhance our debugging capabilities. A key task in this phase involved extending the functionality of our Calculator to include operators comparable to those in the Windows 10 calculator. Furthermore, I introduced themes with a palette of five colors: green, blue, purple, black, and white, enhancing the aesthetic appeal and customization options. Moreover, as part of the assignment, we were tasked with creating a To-Do App, wherein I developed a To-Do App inspired by the design principles of Windows 11.
-
My Calculator's GitHub link:
https://github.com/Hanieh-Sadeghi/Calculator-windows10-cs_internship.git -
Calculator’s demo link:
https://hanieh-sadeghi.github.io/Calculator-windows10-cs_internship/ -
My ToDo App Windows11 GitHub link:
https://github.com/Hanieh-Sadeghi/ToDo-App-Windows11.git -
ToDo App demo link:
https://hanieh-sadeghi.github.io/ToDo-App-Windows11/ - Watch the video Step 3
In the Fourth step, the focus shifted towards mastering SASS and LESS, two powerful CSS preprocessors, while delving deeper into JavaScript concepts such as hoisting and scope closures. During this stage, I leveraged this newfound knowledge to develop a comprehensive To-Do App equipped with functionalities enabling users to categorize tasks as "all," "active," or "complete," thereby enhancing its usability and versatility. Additionally, I undertook the task of revamping our Calculator using SASS, a task that not only improved its aesthetic appeal but also allowed for more efficient and maintainable styling.
-
My Calculator's GitHub link:
https://github.com/Hanieh-Sadeghi/Calculator-windows10-cs_internship.git -
Calculator’s demo link:
https://hanieh-sadeghi.github.io/Calculator-windows10-cs_internship/ -
My ToDo App Windows11 GitHub link:
https://github.com/Hanieh-Sadeghi/Todo-App-Express.git -
ToDo App demo link:
https://hanieh-sadeghi.github.io/Todo-App-Express/ - Watch the video Step 4
During the fifth step, I delved into the MVVM (Model-View-ViewModel) design pattern, further expanding my understanding of JavaScript modules and concepts such as 'this' and 'that' in JavaScript, as well as object-oriented programming principles. Additionally, I familiarized myself with Knockout.js, which presented a significant learning challenge due to the scarcity of documentation and resources available. Despite this, I successfully developed a To-Do app using Knockout.js, demonstrating my ability to overcome obstacles and learn new technologies independently. Furthermore, I engaged in exercises on the Exercism website, honing my problem-solving skills and reinforcing my understanding of JavaScript concepts.
-
ToDo App demo link:
https://hanieh-sadeghi.github.io/KnockoutJS/ - Watch the video Step 5
My ToDo App KnockoutJS GitHub link:
https://github.com/Hanieh-Sadeghi/KnockoutJS.git
During the fifth step, I embarked on an in-depth exploration of various JavaScript topics and fundamental web concepts. This included studying key chapters from the "You Don't Know JS" book series, specifically focusing on mixing "class" objects, prototypes, and ES6 classes. Additionally, I deepened my understanding of HTTP basics, communication with backend systems, client-side storage mechanisms, APIs, and the distinctions between frontend, backend, and web servers.
In practical application, I enhanced the client-side functionality of the Todo App by implementing automatic state storage using client-side storage mechanisms. Leveraging GitHub for version control, I published the updated app on my jsFiddle account. Furthermore, I expanded the Todo App's capabilities by adding functionalities for uploading and downloading states from the server, again utilizing GitHub for source control.
To solidify my JavaScript skills, I tackled the "Sum Of Multiples" exercise on Exercism.org, ensuring all available tests in the spec file were successfully executed. I also diligently completed lessons on TypingClub.com up to lesson 316, aiming for a 5-star rating on each lesson.
Moreover, I pursued further understanding of HTTP by exploring at least five additional online resources, carefully selected to supplement my learning journey. Each chosen resource was evaluated based on its comprehensiveness, relevance, and credibility in deepening my understanding of HTTP fundamentals. Additionally, I strived to achieve the Critic badge on StackOverflow, demonstrating my commitment to contributing valuable insights and knowledge-sharing within the developer community. Throughout these endeavors, GitHub served as my primary platform for version control, ensuring a streamlined and collaborative approach to my learning and development efforts.
To run this project locally, follow these steps:
-
Clone the project repository to your local machine using the following command:
git clone https://github.com/Hanieh-Sadeghi/Todo-App-Express.git -
Start the Node.js server by running the following command in your terminal:
node server/server.js -
Once the server is running, open your web browser and go to:
http://localhost:3000You can now enjoy the project running on your local server.
In the seventh, I delved into JavaScript types, values, and native objects through dedicated chapters from the "You Don't Know JS" book series. Additionally, I explored various methods of authenticating web applications, a pivotal aspect of contemporary web development.
Putting theory into practice, I revamped the Todo App to incorporate a robust authentication system, introducing 'Sign up' and 'Sign in' pages to ensure secure access. Authentication was enforced across all HTTP requests, bolstering data security. Furthermore, I extended functionality to store app states separately for each user, catering to both authenticated and anonymous users.
Moreover, I integrated a dynamic header into the Todo App, showcasing the current user's name and offering intuitive navigation options for signing up, signing in, and logging out. Button visibility adapted dynamically based on the app's status, enhancing user interaction.
To sharpen my JavaScript prowess, I tackled Exercism.org exercises, meticulously ensuring the successful execution of all available tests. GitHub remained pivotal for version control and collaboration.
Simultaneously, I honed my typing skills through TypingClub.com lessons, striving for excellence with a 5-star rating on each lesson. My ambition extended to achieving the Teacher badge on StackOverflow, signaling expertise and contributions to the developer community.
Furthermore, I actively sought out diverse resources on web authentication, selecting five credible sources to deepen my knowledge. These chosen resources were thoughtfully shared on Twitter and LinkedIn to enrich the wider developer community's understanding. Throughout these endeavors, GitHub played an indispensable role in facilitating version control and collaborative efforts.
-
Clone the project repository to your local machine using the following command:
git clone https://github.com/Hanieh-Sadeghi/Todo-App-Login.git -
Start the Node.js server by running the following command in your terminal:
nodemon server/server.js -
Once the server is running, open your web browser and go to:
http://localhost:3000You can now enjoy the project running on your local server.