Product Landing Page Feedback and some General Questions

I have a lot of questions and concerns so feel free to respond to whatever you feel like. Mainly I’m looking to get some feedback on my product landing page product here:

I have already completed the responsive web dev cert but decided to go back and redo the projects. My first go at them involved way too much referencing of the example projects and I wasn’t super pleased with my styling. On this project here I only had a reference for the hamburger menu, which brings me to my first question.

The way this hamburger menu is implemented feels very hacky and frankly ingenious. I do wonder though if it is needlessly complex given that there are probably much simpler ways to do this with something like svg and javascript. There are also accessibility concerns with both implementations. I would love to know what kind of accessibility features I am surely missing in this project that would be expected in a professional environment.

On the topic of accessibility, I am seeing a lot about Aria in contemporary development and wonder why the FCC curriculum does not mention this at all.

I am also wondering how much time I should spend mastering styling in particular. This project basically took me a little more than a day to get it to where I’m comfortable with the result and that just feels like way too long for something as simple as this. Maybe I am being too hard on myself as I’m still pretty new to this stuff, but I’m just thinking about how quickly an employer would expect a front end dev to make something like this. CSS seems to be something that has a ton of depth but online resources rarely go beyond the very basics.

As I said I’ve already moved on and have completed the algorithms and data structures cert and was in the middle of the front end libraries projects when I decided to put that on pause and sort of go back and solidify the basics. Am I wasting time doing this? Should I just continue working on the front end projects and solidify the basics when it is required to do so?

Again I realize I’m all over the place here so feel free to reply to whatever you feel like and thanks in advance.

Hey @rankinaaron!

For your landing page, the video is just a large black square and doesn’t have any playback tools. So I would look into that .

Also I noticed this

It would be nice if the images and text were aligned with each other.

I think your solution works but you could also experiment with using javascript. It should only take a few lines of javascript code.

If you are interested in becoming a front end developer I don’t think you need to become a “master” designer but it wouldn’t hurt to keep researching good design principle so you can create clean professional sites.

There is a lot you can do with CSS. But again don’t feel like you have to become a CSS expert. Just look at it as an opportunity to learn and grow. A great resource would be CSS tricks if you are interested in building more advanced stuff with css.

I am currently working through the front end certification as well but I am also working on a side project that uses all the stuff from FCC and other sources. It seems like the main problem is that you are not working towards something , like build an independent project.

My advice to you is to come up with a project idea that interests you and use the skills and knowledge you have learned to build that project. You will learn so much about how to plan, design, work out bugs, creating good UI and UX as well as deploy the finished product to the web.

I would also check out this resource on front end development.

Hope that helps!

Happy coding!

Hey there, thanks for the reply @jwilkins.oboe (again :slight_smile: ).

I will fix that alignment for sure I didn’t even notice it until you said something.

Also for the video, I’m not sure why but you just need to reload the page for it to autoplay. I could of course just add controls to the video element but the styling looks a bit off and I like the idea of the borderless video just autoplaying in the hero like that.

I have seen CSS-tricks before as you’ve linked it in a post here on the forums and it also comes up in my searches quite often.

I peeked at that frontendmasters link and it looks like there is some really valuable stuff in there that I will check out. Thanks again for the detailed reply I really do appreciate it.

Coming up with ideas is hard :sweat_smile:. I do have some ideas for my own projects but they seem unrealistically large. Also when we start talking about the more complex details of how to build and deploy web apps it’s hard to know what to search for to solve the problem. There is a certain amount of metaphorical jargon that isn’t immediately decipherable from a beginner perspective. I get why these terms exist because they simplify and make abstract ideas understandable. But again from my beginner perspective trying to brute force build something from the ground up the jargon is sort of skipping a step in my understanding. In other words I can describe my problem in baby words but the search results are tuned around the metaphorical jargon. That is just something I will have to work out over time.

Anyway, I’ve added some styling to make the products section more horizontally aligned. I think a better approach is to just make sure the images I’m dealing with are the same size and dimension. Since these are just random images I took off of unsplash I think this is a decent solution.

I also fixed some of the styling on the video. I had some weird stuff from when I was using an iframe youtube embed earlier. It still doesn’t autoplay sometimes in my browser so I’m not sure whats going on there.

Coming up with projects ideas is tough but it is the best way to apply everything that you have learned so far.

If you are not sure where to start you could take an existing project like the product page or even tribute page and turn it into a full site.

For example with the product page, you could build a fictional eccomerce store with react. If you get stuck then there are tons of tutorials that will help.

Or you could build off of the tribute page and build a full site around it. You could add a javascript game to it, or simple quiz, add more articles or even a cool image slider.

As for worrying about deploying your website, I wouldn’t even worry about that part until the site is finished. When you get to that point you could always come to the forum and ask questions.

It is definitely scary and intimidating to build a site on your own but it is a very rewarding experience. I was stuck in tutorial hell for about a month but once I started building my own projects I was able to retain more information. Just take baby steps and start with a simple HTML page, then go section by section and work on adding CSS. If you try to tackle everything at once then of course it will be an impossible task.