Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/peliah/hng-stage-one

This is a HNG task One for the front end track. We are asked to create a personal portfolio with special specifications
https://github.com/peliah/hng-stage-one

Last synced: about 12 hours ago
JSON representation

This is a HNG task One for the front end track. We are asked to create a personal portfolio with special specifications

Awesome Lists containing this project

README 

        

---



# Personal Website (Frontend Task)



## Stage 1: Build Your Personal Website



### Study Material

- [FreeCodeCamp 11-Hour Course on HTML & CSS](https://www.freecodecamp.org/news/html-css-11-hour-course/)

- [HTML Tutorial on W3Schools](https://www.w3schools.com/html/)

- [CSS Tutorial on W3Schools](https://www.w3schools.com/css/)

- [Responsive Web Design Guide](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode)

- [HTMLImageElement Documentation](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight)

- [GitHub Pages Documentation](https://docs.github.com/articles/creating-project-pages-manually)



### Task

You will create and host a simple single-page website outlining your goals for the next 2 years in the tech field. 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 are allowed for this stage.

- **Responsiveness**: The website must be responsive and function well on all devices (desktop, tablet, mobile).

- **Images**: 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 should have a `data-testid` attribute assigned for easy testing purposes.



  - **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**: Display the current day of the week (e.g., Monday, Friday).

    - Attribute: `data-testid="currentDay"`



  - **Slack Email**: Display your Slack Email.

    - Attribute: `data-testid="slackEmail"`



  - **Slack Profile Picture**: Display your Slack Profile Picture.

    - Attribute: `data-testid="slackProfilePicture"`

    - Dimensions: The image must have natural dimensions and be added to the page in its original size.



  - **Links**: Add the following links with the specified `data-testid` attributes:

    - Link to [hng.tech/learn](https://hng.tech/learn): `data-testid="hngLink"`

    - Link to [keyword.dog](https://keyword.dog): `data-testid="keywordLink"`

    - Link to [scrapeanyweb.site](https://scrapeanyweb.site): `data-testid="scrapeanywebLink"`



### 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.

  - 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 dimensions must be in their original size.

- **Data-attributes adherence**: Every specified detail on the page should correctly have the `data-testid` attribute as indicated, ensuring easy identification during any potential testing.



### Submission Mode

Submit your task through the designated 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.

- Provided the hosted page's URL in the submission form.

- Thoroughly reviewed your work to ensure accuracy, functionality, and adherence to the specified guidelines before submission.



### Submission Deadline

The deadline for submissions is Wednesday, July 3rd, at 11:59 PM GMT. Late submissions will not be entertained!



---