The first ever step to learn web development is learning HTML and CSS. These two are the basic two coding syntax, that every web app is based upon.
Most people find learning HTML and CSS a tough task. The major reason is availability of too much information everywhere. It is quite confusing to decide where to start!
Here’s a collection of top resources to help you get the right and important information on learning HTML and CSS:
W3Schools Online Web Tutorials
This is the go to place for not only the beginners to start learning HTML and CSS, but also for the experts to refer to whenever they cannot recall a tag. Its by far the most comprehensive platform for the beginners to learn and practice HTML and CSS. It takes you from the very basic and teaches you all the tags with practices and examples.
CSS Cheat Sheet
If you are confused by a huge number of elements here and there, this cheat sheet will help you. It allows you to keep close track of elements and proves to be an excellent source for novices with CSS. The newbies may find the task of remembering various tags and technical terms quite intimidating. The CSS cheat sheet will prove very helpful for you. It will keep things bookmarked and even print things out so that you can locate the elements you need, without wasting time.
Link to PDF: https://www.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf
HTML Cheat Sheet
This cheat sheet is nothing less than an A-Z for HTML. It encompasses a complete list of all necessary HTML elements combined together with live previews, code examples, and descriptions. The tags can be organized alphabetically or by category. The cheat sheet can also be downloaded as a PDF to be referred to later.
Brainchild of Chris Coyier, CSS-Tricks were officially launched in the year 2007. The website was dedicated to all things CSS. Presently it has been extended to accommodate much more. It includes a huge number of helpful information and tutorials related to HTML and CSS. This is certainly worth trying out.
CodePen’s Yearly Top Pens
This is a yearly CodePen collection. It makes for an excellent approach to learn from the cream of the crop. The industry experts deem dissecting demos as one of the best ways to learn CSS/HTML. Yes, you need to slice up cool demos discovered from time to time. CodePen’s yearly Top Pens will help you do just that! These demos range from very cool to something that seemed impossible. The integrated UI of CodePen is very convenient for diving deep into the code.
Although easy to learn, CSS can be challenging to master! CSS Wizardry by Harry Roberts encompasses some of the best articles on the essentials of scripting scalable and sustainable CSS. One can easily master the toughest parts such as refactoring and BEM methodology using this resource.
Web Design Weekly
This is very helpful in staying up to date with the latest HTML and CSS developments. With constant developments taking place with HTML and CSS, it is crucial to keep abreast with the latest features and approaches. This email newsletter serves as the best resource for the same. It is available every week.
Develop Non-rectangular Layouts Using CSS shapes
Going through the tutorial by Soueidan will let you learn how to make non-rectangular layouts. The tutorial is simple, clear and integrated with loads of examples. Widely reckoned for her crystal clear and detailed style of teaching, Sara Soueidan will perfectly explain the use of CSS shapes and even address any issues challenges that you might encounter with. These tutorials are available with examples that you can see on GitHub.
Responsive Design Weekly
This tool will help you receive very valuable, responsive tips sent to your inbox on a weekly basis. Most web designing companies and web designers consider responsiveness as a vital part of their toolkit. It helps in keeping up to date regularly. Interestingly, Justin Avery spends several hours each week in curating the most efficient, responsive content for web design. He also interviews, industry front-runners, and directs the information as newsletter each Friday.
Jen Simmons Lab
Right from opportunities to explore new unique layout potentials to learning about the latest CSS properties and ways to use them practically, Jen Simmons lab is a perfect place to get imaginative with CSS.
These resources will not only help you learn HTML and CSS from the very basics, but also teach you the more practical and advance guides required in the industry. These will enhance your comprehension of the actual projects and also keep you updated with the industry trends.
If there is another resource that you find useful in learning HTML and CSS that I have missed, let me know in the comments. I hope you find these resources useful.