HNG-INTERNSHIP-PROJECTS - Stage One Task

The Task

• You will create and host a simple single-page website:

• outlining your goals for the next 2 years in the tech field.

• Slack Name:Display your Slack Display Name. Attribute: data-testid="slackDisplayName"

• Current Time in UTC:Display the current time in UTC. Attribute: data-testid="currentTimeUTC"

• Current Day of the week (e.g. Monday, friday):Display the current Day of the week. Attribute: data-testid="currentDay"

• Slack Email:Display your Slack Email. Attribute: data-testid="slackEmail"

• Slack profile pictureDisplay your Slack Profile Picture Attribute: data-testid="slackProfilePicture". Dimensions: The image must have natural dimensions (width and height specified in the image file itself) and added to the page in its original size (natural width and natural height).

• Add a link to http://hng.tech/learn. Attribute: data-testid="hngLink"

• Add a link to http://keyword.dog/ Attribute: data-testid="keywordLink"

• Add a link to http://scrapeanyweb.site/ Attribute: data-testid="scrapeanywebLink"

  Requirements

• The website should be visually appealing, mobile-friendly, and utilize HTML, CSS and JavaScript only.

• Each required element should have a specified data-testid attribute for easy identification and testing. Requirements: Languages: Only HTML, CSS and JavaScript allowed for this stage.

• The website must be responsive and function well on all devices (desktop, tablet, mobile).

• All images used on the website must have natural dimensions (width and height specified in the image file itself). Websites with images that don't have natural dimensions will be automatically disqualified.

• Required Elements: Each required element on the website (Slack name, slack profile picture, links) should have a data-test-id attribute assigned for easy testing purposes.

Acceptance Criteria:

• Content: The website should clearly outline your tech goals for the next 2 years.
• Visuals: The website should be visually appealing and well-organized.
• Functionality:All links should function properly and direct users to the specified websites (hng.tech/learn, keyword.dog, scrapeanyweb.site).
• The website should be fully responsive and adjust to different screen sizes.
• Code Quality:The code should be well-structured, indented, and easy to read.
• Each required element should have a unique data-testid attribute assigned.
• Accuracy:Your Slack name should correspond to the actual data.
• Your slack profile picture dimension must be in its original size (Make sure the image have natural dimensions).
• Data-attributes adherence: Every specified detail on the page should correctly have the data-testid attribute as indicated above, ensuring easy identification during any potential testing.

Submission Mode:

• Submit your task through the designated Submission form https://docs.google.com/forms/d/e/1FAIpQLSc6rvktEyw6z8R4FBxhHSYGk7Z81I65pPcbNPeY-cZX8Gaurg/viewform. Provided the git repo link and hosted page's URL in the submission form.
• Ensure you've:
• Hosted the page on a platform of your choice (e.g., Vercel, GitHub Pages, Netlify).
• Double-checked all requirements and acceptance criteria.
• Thoroughly reviewed your work to ensure accuracy, functionality, and adherence to the specified guidelines before you submit it. Submission Deadline:
• The deadline for submissions is Wednesday 3rd, July, at <11:59 PM GMT>. Late submissions will not be entertained!!

Solution

• Solution URL: stageone
• Live Site URL: hng-internship-stageone

Built with

• Semantic HTML5 markup
• CSS3
• JavaScript

Study Material

• html-css-11-hour-course
• HTML-Tutorial CSS-Tutorial Responsive-Web-Design-Guide HTMLImageElement GitHub-Pages

Author

• Website - OGE
• LinkedIn - @oge-dev
• Twitter - @oge_dev