New to FCC - with my first project completed - Tribute Page

Code Feedback
1

Hey All,

I’m overall new to FCC, made a couple posts here and there. Just wanted to post my tribute page and get any feed back folks felt like giving.

I tried to make it lighthearted and kind of goofy…

Notable stuff about it:

  • Pure CSS & HTML (no bootstrap or jquery)
  • Tried to use HTML 5 semantic tags (section, header, footer, etc)
  • Use of google fonts
  • Use of font awesome (for arrow icon and fcc icon in footer)
  • Use of flex box
  • Use of media queries
  • Use of border-radius to make images circle

I decided to stick with pure html and css and forego the use of libraries because I felt like as a relatively straight forward static page it would allow me to better practice the front end knowledge I’ve acquired.

Due to the lack of bootstrap, I’m not sure how successful I was in making it responsive. I did my best, but being somewhat of a novice to front end work I’m not sure how it will pan out.

*EDIT - I am aware the HTML and CSS needs to be cleaned up a bit, like the section id’s might not match up. That’s on my to-do list!

2 Likes
2

Not tested on mobile, but on desktop this looks super nice! Really nice layout!

3

I appreciate the feedback, it took me a lot longer to get it in a state I liked than I thought it would.

Mobile seems… okay I guess. Nothing out right breaks. The transition to mobile size (resizing on desktop) makes the “sad keanu” section look a bit crappy.

4

Well, get used to that :slight_smile:

I wouldn’t bother too much about little imperfections, it doesn’t have to be perfect.

5

I really like your design. Hope you don’t mind me crashing your topic.

I took a similar approach, but used bootstrap and all the fancy gadgets. I added my custom css (bootstrap has a facebook-looking design style). I wanted to just showcase things that can be done, to get a project that can be later put on the portfolio. Took me 3 days and liters of coffee.

So i understand fully, how long it takes to align and layout the elements in this kind of a design.

Here is the link to my https://codepen.io/brankaandreja/full/VbzRxV/