Front end, or front-end web development refers to the skills and technology related to building pages and applications that run in a web browser. The front end development is the part of web development that deals with the user interface(UI) and user experience (UX) of a website. It involves designing and developing the visible parts of the website that users interact with. As a beginner in front-end web development, it is important to learn all of that and follow some best practices to create efficient, and user-friendly web pages.
Skills
There are a number of skills to learn in order to be a typical web designer.
Almost all of them can be learned at a number of mentor sites. One of which is FrontendMentor. That site (and others like it) have a wealth of information and tutorials that teach you the fundamentals and details of all of these skills. After reading this page and exploring FrontendMentor some, I recommend you try one of their challenges yourself.
Another frontend learning site that is recommended is freeCodeCamp. It not only has many good learning resources but it offers some significant certifications that will show what you have learned and practiced to potential employers or clients.
Looking ahead, in our page on Work globally… there is a challenge to do one of the FrontendMentor challenges and capture your process and final work in a GitHub repository that you can show off what you have learned. Keep an eye out for that, as it is a very important step in your professional development.
HTML – Hyper Text Markup Language
HTML is a rich markup language which can be viewed and coded in a simple text editing program. It consists of the text to be presented interspersed with HTML markup tags that specify how that text should be displayed. The filename usually ends in either .htm or .html to indicated that it can be displayed in a web browser. The HTML markup standards have been around since the beginning of the World Wide Web.
Here is an example of a HTML document

As discussed above, all of the above technologies can run on any computer with a web browser. The HTML, CSS files and any embedded JavaScript code can be contained in a text file in a folder on the local computer. You can test this yourself by doing the following challenge:
Instructions:
- Create a New File: Open a text editor like Notepad or a more advanced code editor like Visual Studio Code. Create a new file and save it with the extension
.html
(e.g.,helloworld.html
). - Write Basic HTML: Inside your file, paste the following code:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
3. Open in a Browser: Double-click the .html
file to open it in your default web browser. You should see a simple webpage with the title “Hello World!” and the text “Hello World!” displayed in a heading (h1) format.
HTML5
HTML5 is simply the 5th major revision of the HTML standards that added significant modern features that make some web pages very dynamic.
HTML5 is a significant evolution of HTML, introducing new features that enhance web development capabilities. Here are some key aspects:
- Semantic Elements: HTML5 introduces semantic elements like
<header>
,<nav>
,<article>
, etc., which provide more meaning to the content beyond just visual presentation. Search engines can better understand the structure of your webpage, aiding in searchability. - Multimedia Support: Gone are the days of relying solely on plugins like Flash. HTML5 offers built-in support for audio and video elements, allowing direct embedding of multimedia content within web pages.
- Offline Capabilities: Web applications can leverage features like local storage and application cache to store data locally. This enables functionality even when the user is offline, improving user experience.
- Improved Forms: HTML5 provides new input types like
email
,url
,date
, etc., simplifying user input validation and enhancing form functionality. - Canvas and SVG: Developers can create dynamic graphics, animations, and illustrations directly within web pages using the
<canvas>
and<svg>
elements.
CSS – Cascading Style Sheets
CSS is a speciality language for styling text and graphics. While simple HTML can be coded to create the desired look and layout it can be extremely tedious to do so on a large scale. If you are not consistent then the look and feel will be inconsistent. Furthermore, if you decide to change the way your site looks then you will have a monstrous job to adjust all of the tags from start to finish. The intent of CSS is that the raw HTML page should contain the content only. A single reference in the header of the page is made to a .css file that contains the styling directives. If you choose to change the look and feel, then you can code a new css file and change the reference to point to the new one. A further refinement of that idea is with a content management system (CMS) that stores the content in a database. But, that is another subject for another day.
Here is an example of a CSS document

Advanced CSS Techniques:
While basic CSS covers fundamental styling, advanced techniques unlock more intricate visual effects and control:
- CSS Preprocessors (Sass, LESS): These add another layer of abstraction to CSS, allowing you to use variables, mixins, and functions for more maintainable and reusable code.
- CSS Frameworks (Bootstrap, Tailwind CSS): These pre-built libraries provide pre-defined styles and components, accelerating the development process and ensuring consistency across your web project.
- CSS Grid and Flexbox: Techniques like CSS Grid and Flexbox offer enhanced flexibility in web page layout. You can define complex layouts with rows, columns, and flexible positioning for a responsive design that adapts to different screen sizes.
- CSS Animations and Transitions: Add interactive elements to your website with smooth transitions and animations triggered by user actions or events.
JavaScript – A procedural programming language for web pages.
JavaScript is a programming language inspired by Java that is meant to run inside a web page. All of the actual work is performed by the web browser itself.
Example of JavaScript

JavaScript Frameworks and Libraries:
JavaScript frameworks and libraries build upon core JavaScript functionalities, providing pre-written code and tools for specific tasks:
- Frontend Frameworks (React, Vue.js, Angular): These frameworks offer a structured approach to building complex user interfaces with features like data binding, component-based architecture, and state management.
- JavaScript Libraries (jQuery, Lodash): Libraries provide a collection of pre-written functions for tasks like DOM manipulation, animation, asynchronous operations, and utility functions. They simplify common JavaScript operations and promote code reusability.
HTTP – Hypertext Transport Protocol
Sometimes, that is all that is needed. However, that does not make any use of the internet or the World Wide Web. The “World Wide” part of the Web indicates that computers all over the world that are connected to the internet can work together to present a very dynamic universe of information and entertainment. In order to connect your local computer to any web page in the World Wide Web you simply enter a web address such as http://MichaelKentBurns.com/HelloWorld.htm into the search or address bar of your browser. The formal name for this address is a URL. See the wikipedia page A uniform resource locator (URL) for details. The first four characters stand for HyperText Transport Protocol which is one of several protocols as explained in the URL page. After that the ‘:’ indicates the beginning of the location of the resource which usually starts with ‘//’ followed by the name of the resource. Try it yourself.
What happened when you pressed return after that address is that your browser used that resource information to find the appropriate web server somewhere in the world (MichaelKentBurns.com) and request a specific page (HelloWorld.htm). A web server program running on that computer located the file for that page and other associated information and sent it back to your browser running on your computer. Your browser then formatted it according to the HTML rules and you then see the results.
If, however, you have saved a web page on your local hard drive you would access it using the ‘file’ protocol with an address something like this: “file://C:/Michael/HelloWorld.htm“
The details of that is for the next page (Back end web).
Want to see web development concepts come to life? Dive deeper into the code behind this post! W3Schools (https://www.w3schools.com/) offers a fantastic interactive learning environment where you can experiment with HTML, CSS, and JavaScript. Play around with live code snippets, tweak them, and witness the results in real time. This hands-on approach is a great way to solidify your understanding and unlock your creative potential in web development!
Before you move on, remember this roadmap to your career
A friend of mine who is a reader of this site has contributed a roadmap to a Front-End development journey.
i was introduced to front end web development, HTML, CSS and JavaScript. this site shapes me to be a better web developer.
It is a very good experience for a beginner to learn on this site.
This presentation of the front end will allow us to offer users an interface and a quality experience through HTML, CSS and JavaScript.
After a first exercise in HTML, a presentation of CSS and JavaScript and understanding of Hypertext Transport Protocol, furthermore we get road map to a front end developer journey to conquer the career of develop web.
Thank you for this great experience that you offer us.
This site is well organised about giving information to beginner in front end developement follow this steps when you’re leaning and you’ll be a good developer who knows what to do and why.
I’m so glad to learn web development on this site!
All lessons are orderly and it’s what that make us learning step by step till at the end…