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…
This content is an excellent introduction to front-end web development. It clearly explains the basics of HTML, CSS, and JavaScript while providing useful learning resources. The content is well-structured and enjoyable to read. It also highlights modern tools such as CSS and JavaScript frameworks. I particularly love front-end development because it allows for the creation of dynamic and interactive interfaces. React.js is my favorite framework as it makes building reusable components easier and enhances the user experience. This is an enriching and motivating read for anyone looking to get into web development!
Thanks for reading this page and for your comment.
Keep going!
Learn much.
Be inspired to create great work!
Thank you for your comment, and welcome to our site.
You will meet other students here, and I believe you may know them already.
Keep reading and you will learn much.
This was an interesting and helpful read. It provides a solid general understanding of how the web is structured from a front-end perspective
This page gave me a clear understanding of front-end web development, and I believe it will help others as well. The explanations of HTML, CSS, JavaScript, and HTTP are simple and easy to follow for beginners. It’s a great place for us to start learning and grow step by step in web development.
What a concise and helpful presentation. It is interesting to learn web development on this platform. This is a wide, well-structured front-end presentation. I can’t wait to learn more.
this was a refreshing and insightful read. It game me a clear overview of how the web is organized from a front-end perspective, and i truly appreciate the way it simplifies complex ideas.
Resources like this make learning both practical an inspiring
I would like to express my point of vue about this front end web, in this part I lean that the HTML describes the structure of web page semantically and originaly, and the CSS is used for specifying the présentation and style of a website.
Finaly, the JavaScript add interativity to web pages also allowing for animation and dynamic cont.
Such a great and wide presentation and introduction of what is Front-end development.
Now with this in mind, I look forward to what I’ll learn through this initiative.
I would like to express my point of vue about this front end web, in this part I lean that the HTML describes the structure of web page semantically and originaly, and the CSS is used for specifying the presentation and style of website.
Finaly the JavaScript add interativity to web page also allowing for annimation and dynamic.
Thank you for this article! I really enjoyed the part about JavaScript and frameworks like React. The explanation about HTTP and URLs is very clear. I will also practice on W3Schools and follow the Front-End roadmap to progress step by step.
I really enjoyed reading this article! It makes front-end development clear and interesting, and I’m excited to explore more.
I really enjoyed reading this article! It makes front-end development clear and interesting, and I’m excited to explore more.
Really clear and helpful content. It helps me organize what I’m learning and move forward step by step.