The how-it-works section is a component that is built in order to guide users step-by-step on how to use the service provided on the website. I began by first building the hero section of the website. A hero section is very important because it

After building the hero section, I moved on to create a header and a navigation component using the contents given prior to this exercise. Header In order to create a header, I needed to create an entirely new container outside of the hero hero container. In fact, I covered the hero container with another type of container known as main in order to give some separation with the header and navigation components. Inside the newly created header container, I added an image fi

I began by first building the hero section of the website. A hero section is very important because it is the first thing that users will see when they enter any website. It can be said that the hero section is the main component. I start by inputing

Introduction Starting today, I will be clone-building a website known as 'omnifood'. Everything I do for this project will be fictinoal and will not be tranformed into an actual usable website. The exercise was provided by 'Jonas Schmedtmann' who is an instructor for various udemy coding courses and as such all credits and resources goes to him. I will think of myself as a fully employed developer who is trying to build a fictional food service website for a fictional company known as 'omn

DEFINE Define WHO the website is for. Is it for yourself? For a client of your agency or your freelancing business? Define WHAT the website is for. In other words, define business and user goals of your website project. Define the target audience. Be really specific if possible and if it makes sense for your website (this can come from your client). PLAN Plan and

When we want to build a good looking website, it is VERY VERY important to structurally build the entire web application layout. This is an important stage where we need to focus on the look and feel of the web application. Just a simple decision of putting a component in the right location within a web page can make all the difference to how the users would interact with the web application. For the following exercise, I have attempted to create a simple web application that resembles an **ema

A hero section is the area that is immediately shown when the user visits a website. This section of the website should be able to introduce the overall aspects of the website. Key Factors: What does the website offer? Why should users trust this website? What are the benefits? What action should users take next? Today, I attempted to create an example hero section that was provided in my udemy course. As always, I began by creating all the content elements that will be displayed

Although the table component is not used as commonly as other components, it is still important to know how to make one. There may be times when you might need to build a table for various purposes. For my own learning purposes, I attempted to clone-code an example of a table that can be seen on a web page. As always, I followed the common process of creating html elements first. This time, however, I applied a special type of element that is used specifically for creating tables. After cre

Today, I attempted to clone-code a type of layout known as an accordion. An accordion is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of the best ways you can expose content to users who find interest in your website. Additionally, allowing people to have control over the content lets them decide what to look and ignore. Inste

Difference Between UI and UX? UI and UX are familiar terms that people have heard often in various settings. But, what exactly do they mean? User Interface (UI) is the visual presentation of a product, or rather, how the overall product looks and feels like. User Experience (UX) is the overall experience the user has while interacting with the product. UI is graphical interface that ma

What is Visual Hierarchy? As the name states, visual hierarchy is about establishing which elements of a design are the most important ones. We can set important elements on a webpage by figuring out the types of contents in which people are drawn attention to. Overall, visual hierarchy is all about defining a path for users in order to guide them through the page. During the pr

Why Whitespace? Whitespace is simply space given between elements to spread out from each other. Giving just the right amount of whitespace makes designs look clean, modern, polished, and makes it easer for users to understand the overall structure of the webpage. Additionally, whitespace implies invisible relationships between elements which conveys how different pieces of information are related to one another. Where To Use Whitespace Use the right amount of

Using Border-radius Though creating border-radius in various contents may look insignificant, this process is actually very important for the website to look unique. By giving border-radius, we are able to choose the overall mood of our website. For instance, if we do not give any border-radius, the personality of our website would convey a very serious or elegant atmosphere. On the other h

Importance of Shadows Over the years, many developers implemented the effects of flat design and shadows into their products by choosing one after the other. In the recent years, it has been concluded that using shadows has been more beneficial due to depth and better usability. As such, after an era of 100% flat design, using shadows in UI design has been the standard method. Usin

Using Good Icons Although icons are one of the supporting features of a website, they are one of the first things the users look at when they look through any website. As such using a good icon is just as much important as using good texts or images. Thankfully, we do not need to create new icons to use in our website. All the icons that we can use are stored in icon packs that can be foun

Using Good Images Images on website give more diversity to its overall atmosphere. As such, it is important to choose the right image for the website's personality. If you are trying to sell an actual physical product, you might want to use an actual product photo on the webpage for the users to see. If you are trying to convince the users to use your website, you might want to write a co

Choosing a Color Just like text, color is one of the most important parts of what makes an excellent web design. Its role is to get attention, convey meaning, tell a story, and most importantly, create memorable user experiences. Choosing what color to use on a website takes very careful consideration and planning because it can influence how a user interprets when seeing the wbebsite as a whol

Typefaces According to the standard definition, typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed (src. Wikipedia). Choosing a font for text may take some time of thinking because even a slight change in text can change the atmosphere of the website as a whole. For most webpages, developers either use t

Why is Web Design Important? Back in the day, designing and developing were distinct tasks. In order to build a website, there was a 2-step process. Designers would initially create the visual aspects of a website and developers would implement the design using HTML, CSS, and JavaScript code. As time passed, however, it has become very crucial for web developers to not only code, but also to de

What is CSS Grid? CSS Grid is a CSS property for building 2-dimensional layouts in webpages. The main purpose of CSS grid is that a container element can be divided into rows and columns which in turn can be filled with its child elements. CSS grid is very similar to flexbox where we are able to write less nested HMTL and easer-to-read CSS. However, it is important to not think