Company Home Page Challenge Project (Css,Flexbox)

Hi All,

Hope you all are well!!

After a break of few weeks, now back on track with my learning and finished long waiting HTML & CSS project on Codecademy “Build a Website Design System with CSS”.

I have tried my best to give the justice to this with the designs coming in my mind however any feedback will be much appreciated.

You can see the source code for this project on my Github @https://github.com/naiyagpatel/WebsiteDesignSystem

Hope this will help someone or i can learn from your valuable feedback.

Until then stay safe and Happy Coding :slight_smile:

Naiya

This is my website for the company home page challenge project and my clear obsessive love for Nutella :sweat_smile:
Please give me as much criticism as possible the more the merrier.

code: https://github.com/krisbucz/nutella-world.git
live: Nutella World

Hey, that’s really cool! I love the css to make the description appear when you hover over the image, I haven’t seen that kind of nested hover thing before and will definitely log that idea for future use :slight_smile:

One thing that comes to mind from your HTML is, semantically, the images in the gallery aren’t “articles”, as they aren’t standalone pieces of text. You might have been better off using <figure> instead, and then you could actually have made the descriptions <figcaption> blocks instead of divs, too…! But that is obviously a super minor thing.

I didn’t spend a ton of time trying to make my final product look good. I instead tried to do the project in a Test Driven Development style. I imported the mocha framework and wrote tests that would need to be passed before the project would be considered complete to the standards provided by the project. Getting webdriverio to work the first time was a pain in the butt but at least now I can say I’ve done some TDD stuff in one of my own projects.

https://github.com/AlanGervin/css-flexbox-TDD

Hi everyone!

I used this challenge as a way to re-create my company homepage from scratch.

Original page: https://www.roborigger.com.au/
My attempt: Roborigger - A New Way of Thinking for Lifting & Logistics

I used both Flexbox and Grid to achieve the overall layout.

You can view my codes here (under company-website).

All comments welcome!

1 Like

This is my project for the fictional floral company: Ground Up Floral Company. I even custom made the logo: [Ground Up Floral Company](file:///C:/Users/Shaun/Desktop/Code%20Academy/Projects/business-site-flexbox/index.html)
My only problem with this project is that my responsive design won’t work no matter what I change.

Hi, I would like to share mine too: An Acme Company
:smiley:
Have a nice day.

Mikheltodd

Hello team!!
This is my code:https://github.com/MIKE-crypto960/flex_company.io.git
And this is my site:https://mike-crypto960.github.io/flex_company.io/
It is responsive only for screens(max-width:800px)
If you have any idea to make better let me know…
Thnxxxx a lot!!!

Hello,

Here’s my go at the project: Arcadian
The code: GitHub - KamilahAhmed/arcadian: Open-ended codecademy project about company homepage

I would appreciate any feedback, thanks in advance.

1 Like

It is look good and responsive.Keep going…

Hey everyone, Just finished my first landing page. I do intend on updating it more with media-queries and design. Let me know your thoughts.
live page: The Alchemist Pantry
Page code: GitHub - noelle529/Landing_Page.github.io: Codecademy Landing Page Project

1 Like

I’m struggling with this project. For some reason my flex boxes aren’t flexing - they don’t change size at all.
https://technomom.github.io/cohomepage/

Help is appreciated!

It looks great, very responsive!

Hi there. The sizes are adjusting, but the internal links aren’t working.

1 Like

try this mother!!!
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.nav {
display: flex;
width: 70%;
}

.nav p {

font-family: ‘Montserrat’, sans-serif;
font-size: 1.5rem;
margin: 1 auto;
}

.bikes {
display: flex;
margin: auto;
padding: 20px;
width: 100%;
}

.bike {
padding: 20px;
width: 50%;
}
.bike img {
width: 100%;
}
i a little newbie with code(3 months)
but i use dev tools and fix little your code…tell me if i helped you…

1 Like

That worked! thank you so much!

Thank you, thank you, thank you. I’ll be sure to look into the screen size issue. I appreciate it. I wanted something minimal and clean!

Your welcome!! :grinning:

1 Like

It is pretty and flexy… :grinning: :grinning:

1 Like

Hi!! Here I share my Company Home Page with Flexbox Project.

https://dsenen.github.io/flexbox/

Regards!!

1 Like