DEV Community: Patricia Cosma

Mastering Search Bars with Flexbox: A Step-by-Step Guide

Patricia Cosma — Sat, 04 Feb 2023 16:33:13 +0000

In the world of web design, creating functional and visually appealing user interfaces (UI) is a key aspect of a successful website.

One crucial component of UI is the search bar, allowing users to quickly find what they're looking for (we've all been there!).

In this blog post, we'll be diving into the basics of flexbox by showing you how to use it to build a search bar from scratch. This step-by-step guide will help flex (wink) your UI skills and equip you with the knowledge to build a search bar with ease.

Prerequisities

In order to be able to understand this properly, you will need to be familiar with what flexbox can offer. If you need to refresh your memory, check this guide. To be able to better understand this, I suggest to open your prefferred code editor, enable the live preview & code along.

So now let's code!

1. HTML structure

First things first. Let's think about how we want it to look. Our search bar will contain an icon (🔎 ), the actual box where the user can type in and the search button.

<div class="searchBar">
        <img class="icon" src="./img/search.png" alt="search">
        <input class="searchBox" type="search" name="search" placeholder="Enter your search here">
        <input class="searchButton" type="submit" value="Search" name="search">
</div>

p.s.: your src attribute might be different (as my icon is set up locally), so feel free to also add a link.

All these 3 elements together will form the final search bar - that's why they are placed inside the main class searchBar.

2. CSS structure

The next step is to design each of the elements above, starting with the class searchBar.

Let's start by setting the display property to inline-flex, which makes the element a flex container and allows its child elements to be laid out in a row. The flex property will be set in such way that the element will take up all the available space (1), it will be able to shrink (1) and it will have a minimum width of 300px.

.searchBar {
    display: inline-flex;
    flex: 1 1 300px;
}

Next, it's the border-radius property. We'll set this with a radius of 10px, giving the element a rounded corner appearance. The border property sets a solid border of 1px width in grey.

.searchBar {
    display: inline-flex;
    flex: 1 1 300px;
    border-radius: 10px;
    border: 1px solid grey;
}

We will also add the overflow property to hidden, to make sure that if the contents of the element overflow its boundaries they will be hidden.

.searchBar {
    display: inline-flex;
    flex: 1 1 300px;
    border-radius: 10px;
    border: 1px solid grey;
    overflow: hidden;
}

Our .icon will be the easiest to style, with its width and height set at 24px and a padding of 0.8rem.

.icon {
    width: 24px;
    height: 24px;
    padding: 0.8rem;
}

Next in style is our .searchBox. By setting the border property to 0, we are telling the browser to remove any border that may be present on the element. The flex property is set to 1, which means that the element will take up all the available space within its parent container. This makes the .searchBox element flexible and adaptable to the size of its parent, allowing it to fill up any unused space and create a responsive design.

.searchBox {
    border: 0;
    flex: 1;
}

To finish up our code, let's add the styling for the .searchButton as well.

.searchButton {
    color: white;
    background-color: darkcyan;
    border: 0;
    padding: 0.8rem;
    border-radius: 8px;
}

That's it! Easy, right?

Conclusion

To sum up, creating a search bar with flexbox is a straightforward process that involves setting up the appropriate HTML structure and styling with CSS.

The step-by-step guide provided in this post should help you understand how to use flexbox to build a responsive and visually appealing search bar. With the techniques and code snippets shared in this post, you should now have the tools and knowledge you need to start building your own search bars with flexbox.

Whether you're a beginner or an experienced web developer, mastering the use of flexbox is an essential skill for creating modern, responsive web designs. So, give it a try and start building your own search bar today!

Cover photo by Christopher Gower on Unsplash

Selectors: Specificity in CSS

Patricia Cosma — Thu, 26 Jan 2023 12:20:06 +0000

As you write more and more code, you might observe that more than one CSS rule can be applied to an element.

By mistake, you can also double-style an element. In that case, which rule will be applied?

For situations where conflict arises, CSS applies a set of rules and rank them in a specificity hierarchy and apply the 'winner'.

Specificity Hierarchy

There are 4 categories for this hierarchy:

1. Inline styles
This looks and operates much like CSS, but with a few differences. Inline styles affect the tag they are written in directly, without the use of selectors, which are needed in CSS.

/*example*/
<p style="color: green">

2. IDs
This type of selector matches an element from your code depending on the value of the ID selector.

/*HTML*/
<div id="footer">Contact me</div>

/*CSS*/
#footer {
   display: flex;
}

