Tribute Page project + my second one, actualisation

Code Feedback
1

Hello all,

So here I am, just finished my first FreeCodeCamp project which was a Tribute Page.

I’m totally new to everything concerning building any kinds of websites, I started learning on this platform & watching some tutorials a few weeks ago, so every comment will be appreciated!

I was using basic HTML & CSS & Bootstrap.

I hope you"ll like it:

https://codepen.io/karolina_k/full/KeqEvR

ACTUALISATION:

https://codepen.io/karolina_k/full/OEBEqL - a new project I imposed on myself just to practice some flexbox. Any comments appreciated.

Also, I tried to make both projects responsive using media query.

2

Well done. It look pretty good.
Criticism:

  • Image appears too small on mobile screen.
  • Pink ‘The Beatles’ official page’ link doesn’t match green background.
  • Can you make the text responsive. At least the quote’s text. So it doesn’t wrap on mobile devices.

Why are using bootstrap instead of flexbox or css grid. I’m just curious.

3

Also both links are broken

4

@supuun i believe the challenge teaches you to use bootstrap in the legacy version

@karolina_k
i agree with supuun making the text responsive would be nice and i would also say with the new
curriculum being out go back and take all the classes up to this one as supuun mentioned u can use
css grid and flex box for styling as i think they have moved away from bootstrap since the website revamp.

5

They still have bootstrap course, but it comes later in ‘Front End Libraries Certification’. I did the old course including bootstrap, but flexbox and css grid are the future and much easier :slight_smile:

6

Thank you, I have fixed both links! The one to my Codepen was not working because I changed my nickname and then I forgot to change it also in my link, the other one was just a simple mistake in the code.

The text not being responsive you mean the font size? Also I agree the image could be bigger on the phone screen, I ll try to fix it

Yes, the challenge was to use Bootstrap, and also it’s the only framework I’ve got to know so far.

I will check out flexbox and css grid then as you suggest :slight_smile:

1 Like
7

Yeah, I meant the font size. Try using vw, vh, vmin or vmax. I use vmin, but I’m also a beginner and I’m not entirely sure it’s the right choice.

You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose

They recommend plain css, which includes flexbox and css grid, not bootstrap

Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose.

8

the legacy version told you to use css javascript and bootstrap but as I said the website revamp has made it so it is wise to go back and retake the classes and challenges.

1 Like
9

Ok you’re right then, they said I could use Bootstrap however so I did as I’m not familiar with flexbox or grid (or maybe I missed some lessons somehow…)

1 Like
10

I was also confused about flexbox. This video made everything so much clearer: https://www.youtube.com/watch?v=G7EIAgfkhmg
Then this is a part 2 of it: https://www.youtube.com/watch?v=H1lREysgdgc
You can also play this little game to practice: https://flexboxfroggy.com/

11

I haven’t mastered css grid yet and haven’t used in my projects (I’ve done 2 projects so far). Flexbox is sufficient, at least for now.

12

Thanks a lot I will watch for sure!

13

So I took the advice of you guys and as soon as I had some time I made the project responsive with some media query :slight_smile: Hope it looks better now.
Also, I watched the recommended videos on flexbox - thanks A LOT! I based my new original project on that just to practice (https://codepen.io/karolina_k/full/OEBEqL).
I’m attacking the grid tomorrow :wink: