The latest articles on DEV Community by Tek Loon (@teklooncheah). https://dev.to/teklooncheah https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F197197%2F09f0012e-bcfc-4627-959d-3d411d4d5be6.jpg https://dev.to/teklooncheah en Tek Loon Sun, 12 Apr 2020 13:05:45 +0000 https://dev.to/teklooncheah/how-i-built-freecodecamp-technical-documentation-page-in-a-more-interesting-way-4l5f https://dev.to/teklooncheah/how-i-built-freecodecamp-technical-documentation-page-in-a-more-interesting-way-4l5f <h2> Introduction </h2> <p>On a sunny weekend, I started another FreeCodeCamp Certification Project - Building Technical Documentation Page.</p> <h2> Hesitation </h2> <p>While I could I just create a very simple website to fulfill all the user stories. But I don't feel very good about that for the sake of just passing the tests, completed the project and grab the certification. </p> <h2> Bring the project extra mile </h2> <p>Susan Cain took 7 years to write her book - Quiet. Thus, I decided to take an extra effort to create a pretty real documentation website. Here's how the idea came, that I can re-create/revamp some of the API documentation sites that I always visit. I end up choosing the <a href="https://expressjs.com/">ExpressJS website</a>.</p> <p>The technology and libraries I used in this project:</p> <ul> <li>HTML</li> <li>CSS</li> <li> <a href="https://github.com/highlightjs/highlight.js/">HighlightJS</a> - For syntax highlighting</li> </ul> <p>Codepen link is embedded below and feedback are welcome.</p> <p>Thank you for reading and have a nice day.</p> <p><iframe height="600" src="https://codepen.io/teklooncheah/embed/qBOBwmo?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen html webdev css Tek Loon Thu, 12 Mar 2020 13:29:35 +0000 https://dev.to/teklooncheah/how-i-developed-the-nintendo-switch-game-store-ui-using-css-grid-27lm https://dev.to/teklooncheah/how-i-developed-the-nintendo-switch-game-store-ui-using-css-grid-27lm <p>I am taking courses about CSS Grid via Kevin Powell Web Responsive Design Bootcamp at Scrimba.com.</p> <p>After several lessons, I thought of maybe I can re-create some real websites that I have been visiting using what I have learned.</p> <p>It just happened that I bought a Nintendo Switch and came across this Game Store UI and I think I could try to develop this using the CSS Grid I have just learned.</p> <p>This UI is developed using technologies</p> <ul> <li>HTML</li> <li>SCSS (Inheritance, Nesting)</li> <li>CSS Grid (Mainly Grid Area)</li> <li>React</li> </ul> <p>Feel free to give feedback.</p> <p>Thanks for reading.</p> <p><iframe height="600" src="https://codepen.io/teklooncheah/embed/BaNweRR?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen css react webdev