3. (Pseudo-)classes & attributes
A pseudo-class is used to define a special state of an element such as active, focus, visited, hover and so on.

/*when the link is clicked*/
a:active {
   color: pink;
}

A class would be defined just as the ID selector, with the difference that its value would be based on the class selector.

/*HTML*/
<div class="container">Hello</div>

/*CSS*/
.container {
   font-size: 2rem;
}

You can also style your HTML elements that have a specific attributes or attribute values.

/*HTML*/
<a href="https://website1.com">Website 1</a>
<a href="http://website2.com" target="_blank">Website 2</a>

/*CSS*/
a[target] {
   background-color: blue;
}

4. (Pseudo-)elements
CSS pseudo-elements are used to style specified parts of an element.

h1::first-letter {
  font-weight: 900;
}

On the other hand, elements can be styled as simple as they come in your HTML structure.

h3 {
   border-radius: 10px;
}

Calculate Specificity

Start at 0
Add 1000 for each inline style (this always has the highest priority - using the !important rule will override the inline style)
Add 100 for each ID value
Add 10 for each (pseudo-)class or attribute value
Add 1 for each (pseudo-)element value.

Example

h1.p -> 1 + 10 -> 11
h1#title -> 1 + 100 -> 101
<h1 style="color: red"> -> 1000 -> 1000

Want to see more examples and have some exercises?
Check this and save it for later. 😍

If you enjoyed this post, you can get more relevant development content by subscribing (no spam!) to my newsletter on my website.

Thank you for reading!

Cover photo by Afif Ramdhasuma on Unsplash

How To Bake With CSS: Units of Measurement

Patricia Cosma — Sat, 10 Dec 2022 12:05:05 +0000

Did you know that great bakers use gram as a unit of measurement for all ingredients in bread? (yes, for water too!)

Even if you might use ml or other units for different recipes in the kitchen, in case you want to make bread, the rules change. Same with CSS! Different scenarios, different rules, different units of measurement.

Let's bake!

Introduction

The web page you will design is two-dimensional, meaning you will use 2 dimensions to define it. Usually, they are expressed as height & weight.

But these can be expressed in various other ways, depending on your target code: vertical & horizontal, length & breadth, x & y etc.

These dimensions need to be defined using several units of measurement. CSS units are broadly divided into 2 main categories: absolute and relative.

1. Absolute Units

Used on fixed-sized web pages, absolute units are constant across all devices, meaning they are not suitable for all viewport sizes.

Absolute units are best to be used for printing rather than screen output as it is preferable to use them when you know exactly your web page size will be constant.

Out of these, the ones you will come across the most are px and cm.

2. Relative Units

In comparison with the absolute units, relative ones are more suitable for dynamic web pages. They are defined in relation to other elements of the parent element, the viewport or visible web page.

When viewport dimension is important, it is recommended to use vw and vh. It might seem over the hand to use relative units at first, but thanks to their scalability properties, they will help a lot in larger projects.

If you want to discover more about CSS values and units, I recommend this reading where you can go more in depth on the subject.

Cover photo by Mae Mu on Unsplash

Meta Front-End Developer Professional Certificate

Patricia Cosma — Tue, 06 Dec 2022 15:19:58 +0000

Do you wanna learn front-end development and need some guidance? Here's what you can do.

Find a course that can take you from 0 to employed. It's important to choose one who would help you develop a portfolio, do exercises and provide you with further reading.

A great choice is the course offered by Meta on Coursera. It is divided into 9 smaller courses, each focused on one specific part of frontend development. If you are interested only in subject out of these 9, you can enroll only for that one.

Here's what it offers so you can see whether or not this is the right one for you.

1. Introduction to Front-end Development

(focused on fundamentals)

Get familiar with the frontend developer world
Create a basic webpage with HTML & style it with CSS
Meet the most popular UI frameworks
Edit a webpage using Bootsrap

2. Programming with JavaScript

(focused on basic concepts of JavaScript)
Integrate JavaScript with HTML and CSS
The role of JavaScript in today's world
Discover interactive possibilities and programming paradigms
Learn about the practice of testing the code

3. Version Control

(focused on Git & GitHub)
Collaborate on big projects with version and subversion control
Effective software development workflow
Git terminology
Install Git, create local and remote repositories & push commits

4. HTML & CSS in depth

(focused on real-situations exercises)
Create simple forms with responsive layout using HTML5 and CSS
Learn responsive design with flexbox and grid
Interactive CSS (transformation, animation, keyframes etc.)
Create a portofolio project

