This is a solution to the GitHub user search app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Search for GitHub users by their username
- See relevant user information based on their search
- Switch between light and dark themes
- Have the correct color scheme chosen for them based on their computer preferences.
- Solution URL: GitHub
- Live Site URL: GitHub Pages
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Gulp
- SCSS
- BEM
I learnt how to create breakpoints and extends with SCSS. I practiced JS and API skills.
I am still not enough compfortable with JS so next weeks I plan to focus on learning good practices and modern Javascript.
- CSS tricks1 - This helped me scale svg image.
- CSS tricks - by this article I learnt about managing breakpoints with mixins
- CSS tricks - With this article I learnt about styling ::placeholder pseudo element and :placeholder-shown pseudo class
- Stackoverflow - by this article I found a solution how to convert ISO date format from API data into the format given in figma file.
- GitHub - Joanna Łapa
- Frontend Mentor - [@JoannaLapa]https://www.frontendmentor.io/profile/JoannaLapa)
- Twitter - @jlapa_apa