Dirty markup is a website that allows you to paste in the code that you have been working on. When working in a text editor we all space and indent our content. Dirty markup allows you to paste in HTML, CSS, JavaScript and API’s to take the blank space and indentation. Once the code has been run through dirty markup the document will be cleaner looking due to blank space being taken out. This is a useful tool for when you are finalizing your code to upload to a server. People will be able to see the source code of a website in their web browser and it is always good measure to have things readable.
HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own "sniffs". It is a stream line tool that allows you to validate your code quickly and easily.
Broken link checker allows users to place the URL of the website they are working on. The website scans the website for any links that are empty. Having a broken link on your website will drop the SEO ranking of your website. If you are working with a client and there are broken links on the website, you will be hearing back from the client about the issues. Having broken links results in a 404-error stating that the site can’t be found. This will take away from your credibility and the client may choose a different developer to maintain the website or build new websites for them in the future.
Googles page speed insights is a great tool to make sure your website loads quickly. The user inputs the URL of the website they want to analyze, and you are given an overall ranking for the speed of your website. Google does include information as to what is slowing the website down. The site makes recommendations on the file size of images to improve speeds without reducing resolution. This tool is essential for SEO due to having a slow loading website will reduce your SEO ranking and put your website in a lower ranking with search engines.
Mobiready is a website that allows you to paste in the URL of your website to see how the site looks on different devices. This is a great tool that allows you to adjust your media queries and add new ones. In testing a website for different screen sizes, it can be time consuming adjusting the screen sized in the developer panel of you web browser. Today more websites are being accessed by mobile devices than ever before and making sure your site is accessible to every device will ensure your success as a web developer.
Pixlr is an online based image editor. This is beneficial to have due to Adobe charging a subscription fee to their Photo Shop software. Pixlr does not have all the features that Photo Shop has but it does allow you to crop, resize and add filters to images. This is a quick and easy to use tool and I highly recommend it to web developers.
Affinity photo is a photo editing software similar to Adobe Photo Shop. This software charges a one-time fee of $50 to purchase the software. Affinity is able to be used on tablets and desktops the software works on Android, IOS, Windows and Mac. There are two variant of Affinity, Affinity photo which has Photo Shop features and Affinity Designer that has features of Adobes Illustrator. Affinity Designer is also a $50 fee. The website for Affinity includes many tutorials on how to use their product and have discussion forms to help with any questions you have. If you are a current Photo Shop user, you will not have any issues using Affinity.
Image optimizer allows you to upload an image that you are working with and have it compress to allow your website to load quickly. This is an important aspect of web development due to having a good SEO score. If you website loads and the image is loading after the page loads you will be docked for having to large of images. This is also a useful tool due to being able to change the demotions of the images without having to use a photo editing software like Photo Shop. This tool allows you to be more efficient when adding images to your website.
Uncss is a website that allows you to upload your HTML and CSS documents. The website will scan the tags that are being used in both documents and make you aware of what ones are not being used. You can then choose the have the site removed the unused tags. This is a great tool for when a client gives you a pre-existing project. You are able to use this site to clean up the documents and have it pass validation.
This site is a great resource for anyone working with or wanting to work with WordPress. The website has a blog section to allow users to post issues they are having and fixes. They are also posting topics on new content for WordPress. The website also has articles that revolve around WordPress. Once of the best features of this website is the video tutorials on how to work with elements in WordPress.
Medium is one of my favorite resources to use in web development. Medium has many articles ranging from topics in business to tech. I refer to this site on a regular basis due to new articles being posted on a regular basis. Medium allows users to post information to their website. I have used this website for tutorials on how to add HTML elements to building an Android application.
Fresh brewed is a website for front end and UX-UI developers. The website offers many different news articles for experienced and novice developers. The website has posts on best practices for creating website lay outs and working with different programing languages. The website allows users to sign up for a mailing list for either front end development or UX-UI. The website allows users to submit stories to the team at fresh brew and they will post your information if they find it useful.
This website has many different resources when it comes to HTML, CSS and JavaScript. The website has an online editor, tag library, character codes, templates, code cleaner and cheat sheets. In using CSS there are many new features to improve the look of your website. This site has generators that are time saving resources. When creating a table in HTML and CSS it can be laborious. This site will allow you to choose the number of columns and rows for the table and create it for you. You can then style the CSS on the same page. The website then shows what the table looks like and then lists the code for the table below.
Smash magazine is a robust website that has articles, blogs, books, event listings, and job listings. The articles on this website range from tips and tricks, using new software, design fundamentals, and new features. The articles that are listed on this site allows visitors to post response to the articles and get conversations going about the topic. There are new articles posted daily and referring to this site will keep you in the loop of what is going on in the web development industry.
Code pen is a website that allows users to post projects that they have done in the past. This site is a great resource due to showing the code and the output of the code. You are also able to edit the code in the text editor on the site and customize the project. Code pen is a great tool to find new concept that are being used in the web development industry. The site gives viewers inspiration and ideas for new ideas for websites. Code pen also has a job board that allows developers to find jobs.
Cats who code is an informational website that gives insight to web design and development. The site has many articles for new and advanced developers. The website has information with working with WordPress, UX-UI and web development concepts. The website also has a deals and coupons area that keeps developers aware of current promotions for CMS templates and software discounts that pertain to web development.
Color-hex gives information about colors including the RGB, HSL, HSV and CMYK. This is helpful in coding for a website due to being able to copy and paste the codes into your CSS page. The other benefit to this site is they have pre-build color palates that can help you in choosing the color scheme to use for a website. The website also has a category of web safe colors to make sure the colors you are choosing will display properly in a browser.
Pexels is a website that posts images on their site that are copy write free. In being a web developer, we will have to choose images that a client would like displayed on their website. It is important to ensure the images you are finding do not have any copy write to them or you may run into legal issues. When downloading an image, you are given the option to choose the aspect ratio of the image that you want to download. All of the images download in JPG format making them easy to place in photo editing software.
W3 offers references and tutorials on aspects of HTML, CSS, JavaScript, PHP and Python. The website is broken down into categories and has a nice flow for learning new languages or aspects of the languages. W3 gives you examples with the code that you can view and edit to your liking. Once you have edited the code you can copy and paste it in your text editor for further editing. When selecting a topic W3 provides information as to what is happening and how the code should be structured in your text editor.
CSS-tricks is a great online resource for working with new CSS elements. CSS3 is not finalized in development and there are new elements of it being added regularly. This website has articles on new and existing features of CSS and how to work with them. The website has a nice tutorial section that offers details on the tags used and steps on how to implement them into your project. The site also has a gallery of projects people have worked on. You can use the developer panel in your web browser to inspect the CSS and how they had implemented it. The site also has a job board for people needing help building or editing their websites.
Solo learn is a free learning website that allows you to learn new languages or stay current with programing languages. You are able to create an account and go through course rooms on your computer. They also offer mobile apps for your phone, they support Android and IOS devices. The courses go over the information on the programing language and then follow up with a quiz about what you had read. The quiz allows you to place code in coding examples or they are multiple choice questions. Having an app like this allows you to keep up on coding while waiting for something instead of playing a game on your phone.
Tom Kenny design has a mailing list that allows followers to stay current with the post to the website. The website has many articles posted to the website that cover design elements that are going into websites. The articles discuss in detail of what design elements are being used in certain websites. The web site also has articles on what trends are happening right now in the industry and what Tom feels is important when being a web developer. Tom also discusses ways of getting over mental creative blocks and things that you can do to help you be more creative.