This web app was made to provide content & links to resources for beginner web developers like my self to find reliable recources & information for beginner web developers. The links provided over technical information on HTML, CSS, Js & many more topics. There are also links provided to external resources which include books, learning platforms, & youtube tutorials.
The goal of the website is the have one site that provides one site for all the recources needed the get starting in codeing.
I wanted to incorporate a unique design for the website & achieve & modern look feel that would resinate with current design trends, such as using high contrast colours with gradients, dark tones on pages while trying to keep a clean UI. I did not create any wireframes or mockups, with no experience in doing a mockup design,I made the decision to design and make changes as I go. I took inspiration from other websites and developers to create a website unique to me. This in hindsight this approach has cost much more time than if I originally made a design before starting to develop the site. However, this gave me more opportunities to experiment with different designs & approaches to UI & UX.
The features are very basic now with top & bottom navigation with links. There is a Mobile dropdown menu which will provide users access throughout the site.
- Implement a back end technology to enable email sign up & the ability to comment on blogs & share to social media.
- Implement a server-side rendering to retrieve popular articles the site and maybe other; possibly CSS tricks or other great sites.
-
HTML 5
-
Javascript
There is only a very small amount of javascript for the navigation menu function on smaller devices. There where no Libraries or frameworks used.
- Vanilla CSS
I did not use any CSS libraries or frameworks in this project as I felt it would be a great learning opportunity to use vanilla CSS. This provided me with a greater understanding off CSS and all it has to offer.
- SCSS
I wanted to use a file structuring method rather than one main CSS file & to try to introduce modular CSS components to the site. Although I mainly just wrote CSS it was great to learn about sass and its benefits.
- Google Fonts
I used one imported font from google fonts and one other to use locally that I downloaded from google fonts & converted into a smaller file size. I think that may have been unnecessary as it would have been easier to use google CDN alone.
My main testing was done using Firefox developer edition browser & visual studio code editor as I think Firefox offers great features for CSS & specifically when using CSS grid. I also tested across different browsers such as chrome & safari to see if there were any issues, the only ones I came across was when I was using safari on my mobile. Such as, on the main page, cards are set to hover but the function does not work well on safari mobile.
I used visual studio code with 4 plugins to help with development.
- Beautify ( To maintain code indentation )
- Live server ( This reloads the page when changes are made to the code )
- Sass live reloader ( This reloaded the page when changes where made to sass & compiles sass files into one main CSS file & provied fall backs for older
browsers. The vs code folder contains the json file needed for the compile the sass. - Code snape ( I used this to take a picture of my folder structure )
The main issue I came across the was positioning of elements using CSS grid and later flexbox. I tried to implement both throughout the site to provide me with a
a better understanding of when to use either or both.
- Font sizes
- Colors & accessibility in general for screen readers using SVG icons & links
- Loading assets locally such as fonts & icons for the project, rather than using google fonts & Font awsome
To check for HTML errors I used validator.org. There were warnings on the hyphens in the comments of the body but no errors. To check the CSS I used Jigsaw.org. Warnings were found for css falback rules relating to webkit rules applied but no errors.
I used Github intergrated with visual studio code for source control & deployment. I mainly would write & test the CSS changes in Firefox developer tools before comiting to Github.
Images
I used 3 images from the Unsplash website credited below. The rest of the icons used throughout the site were from Iconmoon
https://unsplash.com/@lukechesser // used on the main page, the blue background images. https://unsplash.com/photos/Yui5vfKHuzs // Used on the main page, the person looking out to sea. https://unsplash.com/photos/xrVDYZRGdw4. // Used on the getting started page as a blog post image.
Icons src: https://icomoon.io
External code used.
- For the mobile menu opening and closing effect, Javascript & CSS used. Youtuber & developer Dev Ed. //https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q
- For the card effect on the learn code page. Chris Coyer, developer https://www.youtube.com/watch?v=NXtz59SJYfM
- For the Codepen integration on the learn code page the code is available from the Codepen webpage https://blog.codepen.io/documentation/embedded-pens/
- The code in code pen belongs to Louis Hoebregts
- For the mobile menu bar opening effect W3 Schools https://www.w3schools.com/howto/howto_css_menu_icon.asp
Recources / information
To help me get a better understanding of CSS I used 3 resources. CSS tricks https://css-tricks.com/snippets/css/complete-guide-grid/ Jen Simmons https://jensimmons.com CSS grid & design W3 Schools, for basic syntax & infornation
The main page link is https://ciaran-toner.github.io/code-devs.io/
To access images of the site you can find them in the media folder.