This is a solution to the Huddle landing page with single introductory section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
The task is undertaken with an intent to improve my frontend development skills as a junior frontend developer.
Users should be able to:
- View the optimal layout for the component depending on their device's screen size
- Live Site URL: Add live site URL here
When this project was initially done, I had glitches with maintaining the code. Hence, I took some time to learn how a good code structure should look like. A sketch was done and used to approximate the layout and dimensions. Remote git repository was created for the project before development commenced.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Desktop-first approach
- I used quite a lot of media queries to obtained a responsive banner.
- Increasing performance gain and controlling design output learnt from: https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/
- I am opened to comments about how to improve my frontend skills.
- There is always something new to learn for dynamic minds.
- The use of CSS framework for future projects such as SASS.
- better naming convention used for future projects such as BEM.
- Media query with advanced website layouts.
- writing cleaner, scalable and easy to maintain code.
- Frontend Mentor website and slack community
- stackoverflow
- youtube videos
- w3schools.com
- css-tricks.com
- Frontend Mentor - @duokobia
- Frontend Mentor community
- Stakeoverflow community
- Youtube content creators
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent