DEV Community: Jenna

How Do You Set Up Your Layouts for Desktop, Tablet, and Mobile? (Grid Systems in Figma)

Jenna — Wed, 07 Aug 2024 08:40:32 +0000

Hello DEV community! 👋

Are there any Figma users, UX/UI designers, or product designers here? 🙋‍♂️🙋‍♀️

I'm exploring Figma and would like to learn about the best practices for setting up grid layouts, especially for different devices. I thought it would be great to learn from your experiences. 🌟😊

Layout grid:

I have a few questions: 🤔

How do you usually set up your grid system in Figma for desktop, tablet, and mobile?

What grid settings (columns, margins, gutters) work best for you on each device and why?

Do you use different grid setups for different projects or stick to one standard across devices?

Your insights will be helpful to all of us.💡😊

Do not hesitate to share examples, or any resources! 📸📚

I look forward to all the responses. 💬

Credits: Cover image from freepik.com

Cricket League Registration Landing Page with GSAP Animation

Jenna — Mon, 05 Aug 2024 09:30:28 +0000

This is a submission for Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

What I Built

I created a landing page to prompt users to join the cricket league team by redirecting them to the website's registration form. The main goal was to drive conversions by guiding users smoothly through the process.

To achieve this, I designed the "Join Us" text in the header to transform it into an eye-catching button, drawing user attention and encouraging interaction. This button leads directly to the "How to Join" section, where detailed information is provided to make the registration process easy and engaging.

Demo

Live site
Github

Journey

I learned about GSAP animation by using it in this project. I also made the page responsive, mobile-friendly, and accessible by reducing motion.

I kept the HTML structure intact and made all the necessary changes by adding and manipulating elements through JavaScript.

Credits:
Images, Illustration from Freepik
Icons from svgrepo

Building Responsive, Equal-Height Cards with Modern CSS (Magic of Flexbox & No Media Queries)

Jenna — Mon, 22 Jul 2024 16:07:00 +0000

Introduction

What is our aim?

Building the Structure Using Semantic HTML5

Adding the Style Using Modern CSS
- Resetting CSS
- Designing Card Layout with Flexbox
- Styling the Card image
- Styling the Card content
- Styling the Card Button
- Adding Hover Transitions
- Using CSS Variables

Conclusion

Introduction

As web developers, we often encounter the need to create card components. whether it's for a product/project showcase, user profile, or blog post, cards are everywhere.

In the past, creating responsive layouts was a challenge. The creation of these designs has become significantly simpler and more intuitive due to the advent of modern CSS techniques, specifically CSS Flexbox.

Flexbox simplifies the process of creating responsive layouts. We can easily arrange, align, and space items in a container without using complex media queries. This means we can build layouts that adapt beautifully to different screen sizes and orientations without specifying exact breakpoints.

What is our aim?

The aim is to create responsive cards of equal heights without relying on breakpoints by using CSS Flexbox. We will ensure that each card maintains the same height regardless of the content length, adapting seamlessly to different screen sizes.

key CSS properties for the layout:

display: flex
align-items
justify-content
flex-grow

Now let's explore the magic of CSS flexbox by building the cards!

Building the Structure Using Semantic HTML5

<main class="card-container">
<!--   First card -->
  <article class="card">
    <img src="https://placehold.co/320x240" width="320" height="240" alt="Replace placeholder image here" class="card-image" loading="lazy">
    <h2 class="card-title">Title one</h2>
    <p class="card-description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.</p>
    <button class="card-button" aria-label="Read more about Title one">Read More</button>
  </article>
  <!--   Second card -->
  <article class="card">
    <img src="https://placehold.co/320x240" width="320" height="240"  alt="Replace placeholder image here" class="card-image" loading="lazy">
    <h2 class="card-title">Title two</h2>
    <p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.</p>
    <button class="card-button" aria-label="Read more about Title two">Read More</button>
  </article>
  <!--   Third card -->
  <article class="card">
    <img src="https://placehold.co/320x240" width="320" height="240"  alt="Replace placeholder image here" class="card-image" loading="lazy">
    <h2 class="card-title">Title three</h2>
    <p class="card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!</p>
    <button class="card-button" aria-label="Read more about Title three">Read More</button>
  </article>
</main>

Adding the Style Using Modern CSS

Resetting CSS

/* Basic CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

The body

/* Ensure that our layout is centred horizontally and vertically on the page */
body {
    display: flex; /* using CSS flexbox to vertically and horizontally centre all cards */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

Designing Card Layout with Flexbox

/* Cards */
.card-container {
    display: flex; /* using CSS flexbox to display each card at the centre */
    justify-content: center;
    align-items: stretch; /* use stretch for equal height of all cards */
    gap: 1.5625rem; /* add space between each card */
    flex-wrap: wrap;
    padding: 1rem; 
    max-width: 100%; /* Prevent container from exceeding viewport width */
}

.card {
    display: flex;
    flex-direction: column;
    width: 20rem;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
    text-align: center;
    text-wrap: balance; /* ensures content is evenly distributed across multiple lines for better readability. */
    overflow: hidden;
}

Styling the card inner content

Styling the Card image

.card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 0.85rem;
}

Styling the Card content

.card-title {
    font-size: 1.25rem;
    padding: 1rem;
    color: #3ca69f;
}

.card-description {
    flex-grow: 1; /* allow the content to take available space, thus maintaining equal height no matter the length of the content */
    padding: 0 1rem 1rem;
    font-size: 0.975rem;
    line-height: 1.5;
}

Styling the Card Button

/* Cards button */
.card-button {
    align-self: center; /* placing the button at the center */
    margin: 1rem 0 3rem;
    padding: 0.625rem 1rem;
    font-size: 1rem;
    color: #ffffff;
    background-color: #3ca69f;
    border: none;
    border-radius: 0.3125rem;
    cursor: pointer;
}

Adding Hover Transitions

.card {
    transition: 0.5s ease all;
}

.card-button {
    transition: 0.5s ease all;
}

/* cards hover effect */
.card:hover {
    background-color: #276662;
    color: #ffffff;
}

.card:hover > .card-button {
    background-color: #ffffff;
    color: #276662;
    font-weight: 700;
}

.card:hover > .card-title {
    color: #ffffff;
}

Using CSS Variables

/* Declare variables */
:root {
    --primary-color: #3ca69f;
    --secondary-color: #276662;
    --text-color: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --border-radius: 0.3125rem;
    --spacing: 1rem;
    --transition-duration: 0.5s;
}

Conclusion

Putting everything together

GO TOP

How Do You Name Your CSS Classes?

Jenna — Sun, 21 Jul 2024 23:24:23 +0000

What’s Your Preferred CSS Class Naming Convention?

BEM (Block Element Modifier)
SMACSS (Scalable and Modular Architecture for CSS)
OOCSS (Object-Oriented CSS)
Atomic CSS
Others

There are various naming conventions for CSS classes, each with its own advantages. What conventions do you use, and why do you prefer them?

Are you more of a dash (-) or underscore (_) person when naming CSS classes?

Website Navigation: Is a 'Home' Link Necessary in the Main Menu?

Jenna — Tue, 09 Jul 2024 21:58:12 +0000

Should websites include a "Home" link in the main menu?

Traditionally, this has been a common practice on many websites.
However, some may argue that having a separate menu item for 'Home' might be redundant or unnecessary as the logo often being a direct link to the homepage.

Pros of Including a "Home" Link:

Accessibility:
It provides a clear, visible option for users to navigate back to the homepage from any page on the site.

User Expectations:
Many users are accustomed to seeing a "Home" link in the main menu, which can enhance usability and reduce confusion.

SEO Considerations:
Having a "Home" link can potentially benefit SEO, as it reinforces the importance of the homepage in site structure.

Arguments Against Including a "Home" Link:

Redundancy:
Since the logo typically links to the homepage, adding a separate menu item might clutter the navigation without adding significant value.

Space Optimization:
Removing the "Home" link can streamline the menu, making room for more important or frequently accessed links.

Design Aesthetics:
Depending on the website’s design, having fewer menu items might contribute to a cleaner, more modern look.