5. React Basics

(focused on fundamentals)
Create more scalable and maintanable websites & apps
Use forms to allow the user to interact more with the web page
Build an application in React
Gain experience with REACT, React.js, JSX

6. Advanced React

(focused on new skills & productivity)
Put all the common hooks of React to use within your application
Render list and forms components
Understand JSX in depth
Build a portofolio using React

7. Principles of UI/UX design

(focused on fundamentals of UI/UX design)
Design digital products that create value
Recognize successful UI/UX designs & evaluate existing interfaces
Identify best practice interaction design methods
Create, share & test your UI/UX design

8 & 9. Front-end Developer Capstone & Coding Interview Preparation

Enrollment is not yet available for these two and therefore there are no details. However, Meta is currently developing them, so until they release them, you can always check the ones above.

Which one is your next course? Did you find any other complete course that might be helpful for beginners?

Cover photo by Nick Morrison on Unsplash

5 Easy Ways to Center a div Element in CSS

Patricia Cosma — Sat, 03 Dec 2022 08:59:52 +0000

The nicest thing about CSS is that one problem can be solved in many ways. It doesn’t matter that you don’t know all the possibilities - you won’t struggle to find your way out of the problem.

However, you can be prepared by already knowing that it is possible to solve what you have at hand in many ways, as long as you are creative. Today we will walk through a simple and common situation you will encounter in your project: how to center your div element.

option I

This will horizontally align the block to the center of the parent. You can also add width to your .child to prevent it from stretching out to the edges of the .parent.

.parent {
    display: flex;
}
.child {
    margin: auto;
}

option II

Probably one of the first solutions you’ll learn when aligning items because of its simplicity. align-items will pack the items vertically to the center, while justify-content will take care of the horizontal part.

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
}

option III

Setting the top and the bottom may look pretty straightforward. However, if you stop there, the browser will just center the element’s edges and it will display it off-center. Adding the transform property will solve that issue.

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    bottom: 50%;
    transform: translate (-50%, -50%);

option IV

You may look to find a way to write as little code as possible in your project when that’s possible. Using the place-items shorthand property, which will align your item both vertically and horizontally, you’re basically getting rid of setting the block and inline directions (align-items & justify-content)

.parent {
    display: grid;
    place-items: center;
}

option V

Last in line for today is another shorthand property called inset, which can help you center your div element. margin: auto will behave as in the first example, while inset corresponds to top, bottom, left and right.

.parent {
    position: relative;
}

.child {
    position: absolute;
    inset: 0;
    margin: auto;
}

Although they are far from being the only options when centering the div elements in your CSS, I hope you’ll make use of them throughout your exploration.

Can you think about another way you can center your div next time? 🤓

Cover photo by Alejandro Barba on Unsplash

Fixed vs. Sticky: How to Define Elements in CSS

Patricia Cosma — Tue, 29 Nov 2022 19:13:57 +0000

While learning CSS, you will discover lots and lots of properties that will help you style great websites.

A good example, often used in CSS, is position property. This can take 5 different values: static, relative, fixed, absoluteand sticky. Today, we’ll explore the creation of fixed and sticky elements and how they behave on the page.

Prerequisites

In order to understand better this tutorial, you should be able to define what CSS is and how you can add CSS to your HTML.

It’s also good to have basic experience of working with a source-code editor, like Visual Studio Code, but that’s only up to you.

Structure

Open your preferred editor and create an HTML file, like structure.html. Start by typing ! and then click the Enter button (if you’re in VSC), otherwise just copy-paste this in your file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed vs sticky</title>
</head>
<body>
    <!--code will come here-->
</body>
</html>

After the title tag, link the CSS sheet to your HTML and create the style file, style.css.

<link rel="stylesheet" href="style.css">

Next, we’re going to create two div elements. Within the first one, we’ll define the fixed element and within the second one, the sticky element.

<div class="example">
<div>

<div class="example">
<div>

Having the basic structure of the page, let’s also add the basic styling needed in CSS before going to the next step.

body {
        /*using flex display for a flexible responsive layout structure; therefore, there will be no need to use float or positioning*/
    display: flex;
        /*feel free to set any other color of your choice*/
    background-color: grey; 
}

.example {
    width: 100%; 
}

Fixed Element

In the first div created above, we’re going to add the structure to be designed with the fixed element.

<div class="example"> 
    <div class="box fixed">This is fixed</div>
    <div class="content one"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

