Feedback needed for tribute page

Feedback needed for tribute page
0.0 0

#1

Hey everybody!
I have just finished tribute page dedicated to Frida Kalho. It was my first experience with Bootstrap and i enjoyed it, but vanilla CSS rocks anyway)
Also i have question: i included a link to my codepen and this is it? there is no any feedback from FCC itself, right?
I would really appreciate any feedback from you guys.
https://codepen.io/irina_b/full/vRZGWK/


#2

Lookin good :slight_smile:


#3

thanks for your feedback


#4

Love Frida, great work. I would push yourself to center align the Frida quote beneath the hero image. As well the <ul> list could be a bit better spaced. But I like the <ul> un-styled, looks great with the dates.

Lots of inline styling, was that a conscious choice? Took me a second to figure out what all the “mb” and “mr” classes were, guess I need to do some more BS4 homework!


#5

Thanks for your feedback.
About inline styling …I think i just found it as the easiest way.
I took Bootstrap course in Udemy, which was very helpful to dig into all classes.


#6

I second @rmarti55’s suggestion of removing all inline styling and stick with using classes just as you are when utilizing Bootstrap in your project. By creating reusable classes, you only have to make a single change to a class’s style instead of trying to find all the instances of the style in your html. Keep the HTML and CSS separate.

For example, you have the following inline style on all of your figure elements:

<figure class="figure" style="width: 200px;">

Instead of repeating that code throughout your html, modify the figure class or create a new class called figure-width and define the width there (see below).

.figure-width {
  width: 200px;
}

This way, if you decide to change the width of the figure elements, you only have to do it in one place. See below for how you would use this class.

            <figure class="figure figure-width">
                <img src="http://www.fridakahlo.org/images/photos/frida-and-diego-with-hat.jpg" class="figure-img img-fluid rounded img-top"
                    alt="A generic square placeholder image with rounded corners in a figure.">
                <figcaption class="figure-caption ">Frida Kalho and Diego Rivera.</figcaption>
            </figure>

As your projects get more complex, you will thank us later that you know how to modify and use CSS classes to your advantage.


#7

Very cool, what did you like the most or find the most useful about the Udemy BS4 course? Their BS4 course “teachers” Traversy Media have lots of good videos on YouTube, and they’re free :wink:


#8

Hey, thanks for your feedback. In this project i just tried to use Bootstrap mostly . But if I have more complex project I will definitely use your advice and create reusable classes.


#9

Yehhhhh actually i took Udemy course by Brad Traversy. It was just 11 $ and course made me follow theory step by step. Can’t say that i liked the way Traversy explains things thou


#10

When you use Bootstrap, you are using reusable classes. Bootstrap is just a collection of classes already made.