🚀 Boost Your Front-End Skills with These Practice Platforms

Jenna — Mon, 01 Jul 2024 08:52:22 +0000

Have you ever finished a front-end/web development tutorial and wondered what comes next?
Many of us have experienced the feeling of being stuck in tutorial hell, lost and confused with no clear path to apply our new skills.
Our coding abilities can only be developed through continuous practice, just like a sunflower grows little by little.
The challenge of coding independently is real, even though it's easy to follow lessons.

Here are some great resources for hands-on practice that will help you bridge the gap between learning and doing:

CodePen
Codementor Projects
Codewars
Codier
CSSBattle

DevChallenges

Edabit
Exercism

First Timers Only
Frontend Mentor
Frontend Practice

Using these platforms alongside tutorials and structured lessons can significantly enhance your front-end skills, giving you the confidence to tackle any project.

👉 What are your favourite platforms for practising web/front-end development?
Share in the comments below! 💬

Credits:
Cover image from Freepik.com

HTML Lists - How Well Do You Know Them?

Jenna — Mon, 24 Jun 2024 11:50:44 +0000

Introduction

Types of HTML Lists

Unordered Lists(<ul>)
Ordered Lists(<ol>)
Description Lists(<dl>)

List Attributes

Attributes for Unordered Lists
Attributes for Ordered Lists
Attributes for Description Lists
Global Attributes

Additional List Features

Customizing List Styles
Nested Lists
List Accessibility Best Practices

Conclusion

Introduction

HTML lists improve web page content organization, making information easier to read and accessible. They enhance user experience by presenting data logically and structurally.

Types of HTML Lists

Unordered Lists(`<ul>`)

Unordered lists in HTML are used to present items in a bulleted format. The <ul> tag defines them and the <li> tag marks each list item individually.
Displaying items where the order is irrelevant, such as navigation menus or item lists, is best done with unordered lists.

<ul>
 <li>Item one</li>
 <li>Item two</li>
 <li>Item three</li>
</ul>

Ordered Lists(`<ol>`)

Ordered lists in HTML present items in a numbered sequence format. The <ol> tag defines them and the <li> tag marks each list item individually.
Ordered lists are suitable for sequences where the order of items matters, such as step-by-step instructions or ranked lists.

<ol>
 <li>Step one</li>
 <li>Step two</li>
 <li>Step three</li>
</ol>

Description Lists(`<dl>`)

Description lists in HTML are used to present terms paired with their descriptions. The <dl> tag defines them, the <dt> tag marks each term, and the <dd> tag specifies each description. They are suitable for glossaries, dictionaries, or defining terms in a structured manner.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

List Item Attributes

Attributes for Unordered Lists(`<ul>`)

Deprecated Attribute: type
The type attribute was used to set the bullet style for list items (<li>), but it is now deprecated.

 /*DO NOT USE - DEPRECATED */ 
<ul type="circle">
   <li>Item 1</li>
   <li>Item 2</li>   
   <li>Item 3</li>
</ul>

Instead, use the CSS property list-style-type to achieve the same effect.
Values for list-style-type:

disc: A filled circle (default) known as a disc marker.
circle: An unfilled circle known as a circle marker.
square: A filled square is known as a square marker.

<style>
  ul {
    list-style-type: circle; /* Set the marker style using CSS */
  }
</style>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Attributes for Ordered Lists(`<ol>`)

Type: Defines the numbering style (decimal, Roman numerals, letters) for ordered lists.

Start: Indicates the starting number for the ordered list (<ol>), useful for lists that need to begin from a specific number other than 1.

 <ol start="5"> starts the list from number 5.

Value: Specifies the starting value or counter for an individual list item (<li>) within the ordered list (<ol>).

<li value="10"> assigns the value 10 to that list item,
overriding the default sequential numbering.

Reversed: Reverses the numbering of the ordered list (<ol>), starting from a higher number and counting downwards.

<ol reversed> reverses the order within the list.

Attributes for Description Lists(`<dl>`)

No specific attributes for modifying behaviour or appearance exclusive to <dl>.

