This is a solution to the Scoot website 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 each page depending on their device's screen size
- See hover states for all interactive elements throughout the site
- Solution URL: GitHub
- Live Site URL: scoot-multipage.vercel.app
- React
- Remix
- TypeScript
- Semantic HTML5 markup
- Flexbox
- CSS Grid
First of all, Scoot is my introduction to coding with Remix and a meta-framework in general. Since this is a simple app, I got to dabble in just a few key concepts of Remix. I learned how to implement Remix's file-based routing system for my page routes and respective nested index routes. To render JSON data, I applied it's builtin One really surprising skill I improved on was, reading documentation. As Remix is a fairly new meta-framework, there isn't a lot of information available, so I have to rely more on the documentation. As a result, my ability to understand documentation in general has improved.
- Nested Routes
- Remix Outlet Component
- Index Routes
- Loading Data
- Linking StyleSheets
- Responsive Layout Handling with Vanilla CSS
- SVG components
After working in TypeScript, the first thing I learned was that I will be using this on every JavaScript heavy project moving forward. I really appreciated how TypeScript can be leveraged for editing code, too. I experienced how stactic type-checking helps to prevent unnecessary bugs in my code on one hand, and it teaches me how to plan my coding logic better from the start, on the other hand. In addition, I benefited from more specific TypeErrors, making the debugging process smoother.
- Defining Types
- Explisit types
- TypeErrors
- The TypeScript Compiler
- Interface Declaration
- Generics
- TSX
This project has also expanded my understanding of HTML. Before building Scoot, I had never used the "details" nor "summary" tag before. Not only that, I was introduced to CSS "attribute selectors" as a way to create animations. While furthering my understand of responsive design, I learned how "picture" and "source" use multiple images to more nicely fill the browser viewport.
- Details & Summary HTML Tag
- CSS Attribute Selectors
- Picture & Source Tag
- Viewport Units
- CSS Clamp() Propertyy
Throughout this challenge, I noticed how many problems would have been solved with thorough project planning. For example, I didn't put a lot of thought into naming conventions for my React components nor my css classes. As a result, some of my class and components names lack an intuitiveness, which makes it less readable. Not only that, I saw an opportunity to improve how I plan writing stylesheets moving forward. For one, Remix requires developers to make separate stylesheets for different screen sizes(when styling with vanilla css). Looking back on how I styled this project I realize how inefficient my stylsheets were arrange. For instance, I made a stylesheet for each main section of a webpage (navbar, footer, hero section, faq section, careers list section, etc), and for each screen size(desktop, mobile and tablet), instead of creating a stylesheet for each screen-size and adding the appropriate component to each page.
Estimating how long it would take me to build this project is another area I need to improve on, as I was off by a large margin. I wasn't able to predict how challenging some aspects of building this project would be. Plus I was learning a lot of different things in this one project (Remix, TypeScript more complex CSS) that I didn't predict how this learning curb would effect the timeframe. All in all, I feel certain that my estimations will be more accurate on my next challenge.
Even though, I learned some TypeScript and Remix while building this web app, I know I am barely scratching the surface of understandig. On my next project, I will be aiming to get more intuitive with them. Not only that, I will aim to take advantage of more of their features.
-
LinkedIn - @KarenDouglas
-
Frontend Mentor - @KarenDouglas
-
Twitter - @CodeNoob4Life