Switching to the CSS sheet, add the following code:

.content {
    background-color: blueviolet;
    height: 200px;
    margin: 1rem;
}

.content-one {
    height: 100px;
}

.box {
    width: 300px;
    height: 100px;
    background-color: aquamarine;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.fixed {
    position: fixed;
    top: 24px;
    left: 24px;
}

Don’t worry - you won’t have so much to add for the sticky element too. The above-designed classes (except the last one) will define the next part of the project as well.

Sticky Element

For the second div, let’s define the code in our HTML file as follows:

<div class="example">
    <div class="content one"></div>
    <div class="content"></div>
    <!--placing the sticky box as third to better visualize the difference between the 2-->
    <div class="box sticky">This is sticky</div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

Almost there!

Remember the whole CSS styling from the fixed element? If you take a look at that, you’ll notice that the common classes for the elements have been already defined.

All there’s left is to add the specific styling for .sticky.

.sticky {
    position: sticky;
    margin: 24px;
    top: 24px;
}

Final Code

Aaaaaaand scene! Let’s see what we have created.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed vs sticky</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--structure of fixed-->
<div class="example"> 
    <div class="box fixed">This is fixed</div>
    <div class="content one"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

<!--structure of sticky-->
<div class="example">
    <div class="content one"></div>
    <div class="content"></div>
    <!--placing the sticky box as third to visualize the difference between these two-->
    <div class="box sticky">This is sticky</div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>
</body>
</html>

body {
    display: flex; /*using flex display for a flexible responsive layout structure; therefore, there will be no need to use float or positioning*/
    background-color: grey; /*feel free to set any other color of your choice*/
}

.example {
    width: 100%; 
}

.content { /*these are properties for all the elements that have the class content*/
    background-color: blueviolet;
    height: 200px;
    margin: 1rem;
}

.content-one {
    height: 100px;
}

.box {
    width: 300px;
    height: 100px;
    background-color: aquamarine;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.fixed {
    position: fixed;
    top: 24px;
    left: 24px;
}

.sticky {
    position: sticky;
    margin: 24px;
    top: 24px;
}

You have now a better understanding of how you can use the fixed and sticky elements in CSS. Play around with them to create a fixed menu or a sticky footer - the possibilities are endless.

Have fun! 🎉

👋🏼 You can check this tutorial and other projects here.

Cover photo by Jackson Sophat on Unsplash

5 Free Resources to Learn Frontend Development (+ Extras)

Patricia Cosma — Sun, 27 Nov 2022 18:28:47 +0000

Although there are so many options out there, learning by yourself can be overwhelming. You don’t know which ones are worth your time - and we all know how important that is.

During my own learning path, I have discovered some interesting resources, ready to boost your skills in the frontend development field. From videos to reading, exercises and even games, this article will cover all your needs so you can start your stress-free learning today.

1. W3Schools

On this free-to-use website, there are pleeeeeenty of tutorials - HTML, CSS, JavaScript, Bootstrap etc. -, which take you from 0 to intermediate in a couple of lessons. You can create an account and even track your progress on each tutorial. I suggest doing that to be able to see how far you’ve come and see which exercises you want to practice again.

2. Flexbox Froggy & Grid Garden

Learning CSS you probably noticed that knowing how flexbox and grid work is essential. If you are more of a visual person, as I am, playing these two games will not feel like learning at all. But guess what? The notions will stick with you!

3. Programming with Mosh

Even if you learn by yourself, having someone to guide you through some notions comes in handy from time to time. This YouTube channel will walk you through the basics of programming and it also comes with a Front-end Development playlist.

4. MDN Web Docs

Although some games and visual aid is the extra help you need, it is important to take your time to read and understand programming to its core. This site provides you with information about different technologies, including HTML, CSS, JavaScript and DOM - and yes, you also have practical examples and exercises to solidify your knowledge.

5. Open Source Contributions

After getting some basics in, you need to start practicing in real life. There is no better way to do that than contributing to open-source projects on GitHub like this one for example. You can also cement some of your knowledge by explaining basic concepts to others or trying to fix some minor issues for practice using StackOverflow.

Extra resources

Florin’s YouTube channel
FreeCodeCamp website
Open-source free CSS framework Bootstrap

Take your time in learning all of this - it is a lot of information, but stay consistent. You’ll thank yourself later 🤭.

What other resources have you discovered and would recommend to others?

Cover photo by Ochir-Erdene Oyunmedeg on Unsplash