Global Attributes

Attributes such as class, id, style, title, and aria-* attributes can be used with <ul>, <ol>, <dl>, <dt>, and <dd> tags to enhance functionality or styling.

Additional List Features

Customizing List Styles

Use CSS to modify list markers (bullets or numbers) with different shapes, colours, sizes, and positioning.

Nested Lists

HTML lists can be nested within each other, allowing for hierarchical content. This technique is commonly used to create sub-categories or multi-level outlines within a single list structure.

<h2>Nested Unordered List</h2>
    <ul>
        <li>Fruits
            <ul>
                <li>Apple</li>
                <li>Banana</li>
                <li>Cherry</li>
            </ul>
        </li>
        <li>Vegetables
            <ul>
                <li>Carrot</li>
                <li>Broccoli</li>
                <li>Spinach</li>
            </ul>
        </li>
    </ul>

    <h2>Nested Ordered List</h2>
    <ol>
        <li>Main Topic 1
            <ol>
                <li>Sub Topic 1.1</li>
                <li>Sub Topic 1.2</li>
            </ol>
        </li>
        <li>Main Topic 2
            <ol>
                <li>Sub Topic 2.1</li>
                <li>Sub Topic 2.2</li>
            </ol>
        </li>
    </ol>

List Accessibility Best Practices

Ensure lists are created with semantic HTML, meaningful alternative text, and optimized for navigation with assistive technologies.

<h2>Accessible Unordered List</h2>
<ul aria-label="List of fruits" role="list">
    <li role="listitem" tabindex="0">Apple</li>
    <li role="listitem" tabindex="0">Banana</li>
    <li role="listitem" tabindex="0">Cherry</li>
</ul>

<h2>Accessible Ordered List</h2>
<ol aria-label="Steps to complete a task" role="list">
    <li role="listitem" tabindex="0">Step 1: Prepare the ingredients</li>
    <li role="listitem" tabindex="0">Step 2: Mix the ingredients</li>
    <li role="listitem" tabindex="0">Step 3: Cook the mixture</li>
</ol>

<h2>Accessible Description List</h2>
<dl aria-label="Description of terms" role="list">
    <div role="group" aria-labelledby="html-term">
        <dt id="html-term" tabindex="0">HTML</dt>
        <dd>A markup language for creating web pages</dd>
    </div>
    <div role="group" aria-labelledby="css-term">
        <dt id="css-term" tabindex="0">CSS</dt>
        <dd>A stylesheet language for styling web pages</dd>
    </div>
</dl>

Conclusion

HTML lists can transform plain content into well-organized and accessible information. You can achieve clarity using unordered lists for general items, ordered lists for sequences, or description lists for definitions.

Adding visual appeal and depth through customization and nesting of lists, along with implementing accessibility best practices, ensures that everyone, including users with disabilities, can comfortably navigate your content. These techniques enhance the experience for all visitors, making your web pages more user-friendly and inclusive.

I hope this helps in your #webdev journey 🚀

Happy learning! 😊

GO TOP

Discussion: How do you approach building websites or apps?

Jenna — Sat, 15 Jun 2024 22:19:25 +0000

Hey, fellow DEVs,

I'm curious 🤔 about our processes when starting a new project/challenge.🌟
Whether you have years of experience or are new to the field, I'm sure you have valuable insights to offer.💡✨

Do you start by creating a plan on paper or move straight to code?📝💻

What is your approach to development when you already have a design?🎨

What are your favourite tools or technologies in your development workflow? 🛠️

Let's talk about it in the comments below!💬😊

What Are the Best Tips for Creating Good, Engaging, and High-Quality Content on DEV Community? 🚀🌟

Jenna — Fri, 14 Jun 2024 15:15:19 +0000

Hello fellow dev,

I hope you are all doing great.

I've been wondering 🤔 what makes a post beneficial to the DEV community.

There are many great posts out here, but I've noticed a mix of quality.

For example; incomplete posts, some relevant ones contain grammar and punctuation mistakes, while others seem unrelated to this platform.

