Landing Page Project

This is a Landing Page Project readme

Table of Contents

*[1-Introduction] *[2-Project-Description] *[3-Git] *[4-Resources] *[5-Plagiarism] *[6-Learn]

Inroduction

At first I couldn't clone the repo from github because when I was cloning the link provided on the project instructions page , it cloned me an already solved project so I tried many times to get the starter code but it kept getting me one of the solved projects , so I decided to build the project from scratch and considered it as a long training. Eventually after I was almost done I tried again to clone the whole repo and it worked but I was already almost done with the project from scratch.

Project Description

I started by building the HTML file from scratch and adding all the required elements, tags and sections as semantically as I could. then added the inner text for each element and assign classes to them while creating to use these classes for styling and interactivity.

After that, I started creating the CSS file and started styling the page at first for small screens with all required sizes, paddings, margins, colors, positioning and backgrounds.

Next, I creatd a Media query for large screens to adjust the content with the correct styling for large screens at a breakpoint of (750px), after I was done with the CSS, I started coding the JavaScript file.

Started with removing the static nav list items from the HTML file and add them dynamically with JavaScript according to the number of sections on the page, then added highlighting sections feature to hightlight the section that is in the view port but I had a bug that in small screens the section is taller than the screen height so it is not detected inside the view port completely, so the bug was fixed by detecting if the section is partially inside the view port.

Moreover, I started adding the floating moving bubbles before and after each section as they appear when the section is highlighted.

Also, I started adding the required logic to the CSS and JS files to hide the nav bar if the user doesn't scroll for 2 seconds.

Finally, I started adding collapsing feature to the sections when the user click on the section header and highlight the header when hovered to indicate that there is a feature here.

• After submitting it first time and got the review I started working on the missing features to meet the rubric specifications

I removed the css scroll behavior: smooth and added it with JS using scrollIntoView function to the sections and using ScrollTo function to back to top button

Then, I added the highlight function to the nav buttons to indicate the selected section.

Finally, I done some code refactoring as collecting all golobal variables to the top of the code and changed the addEventListener functions to the new syntax version.

• After 2nd review the reviewers highlighted a bug that the nav bar on small screens was getting highlighted by the hover class not by active class so I made the active class more specific for the nav bar than the hover class.

Git

Iam still a total beginner but I used git as much as I can to track the changes since the start of the project to the end you can find all the commits on the main branch.

Resources

I used to google and learn alot of the features that I implemented before writing them in my own code specially from:

• StackOverFlow website
• Mozzila Devolopers Network
• W3School website
• Other websites that popped from google search

Plagiarism

I never copied any code for any feature that I have implemented into my project from anywhere. However, I used to search for the feature that I want to implement and learn it then implement it with my own code.

I only imitated the project style but never any of it's code at all, I just wanted to build a similar project with my own code.

Learn

In the end I have learned alot from this nanodegree program so far and from building this project from scratch. I hope to keep learning more and more in the future and from the upcomming chapters and projects.

Thanks, Ahmed Saeed