An introduction to HTML, CSS and Javascript in web design
by Cindy LuoWhat is HTML, CSS and Javascript?
HTML, or HyperTest Markup language, is used for the overall structure of web pages. HTML allows us to insert content such as text, images, headings, links and more. Think of it as a skeleton—without HTML you would not be able to keep other parts of the website in their place.
CSS, or Cascading Style Sheets, controls the aesthetics of the web page. It allows for fonts, colors, layouts and more. These aspects are important, because if websites were unappealing readers might be uninterested in exploring and staying on the page or possibly find it unreadable. Formatting allows the information to be more readily accessible and easier to navigate as a reader. CSS also helps the webpage adapt to different devices—a new look for every different-sized screen. Without this feature, a website’s usefulness might be limited, or overlooked by those using incompatible devices.
Lastly, Javascript manages the dynamics of a web page. Responsive features like animations and real-time updates are possible because no page refreshes are required. Submitting forms and interacting with the page become possible, creating a more immersive experience for the user.
A combination of these three languages—HTML for structure, CSS for style, and JavaScript for interactivity—allows for a fully functioning, dynamic webpage. Together, they form the infrastructure of modern web development, allowing developers to build engaging and user-friendly sites that meet the needs of diverse audiences.
Why is learning this important?
If you are interested in becoming a front-end developer, a user experience or user interface (UX/UI) designer or even a full-stack developer, HTML, CSS and Javascript are essential. Nearly every web development project relies on knowledge of these languages—from simple web pages to complex web applications. Companies nowadays are looking for individuals with technical skill sets as both a web developer or engineer who works on both the front-end and back-end of a website or web application (a full stack developer), and learning these languages will advantage anyone interested in these careers.
If you are not so interested in becoming a web developer, these languages can still be very useful. By learning these skills you can develop your own pages—a portfolio, a personal page, or a project website. Mastering HTML, CSS and Javascript can come in handy often, particularly when the presentations of important information to audiences is critical. Additionally, developing and designing your own website is fun!
If you want to get started, check out my next blog post!
Getting Started with Online Training Resources
So now, you want to get started! As a web development beginner, there are numerous resources available to help you learn. Online platforms like Codecademy, freeCodeCamp, and W3Schools offer interactive courses that guide you through the basics of each language.
I started with freeCodeCamp, a free course that takes a couple of months to finish. It allows for a hands-on approach, helping you build actual projects while learning. There are certifications that you can obtain through this course, which you can add to your resume to help you find future work opportunities!
Learning on Codeacademy is more structured, so if that’s what you prefer this would be great for you! Some content in this course is free, but a pro subscription allows you to take quizzes, embark on projects and personalize your learning journey while also preparing for success in qualifying for certifications.
W3Schools is another great resource for explanations and examples of HTML, CSS, and JavaScript. If you are stuck on a project and want help for a quick solution, this is the place to go! It is also great for revising concepts.
As you progress and become more advanced, you can look at resources such as courses on Coursera, Mozilla Developer Network web documents or YouTube videos. These allow for a deep dive into web development after you’ve mastered the basics. Look for high ratings and reviews on Coursera. Coursera courses are well-structured and are good at reinforcing your learning.
The Mozilla Developer Network (MDN) web docs provide documentation on the three languages, also providing tutorials and practice. Youtube channels such as Traversy Media, The Net Ninja, and Academind also offer comprehensive resources on web development with a range of difficulties.
Joining communities such as GitHub or Stack Overflow will provide you with support and inspiration. On GitHub, you can explore open-source projects, contribute to repositories and start your own projects. By gaining hands-on experience in this way, you can accelerate your learning. Stack Overflow is invaluable for troubleshooting and getting answers when you run into a problem. The community is active and willing to help, making it a great place to learn from others’ experiences. Don't hesitate to ask questions, but also take the time to read through existing answers—there’s a wealth of knowledge already available.