I acknowledge the tag for off-topic subjects, but I've noticed that some posts lack it.

How can we continuously ensure high-quality content and provide valuable experiences for everyone?

Some points to consider:

What makes a post valuable and informative for you as a developer?
What criteria would you use to evaluate a post's quality (low or high) and relevance to the community?
How important are clarity, accuracy, and usefulness when reading content?
Have you noticed any posts that seem irrelevant or contain grammar and punctuation errors? How do these affect your experience?
What are other points that you have noticed, good or bad?

I look forward to your thoughts and feedback in the comment section below! 💬 🙂

I wish you all a happy weekend ahead. 🌞

Disclaimer:
I am not an expert and am new to writing and contributing to this community. I aim to share, learn, and grow together while promoting better contributions. If you have any concerns about the relevance or duplication of my posts, please notify me.

Please note that this post aims to improve the community experience and is not directed at any specific individual.

Capturing Beach Memories: A Polaroid Showcase of the World's Top Beaches

Jenna — Mon, 10 Jun 2024 00:18:09 +0000

This is a submission for [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29), Glam Up My Markup: Beaches

What I Built

Hello DEV,

This is my first entry here.

I incorporated a Polaroid photo effect to evoke a sense of nostalgia and capture the essence of cherished beach memories. Using HTML, CSS, and JavaScript, I crafted a visually appealing display where each beach is presented as if captured on a polaroid. Clicking on any beach card opens up a gallery, allowing users to browse all images. This interactive experience is enhanced with icons for location and additional information, enriching the exploration of each beach.

Credits:
Beach images from Freepik
Grainy background from freecodecamp

Demo

See the Pen Beach challenge by JennaVisions (@JennaVisions) on CodePen.

Beach challenge

Journey

Please note that the project is not fully responsive at the moment. There are some fixes and updates that I plan to implement later, which I haven't been able to complete yet. Despite these pending improvements, building each step of the challenge has been an enjoyable journey.

In addition to the visual design, I prioritized accessibility features to ensure a user-friendly experience for all visitors. Incorporating alt attributes for images and keyboard controls for navigation in the lightbox gallery were among the measures to enhance accessibility. While the project is not yet fully responsive, I plan to improve it in future updates.

Cheers

DEV Community: Jenna

How Do You Set Up Your Layouts for Desktop, Tablet, and Mobile? (Grid Systems in Figma)

Cricket League Registration Landing Page with GSAP Animation

What I Built

Demo

Journey

Building Responsive, Equal-Height Cards with Modern CSS (Magic of Flexbox & No Media Queries)

Table of contents

Introduction

What is our aim?

Building the Structure Using Semantic HTML5

Adding the Style Using Modern CSS

Resetting CSS

The body

Designing Card Layout with Flexbox

Styling the card inner content

Styling the Card image

Styling the Card content

Styling the Card Button

Adding Hover Transitions

Using CSS Variables

Conclusion

Putting everything together

How Do You Name Your CSS Classes?

Website Navigation: Is a 'Home' Link Necessary in the Main Menu?

🚀 Boost Your Front-End Skills with These Practice Platforms

HTML Lists - How Well Do You Know Them?

Table of contents

Introduction

Types of HTML Lists

Unordered Lists(<ul>)

Ordered Lists(<ol>)

Description Lists(<dl>)

List Item Attributes

Attributes for Unordered Lists(<ul>)

Attributes for Ordered Lists(<ol>)

Attributes for Description Lists(<dl>)

Global Attributes

Additional List Features

Customizing List Styles

Nested Lists

List Accessibility Best Practices

Conclusion

Discussion: How do you approach building websites or apps?

What Are the Best Tips for Creating Good, Engaging, and High-Quality Content on DEV Community? 🚀🌟

Capturing Beach Memories: A Polaroid Showcase of the World's Top Beaches

What I Built

Demo

Journey

Unordered Lists(`<ul>`)

Ordered Lists(`<ol>`)

Description Lists(`<dl>`)

Attributes for Unordered Lists(`<ul>`)

Attributes for Ordered Lists(`<ol>`)

Attributes for Description Lists(`<dl>`)