Frontend Mentor | Muhammad Al-Ameen Abdullahi's profile

Titima•20

@phyfatimaSubmitted almost 2 years ago

Responsive landing page with html css et js

1

Muhammad Al-Ameen Abdullahi•260

@al-ameen36Posted almost 2 years ago

Hello Titima, Great work.

A simple way to add fonts to website

Go to fonts.google.com.
Search for and choose your desired font family.
Select the font styles you want.
Copy the link tags and paste them in your project's <head> tag.
Copy the CSS rule and use it in your CSS file.

The link tags and CSS rule are available in the "Selected family" side bar that shows up once your start choosing font styles and weights, if you don't see it, click on the icon at the top right corner of the page.

For example the code could look something like this -

HTML

<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap" rel="stylesheet">
<head>

CSS

body{
   font-family: 'Inter', sans-serif;
}

Good luck :)

Marked as helpful

0

Bobby S•340

@bobbe86Submitted almost 2 years ago

The javascript was challenging for me. Also some of the UI was challenging. I really need to work on the responsiveness too. I tried to use SASS but I could not install on my computer successfully. I know the responsiveness is off and the grid layout is not perfect. But I think it turned out ok. I tried using BEM naming conventions which made the class names really long so I stopped along the way. I may try BEM in the future again.

Notifications Page

1

Muhammad Al-Ameen Abdullahi•260

@al-ameen36Posted almost 2 years ago

hello Bobby

A few suggestions

I usually use Grids to make complex layouts or when i know the sizes i want my columns to be, else i just use FlexBox to align items horizontally.
I also try to give my HTML elements very meaningful and intuitive names like notification and notification__item.
Designing mobile first makes responsive design easier.
I use semantic HTML elements as much i can.

<main class="container">
    <header class="notification__header">
        <h1>Notifications
            <span id="notification-count" class="badge">3</span>
        </h1>
        <button id="readAll-btn" class="btn">Mark all as read</button>
    </header>
    <section class="notification">
        <article class="notification__item unread">
            <picture class="user__image"><img src="images/avatar-mark-webber.webp" alt=""></picture>
            <div class="notification__content">
                <h2 class="user__name"><a href="#">Mark Webber</a></h2>
                <p class="notification__text">reacted to your recent post
                    <a href="#">My first tournament today!</a>
                </p><span class="dot"></span>
                <time>1m ago</time>
            </div>
        </article>
    </section>
</main>

w3shools.com is a great resource i use for learning, it provides you great examples and a try-it editor for practice. Here are some useful links i recommend

I hope this is helpful, you can always ask for clarification. Good luck

Marked as helpful

0

Kyle Deguzman•110

@CSE-KyleSubmitted about 2 years ago

hello, here's my project for the 3-column card preview. I had some struggles when approaching this challenge so I'll go ahead and do so based on the questions asked :

1.) What did you find difficult while building the project?

A: I had a difficult time taking the 3-cards and centering them exactly in the middle of the page. I was using flexbox/grid like I should when positioning the elements but I wasn't sure which one to use.

2.) Which areas of your code are you unsure of?

A: I'd say in my html I'm unsure of including a "container" div if that was necessary. I include it by default but I don't know if I actually needed it, but I kept it there just in case. Also when using flexbox/grid to position the elements exactly in the center.

3.) Do you have any questions about best practices?

A: What would be a good practice to set up my code to better have the css positioning to work efficiently? it's likely the one major issue out of the many that I have, is when I'm positioning certain elements on a website.

Please feel free to look over my code and provide me with any advice that I can use to better improve this project, thanks.

3-column card preview

2

Muhammad Al-Ameen Abdullahi•260

@al-ameen36Posted about 2 years ago

Hello Kyle

I personally use flexbox to align/position items horizontally/vertically, while grids for making more complex layouts.
For flexbox you just need a parent container and some child elements. You can do something like this. For Html

// use HTML semantic elements
<body>
  <main>
    <section class="container">
      <article class="box">...</article>
      <article class="box">...</article>
      <article class="box">...</article>
    </section>
  </main>
</body>

For CSS

.container{
     display: flex;
     align-items: center; // centers items vertically
     justify-content: center; // centers items horizontally
     height: 100vh;
}
.box{
     width: 300px; //set a fixed width for the boxes or use flex-basis property
 }

You can read more about HTML semantic elements, flexbox and grid.

hope this helps.

0

marsha•210

@NestamashSubmitted about 2 years ago

This was a very challenging task. although I managed to set up the mobile layout well the desktop layout was a challenge and it has taken me hours before I figure out how to place the cards to the middle and I was unable to do so. I tried using flexbox but I failed. any suggestions are welcomed. I don't want to look for other solutions before I get what's wrong with my code. Any help??

four-card-feature-section

1

Muhammad Al-Ameen Abdullahi•260

@al-ameen36Posted about 2 years ago

Hello Marsha

Setting margin properties to "auto" means you are letting the browser calculate it for you. When used for left and right margins, it centers elements horizontaly. But its sometimes unpredictable for top and bottom margins.

So to fix your problem you need to change

section, article {
    max-width: 400px;
    margin: auto;
    margin-bottom: 1.5rem;
}

to this

section, article {
    max-width: 400px;
    margin: 0 auto;
    margin-bottom: 1.5rem;
}

This sets the margin top and bottom to "0" and the left and right margins to "auto". You can read up more about CSS margin values. Hope this helps :)

Marked as helpful

1

Alexsandro Agustini Junior•250

@AlexAgustiniSubmitted about 2 years ago

I've had a problem with the hover effect on the button, every time i hover over it, my container height increases because it adds some pixels of the button border, anyone knows a simple solution to avoid this ?

Column preview using grid and flex

3

Muhammad Al-Ameen Abdullahi•260

@al-ameen36Posted about 2 years ago

Hello Alexsandro

You are having this issue because the normal button state does not have a border, while the hover state has one. You can fix it by changing the border property on the button from this

.grid-item2 button {
    ...
    border: none;
    ...
}

to this

.grid-item2 button {
    ...
    border: 2px solid white;
    ...
}

Hope this helps :)

Marked as helpful

0

Med Daifi•20

@mdaifi1337Submitted about 2 years ago

This project was interesting CSS wise. But first let's talk HTML. For the rating stars, I was looking for a way to duplicate the icons without duplicating the HTML code, I found the background-image and background-repeat: space properties in CSS but I couldn't find a way to add custom spacing. The mobile version wasn't as hard as the desktop one though, also this is the first time I've implemented the workflow of doing the mobile design then the desktop one, and it's much easier to do !

For CSS, it was a bit difficult to align the rating cards and its content the same way they are in the design, other than that everything else was a bit easier to do.

Social proof section challenge

2

Muhammad Al-Ameen Abdullahi•260

@al-ameen36Posted about 2 years ago

Hello Med Daifi.

For my solution i used CSS variables and the CSS calc function to align the cards.

my CSS

.card{
    margin-right: calc(var(--mr) * 50px);
}

my HTML

<div class="card" style="--mr: 2;">...</div>
<div class="card" style="--mr: 1;">...</div>
<div class="card" style="--mr: 0;">...</div>

for example if "--mr" is 2, then margin-right: calc(2 * 50px);

Hope this was helpful

0

Muhammad Al-Ameen Abdullahi

All comments

Responsive landing page with html css et js

Notifications Page

3-column card preview

four-card-feature-section

Column preview using grid and flex

Social proof section challenge