My first devchallenges challenge in the "Responsive Web Developer"-path: Building a 404 Not Found page.
The challenge:
Create a 404 not found page following the design. The page should be responsive. Don’t look at the existing solution. Fulfill user stories.
User story:
Create a 404 not found page following the design.
Where:
Demo is available at Github repo and as a live app through Netlify
Experience and what I learned:
When I started to adjust the design for different screen sizes, I struggled a bit because I started from the desktop design and tried to work my way down in screen size. I changed my strategy and started the other way around, by building the layout based on the smallest breakpoint at 375px. After that, I built the layout for the largest breakpoint at 1025 px and more. This made it easier to adjust the design in between these breakpoints.
That said, I'm going to review media queries, since I was not sure in which cascading order to put the min-widths in the style sheet.
Other than that, I enjoyed working with the requirement to deploy the demo page as part of the workflow. That is something I going to work more with forward.
I also enjoyed working with the README as a part of the workflow, and I got to review Markdown syntax.
- Just HTML and CSS
- Google fonts: Inconsolata, Montserrat, and Space Mono
-
This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.
-
The application/site is created as a "mobile-first" and responsive layout, with major breakpoints at 375 px, 768px, and 1024px and more.
-
Other than the user stories, I added transitions on the button and the link to my github account
- Top 5 free hosting sites with instructions
- Steps to replicate a design with only HTML and CSS
- Node.js
- Marked - a markdown parser
- GitHub @islandskan
- LinkedIn @Sigridur Eggertsdottir
Updates:
Updated the page 2022-10-02
Fixing the view height of the page