-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5f41370
commit 79f7761
Showing
1 changed file
with
66 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,93 +1,102 @@ | ||
| # Frontend Mentor - Social links profile | ||
| # Social Links Profile Component | ||
|
|
||
|  | ||
| ## Welcome ✌🏻 | ||
|
|
||
| ## Welcome! 👋 | ||
| ## Table of Contents | ||
|
|
||
| Thanks for checking out this front-end coding challenge. | ||
| - [Overview](#overview) | ||
| - [The Challenge](#the-challenge) | ||
| - [Screenshot](#screenshot) | ||
| - [Links](#links) | ||
| - [My Process](#my-process) | ||
| - [Built With](#built-with) | ||
| - [What I Learned](#what-i-learned) | ||
| - [Continued Development](#continued-development) | ||
| - [Useful Resources](#useful-resources) | ||
| - [Author](#author) | ||
| - [Acknowledgments](#acknowledgments) | ||
| - [Got Feedback for Me?](#got-feedback-for-me) | ||
|
|
||
| [Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects. | ||
| ## Overview | ||
|
|
||
| **To do this challenge, you need a basic understanding of HTML and CSS.** | ||
| ### The Challenge | ||
|
|
||
| ## The challenge | ||
| Present all your social media profiles in one place with the Social Links Profile Component. Engage your audience and boost your online presence with this sleek and interactive card. | ||
|
|
||
| Your challenge is to build out this social links profile and get it looking as close to the design as possible. | ||
| Users should be able to: | ||
|
|
||
| You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. | ||
| - View the optimal layout for the site depending on their device's screen size | ||
| - See hover states for all interactive elements on the page | ||
|
|
||
| Your users should be able to: | ||
| ### Screenshot | ||
|
|
||
| - See hover and focus states for all interactive elements on the page | ||
|  | ||
|
|
||
| Want some support on the challenge? [Join our community](https://www.frontendmentor.io/community) and ask questions in the **#help** channel. | ||
| ### Links | ||
|
|
||
| ## Where to find everything | ||
| - Solution URL: [GitHub Repository](https://github.com/SartHak-0-Sach/Social-links-profile_frontend_project) | ||
| - Live Site URL: [Live Site](https://social-profile-links-frontend.netlify.app/) | ||
|
|
||
| Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design. | ||
| ## My Process | ||
|
|
||
| The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. | ||
| ### Built With | ||
|
|
||
| If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can [subscribe as a PRO member](https://www.frontendmentor.io/pro). | ||
| - HTML5 | ||
| - CSS3 | ||
|
|
||
| All the required assets for this project are in the `/assets` folder. The images are already exported for the correct screen size and optimized. | ||
|
|
||
| We also include variable and static font files for the required fonts for this project. You can choose to either link to Google Fonts or use the local font files to host the fonts yourself. Note that we've removed the static font files for the font weights that aren't needed for this project. | ||
| You will find all the required assets in the `/design` folder. The assets are already optimized. | ||
|
|
||
| There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts. | ||
|
|
||
| ## Building your project | ||
|
|
||
| Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: | ||
|
|
||
| 1. Initialize your project as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/). | ||
| 2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below. | ||
| 3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles. | ||
| 4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. | ||
| 5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. | ||
| 6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. | ||
|
|
||
| ## Deploying your project | ||
|
|
||
| As mentioned above, there are many ways to host your project for free. Our recommend hosts are: | ||
|
|
||
| - [GitHub Pages](https://pages.github.com/) | ||
| - [Vercel](https://vercel.com/) | ||
| - [Netlify](https://www.netlify.com/) | ||
| ### What I Learned | ||
|
|
||
| You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe). | ||
| - Creating stylish and responsive profile cards | ||
| - Implementing hover effects for interactive elements | ||
| - Structuring content for optimal user engagement | ||
|
|
||
| ## Create a custom `README.md` | ||
| This project is one of the simplest ones of all the projects I have done and the only part that may seem difficult to a beginner is implementing hover and focus states along with box shadow syntax knowledge as provided in code snippet below- | ||
|
|
||
| We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code. | ||
| ```css | ||
| /* Hover and focus states */ | ||
| .buttons .btn:hover, | ||
| .buttons .btn:focus { | ||
| background-color: #a4ff00; | ||
| color: #111; | ||
| } | ||
|
|
||
| The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like. | ||
| /* Adding a subtle box-shadow for the focus state */ | ||
| .buttons .btn:focus { | ||
| box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5); | ||
| } | ||
| ``` | ||
|
|
||
| Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file. | ||
| ### Continued development | ||
|
|
||
| ## Submitting your solution | ||
| The continuously learning journey of a programmer never ends. This project made me realize that there are many concepts that I need to work upon including fundamentals like flex-box and its properties, to more complex concepts like working with fetch and async await in javascript. These areas are some that I think I need to work more upon in the upcoming future as they highlight some of the most significant regions of web development that are important for every developer to know of. | ||
|
|
||
| Submit your solution on the platform for the rest of the community to see. Follow our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) for tips on how to do this. | ||
| These key points mentioned here will help me grow accountable and consistent towards improving at writing good quality code and be a successful full stack developer one day. | ||
|
|
||
| Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community. | ||
| ### Useful resources | ||
|
|
||
| ## Sharing your solution | ||
| - [Harkirat Singh course notes](https://github.com/SartHak-0-Sach/harkirat-singh-course_code_and_notes) - I have added notes of all lectures along with code and lecture insights of all weeks along with bonus lectures to help you all as much as I can. | ||
| - [My development code and notes](https://github.com/SartHak-0-Sach/cwh-web-dev-playlist_code_and_notes) - These are my notes that I made while working on my development skills in initial days and did these courses. Make sure to star the repository if you like it.✨💫 | ||
| - [MDN documentation hover state for CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) - This is an amazing article which helped me finally understand hover states. I'd recommend it to anyone still learning this concept. | ||
|
|
||
| There are multiple places you can share your solution: | ||
| ## Author | ||
|
|
||
| 1. Share your solution page in the **#finished-projects** channel of our [community](https://www.frontendmentor.io/community). | ||
| 2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. | ||
| 3. Share your solution on other social channels like LinkedIn. | ||
| 4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/). | ||
| <b><strong>Sarthak Sachdev</strong></b> | ||
| - Website - [Sarthak Sachdev](https://itsmesarthak.netlify.app/) | ||
| - LeetCode - [@sarthak_sachdev](https://leetcode.com/u/sarthak_sachdev/) | ||
| - Twitter - [@sarthak_sach69](https://www.twitter.com/sarthak_sach69) | ||
|
|
||
| We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. | ||
| ## Acknowledgments | ||
|
|
||
| The more specific you are with your questions the more likely it is that another member of the community will give you feedback. | ||
| I feel like the solutions provided on the website and the continuous doubt solving by industry experts on discord for free is something that is unmatched by anyone else and need to be acknowledged for their efforts in improving me as a developer by suggesting the best practices in your respective tech stack. | ||
|
|
||
| ## Got feedback for us? | ||
| ## Got feedback for me? | ||
|
|
||
| We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io. | ||
| I love receiving feedback! I am always looking to improve my code and take up new innovative ideas to work upon. So if you have anything you'd like to mention, please email 'hi' at saarsaach30[at]gmail[dot]com. | ||
|
|
||
| This challenge is completely free. Please share it with anyone who will find it useful for practice. | ||
| If you liked this project make sure to spread the word and share it with all your friends. | ||
|
|
||
| **Have fun building!** 🚀 | ||
| **Happy coding!** ☺️🚀 |