The explosion of the Internet of Things has required embedded systems engineers to interact more and more with the Internet at large. As a result, they have had to develop new skills and acquire new knowledge in order to solve evolving challenges and projects in the field. Because of the many technologies used for web development, as well as their constant change, the learning curve to become proficient with them can seem long and overwhelming. However, there is no need to worry, because nowadays there is a vast ocean of information, courses, and training that you can take to become an expert in a short time.
This article will outline some knowledge that can serve as a starting point for all those electronic (or related) engineers who are beginning the journey through the world of web development, especially for those who work on embedded systems solutions.
Introduction
Every day the number of websites increases, which is why web development has become one of the most in-demand professional careers today. It consists of creating user interfaces (the front-end) that interact with servers (the back-end) on the Internet or even the Intranet (local networks).
It’s essential to differentiate between web design and web development:
- Web designers are those who are responsible for creating the website’s look and feel. They’re usually graphic designers (or related) who create the website’s design with programs such as Adobe Dreamweaver, Figma, etc.
- Web developers are involved in implementing the web design using the languages used by web clients (or web browsers such as Chrome, Firefox, etc.), which are HTML, CSS, JS.
Ideally, every web developer should know web design concepts. However, when it comes to developers who spent most of their education and career designing electronic diagrams, assembling circuits, or writing firmware, graphic design is not typically within their wheelhouse.
In this article, we’ll give an overview of the components that make up web development and share some resources and tips with you that can be helpful tools in achieving a good web design.
First sight of web development.
Web development is mainly made up of three languages:
- HTML
- CSS
- JS (JavaScript)
Although these are different languages, we should analyze them as one. It’s like learning a foreign language; you need to know the verbs, adjectives, nouns, grammatical rules, etc. Can you imagine what English would be like if we only knew verbs? Even if we knew all of them and their possible combinations, we most likely wouldn’t be able to communicate with each other.
Likewise, with web development, it’s necessary to know all of its elements to use it effectively. Fortunately, web development only has three elements; following the example of the English language, we can make an analogy as follows:
HTML would be the nouns since they are the elements that help us name or identify the things we know. CSS is like adjectives because they complement the noun by giving it characteristics or attributes, and JS works like verbs because these describe the actions.
HTML
HTML (HyperText Markup Language) is a standard that has been around since practically the beginning of the Internet (along with HTTP Protocol) for creating websites. Unlike the languages we embedded systems engineers know, however, HTML is a markup language, not a programming language.
It consists of a series of elements or tags that create the content and structure of web pages.
Making an analogy building construction, HTML’s job would be to create all the metal frameworks, foundations, walls, roofs, etc. This structure rarely changes. To illustrate, the United States Department of Defense has been a pentagon since its foundation; internally, the layout might have changed, but it remains the same structure externally.
Therefore, building out HTML is one of the most relevant jobs during web design because it’s the underlying structure of the whole site.
HTML Syntax
The syntax of HTML elements is straightforward, as Figure 2 demonstrates.
- Element: Everything including the opening and closing tags.
- Opening Tag: Starts the element and places the element’s name inside the ‘<>’
- Content: Content of the element, can be text or even other nested elements.
- Closing Tag: It’s the same as the opening tag. The only difference is that it contains the ‘/’ symbol before the element’s name. The elements without content don’t include this, such as the tag <br>, representing a line break.
More information about HTML elements is here.
HTML Semantic
The word semantic, according to the Cambridge dictionary, refers to:
Connected with the meanings of words.
In web development this term is used to refer to the fact that most HTML elements have a meaning, like:
- <p></p>: This is a paragraph.
- <section></section>: This is a section.
Using the semantic elements of HTML is considered a good practice. Giving meaning to each of the parts of your website makes it easier to understand each of its components. Besides, this allows the design to become modular, allowing you to reuse those modules in other website features or projects.
You can find more information about the semantic elements in the following link.
Useful Tools
Images Free
One of the most valuable things found in web pages are the images. These give us a visual context of what our site represents or wants to express. However, finding the right image that is also free to use can be difficult. Below, we list some pages that offer pictures provided by the community, and you can use them for free in your projects.
Image Compressor
Whether our web page is on the Internet or embedded in a microcontroller (especially in this case), the size of the images is an essential factor; the heavier the images, the more memory is required, and the page load time becomes slower.
That is why we list below some image compressors that reduce the image size without sacrificing quality:
One other thing to consider is ensuring that the images are in the proper format. Using .jpg images for photo quality pictures is preferable while using .png for vector-based images will give you better results. Even better, serve the images in a next-generation format, such as WebP, to get the best results.
HTML Validator
Finding errors in HTML may be a bit tricky. Nested elements could be a problem if we forget to close some tag of an element. Here are some tools that can help you check your HTML code.
CSS
CSS stands for Cascading Style Sheets. Its function is to describe how HTML elements are displayed on the website, adding visual styles and presentation to those elements. It consists of rules written by the developer with which the font, color, spacing, layout, etc., can be modified.
Continuing with the construction example, CSS would add the building’s finer details, including doors, windows, paint or decorations, flooring, furniture distribution, etc. All these details will vary between web pages.
The styles won’t be the same for a smart greenhouse site as for a clothing store site. This is where it can get complicated for us embedded systems engineers who lack an artistic background. Don’t worry, though. In the following sections, we’ll show you some key concepts and tools that will help you write some good-looking CSS without being a descendant of Van Gogh.
CSS Syntax
The syntax of CSS, also known as CSS rules, is shown in figure 3:
- Selector: Specifies which elements the styles will be applied to. These can be HTML elements (p, h1, div, etc.), classes (.btn , .spacer, .big) or IDs (#btn-login).
- Style: Feature applied to the selected element. There can be as many as you want; each one is separated by a ‘;’. It consists of two parts:
- Property: Name of style to be applied.
- Value: Value of the style to be applied.
Box Model
The very first thing we must understand is how the representation of elements in HTML works. We should imagine that our website is built with boxes and that each one can contain more boxes inside. In HTML, all elements have this model, called the box model.
Let’s start by analyzing web pages we see on the Internet and imagine the model of boxes. For example, when we open our favorite website, we can immediately determine the boxes that compose the home page. Figure 4 shows an example of this.
This skill seems obvious, but from my point of view, it’s one of the most important. That’s because this thinking allows us to model our web system projects more effectively since layouts are designed based on this type of model.
Box properties
Now that we see those imaginary boxes on the web pages, we need to know their characteristics. As we saw earlier, all the components of a web page are rectangles (or squares sometimes), and each of these elements has the properties shown in Figure 5:
- Content: The part found inside our HTML elements, such as text, images, etc.
- Border: A line that marks the boundaries of the visible area of the HTML element.
- Padding: Invisible space around the content, but within the element itself.
- Margin: Invisible space outside the element. It’s applied as a space between elements.
As an example, we have the following image in which you can see some boxes (paintings) with CSS box properties.
Box Types
Just like when shopping online, we receive boxes of distinct sizes depending on the content. In web design, there are also different types of boxes, each one with unique functionalities.
To choose the type of box, CSS uses the property display. The complete list of values for this property is here.
The most common box types are:
- Block: Occupy all available space horizontally
- Inline: Occupy only the necessary space horizontally (note: horizontal margins and paddings are not applied to this type of elements).
- Inline-block: Occupy only the necessary space horizontally and block type properties (margins and horizontal spacing) can be applied.
Flexbox
Flexbox is one of the modern CSS functions used to generate 1-dimensional layouts.
Basically, its function generates proportional empty spaces between elements inside a container, making it easier to align elements horizontally and vertically.
Flexbox is the perfect replacement for the float properties (more information about that in the following link, All About Floats).
Personally, when I started learning CSS, one of the things that made me hate it was all the chaos you had to do with float properties to align elements. Fortunately, if you are a beginner nowadays, you won’t have to suffer from this since Flexbox solves these problems with float properties.
Learning Flexbox is straightforward, but it requires a more detailed explanation. Here is a link to an excellent tutorial: A CSS Flexbox Tutorial for Beginners – What It is and How to Use It.
CSS Grid
CSS Grid is one of the newest CSS features, and its primary function is to create 2-dimensional layouts. Essentially, CSS Grid divides a container into columns and rows filled with the container’s child elements in any order desired.
One of the advantages of using CSS Grid is that it makes HTML code easier because it doesn’t require as many nested objects.
It’s important to keep in mind that CSS Grid does not replace Flexbox. Instead, both work together to create layouts. Here is a link to learn more about CSS Grid: A Complete Guide to Grid.
Media Queries
Media Queries is a handy tool to make our web designs responsive. In other words, the content is adapted to the different types of screens of a cell phone, tablet, laptop, etc., in order to provide the best presentation possible.
This places screen size limits in our CSS code, and between each limit, you can modify the CSS rules that apply and overwrite the original ones.
In order to effectively apply media queries, it’s necessary to understand the responsive design models. For that, I leave this link, The State Of Mobile First and Desktop First.
To learn how to apply them in our code, I leave this additional link A Complete Guide to CSS Media Queries.
SASS
SASS is a tool that gives CSS some superpowers. It’s a CSS preprocessor, so it adds features that CSS does not have natively (functions, variables, nested rules, macros called mixins, etc.).
This is one of my favorite tools for working with CSS. It feels more like one of the programming languages that we embedded systems engineers know.
I strongly recommend that you learn this tool because it saves time when creating CSS rules. It will also keep the maintenance and growth of our website very orderly. On YouTube, you can find many resources to learn it.
Previously it was a bit chaotic to install SASS, but nowadays, it’s easy to do with a Visual Studio Code extension, and that’s it. Many CSS frameworks use this tool, so it’s very beneficial to learn SASS to optimize the frameworks’ code.
Useful Tools
Typography
Typography is one of the key parts of web design because it can give the site some personality. Currently, there are a lot of fonts that we can use on our web pages. Below, I list some of the most popular ones, along with some links to download them for free.
Serif: This is commonly used to create sites with a traditional or classic look and feel. Some of the most popular fonts are the following:
- Aleo.
- Cardo.
- Cormorant.
- Lora.
- Merriweather.
- Playfair Display.
Sans-Serif: This is used for websites with a more modern look and feel. It’s a clean and straightforward font which makes it a perfect choice for beginners. The most popular are the following:
- Inter.
- Lato.
- Montserrat.
- Open Sans.
- Poppins.
- Roboto.
- Work Sans.
Colors
In addition to typography, colors are also a big part of the personality of a website. For us engineers, it can be challenging to choose which colors to use (in my case, my brain only knows the RGB colors), so I have listed some links below that may be helpful.
Open Color: This site gives us some helpful color schemes when using tints and shades of a color.
Flat UI Colors 2: Contains a wide variety of color palettes that we can use for primary and accent colors.
Tailwindcss Colors: Tailwindcss itself is a robust framework for front-end applications; its color palette is quite nice, so that’s why I’m adding it to this list.
Coolors: This site has many utilities, a color picker, pick a palette from a photo, gradient creator, and color schemes.
Tint & Shade Generator: A convenient tool to generate tints and shades of colors.
Icons
Icons help us give more context to the text of our web pages, and nowadays, they are a widely used feature. Here are some links where you can find free icon sets.
Top 5 of lightweight frameworks
Bulma
Bulma is my favorite framework. It’s effortless to use and has very flashy styles; besides, the documentation is very complete.
It’s a modular framework, so you can add only the components you need in your application, which makes the resulting CSS very light.
The most recent version to date is 0.9.3, and the weight of the files is 202kb with all the components, which is reduced by just adding the desired ones.
Pico CSS
Pico CSS is a framework based on the semantic elements of HTML, so it’s not necessary to add classes to the elements. This makes our HTML code very easy to understand. The styles are elegant and are made in pure CSS, although you can use SASS too.
The latest version is 1.3.3 and has two variants. One has all the framework elements with a weight of 50kb, and the other is a slim version with only the essential features at 35kb.
Pure CSS
Pure CSS is a very light framework that includes the most common components (buttons, forms, tables, menus, grid, etc.). It’s possible to add only the elements used to the final CSS file.
The most current version to date is 2.0.6, and the weight of the entire framework is 17kb.
Milligram
Milligram is a minimalist framework with subtle colors, and just like Pure CSS, it only has the essential components. It’s effortless and fast to use.
The recent version is 1.4.1 with a weight of 9kb.
Skeleton
Last but not least, we have Skeleton, which is not a framework to tell the truth. It’s a boilerplate designed for when all the utilities of a framework are not required.
It’s a tool that gives basic styles to the most common HTML elements and a Grid system, which is often more than enough for proofs of concept or small developments.
The most recent version, 2.0.4, has not changed since 2014 (maybe that’s why it’s a skeleton) and consists of two CSS files with a total weight of 20kb. These weigh 8kb if we minify the files
I recommend looking at this page to be aware of the new CSS tools that are constantly emerging. It’s updated every year, so in a few months, we’ll see the status of 2021.
References
Most of the content comes from my own experience, but I would like to acknowledge Jonas Schmedtmann, who I have learned from his online courses and took some analogies from those.
Wrapping Up
Hopefully, this article will be helpful for those starting out in web development or as a handbook for those who have been at it for a while. In the second part, we’ll talk about JavaScript, so stay tuned.
We’d love to read your comments on your favorite front-end technologies or your best tips for beginners. Also, if you have any questions, comments, or suggestions for new content, don’t hesitate to contact us directly at sales@netburner.com.