This repository contains the solution for the Social Links Profile challenge on Frontend Mentor. This project helped me enhance my frontend development skills by working on realistic tasks.
Check out the live demo of the project: Live Site
- LinkedIn Profile: Yashi Singh
Users should be able to:
- See hover and focus states for all interactive elements on the page.
-
Desktop Preview
-
Mobile Preview
- Semantic HTML5 markup
- SCSS for styling
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Google Fonts for font styling
To set up SCSS for this project, follow these steps:
-
Install Node.js and npm:
Ensure you have Node.js and npm installed. You can download it here. -
Install SCSS:
Run the following command to install Sass globally:npm install -g sass
-
Compile SCSS to CSS:
Use the following command to compile SCSS to CSS:sass scss/main.scss css/main.css --watch
The
--watchflag will automatically compile your SCSS file whenever changes are made. -
Link CSS in HTML:
Ensure the compiled CSS file is linked in your HTML:<link rel="stylesheet" href="css/main.css">
In this project, I enhanced my understanding of:
- Writing modular and maintainable SCSS code.
- Implementing hover and focus states effectively for interactive elements.
- Using CSS custom properties to maintain a consistent color scheme.
- Adjusting layouts responsively with media queries for various screen sizes.
I aim to continue improving:
- Responsiveness techniques to handle diverse screen sizes.
- Performance optimization of SCSS for better load times.
- Understanding and implementing accessibility features in web design.
- MDN Web Docs - Great for learning about HTML, CSS, and SCSS properties.
- CSS-Tricks - Helpful articles and examples on CSS and SCSS techniques.
- Sass Documentation - Official documentation for SCSS/Sass.
- Frontend Mentor: @Yashi-Singh-9
- LinkedIn: Yashi Singh
A big thank you to the Frontend Mentor community for providing such engaging challenges and to my peers for their constructive feedback.