Tech-News

Description

Tech-News is a web project that provides users with the latest technology highlights in the United States. The project was developed from scratch, starting with HTML and progressively adding libraries and functionality to create a complete website.

Project Development Steps:

1. HTML Structure:

   • Started with the basic HTML structure.
   • Added necessary libraries such as Bootstrap, Font Awesome, and others to enhance the website's design and functionality.

2. Nav-Bar Section:

   • Created the navigation bar section with the site name "Tech News" and an "About" button.

3. Heading Section:

   • Developed the heading section, which includes a title "Trending Topics" and a descriptive paragraph.

4. Main Content and News:

   • Created a div to contain all the main content, including the news.
   • Utilized JavaScript to load the news dynamically into the HTML, making the website's main page dynamic and up-to-date.

5. Footer Section:

   • Designed a footer section that contains a description of the site and links to social media profiles.
   • Added a "scrollUp" button, implemented in JavaScript, for smoother navigation to the top of the page.
   • Enhanced user experience by linking the "About" button in the nav-bar to the footer section, providing quick access to the site's description.

6. JavaScript Functionality:

   • Utilized JavaScript to fetch data from a news API, specifically obtaining the top technology highlights in the United States.
   • Implemented a scroll-up button that appears when the user scrolls down and allows for easy navigation to the top of the page.
   • Monitored the window scroll event and displayed/hid the scroll-up button accordingly.
   • Manipulated the fetched data, including filtering articles without images and selecting the first six articles for display.
   • Dynamically created HTML elements for each selected article, populating them with relevant information like title, author, date, description, and image.
   • Handled errors during API requests or data manipulation, providing error messages in the console.

7. CSS Styling:

   • Styled the footer section and scroll-up button using CSS.
   • Utilized Bootstrap to style other parts of the website, ensuring a visually appealing and responsive design.

In summary, Tech-News is a web project that showcases skills in web development, including HTML structure, JavaScript functionality, API integration, data manipulation, and dynamic HTML element creation. It aims to deliver the latest technology news in an engaging and user-friendly manner, while also providing a well-designed and responsive interface.

Usage

To use Tech-News, simply access the website in your web browser. You can scroll through the latest technology news, click on articles for more information, and easily navigate back to the top of the page using the scroll-up button.

Contributors

• Leonardo Cordeiro