Please help with Landing Page for cell phones

michaelnicol · June 16, 2020, 6:26am

I was typing this at 3 am planning to post in the morning after 6 am, but hit the post button by accident halfway through typing this. Might as well just edit and finish it fully.

Nice work. Box shadows have given your site a major pop and it works well. For even more color palettes, you can also check out the Trending Color Palettes on Coolors. I was also thinking about, once we work out all the issues with the webpage, trying even more color palettes to show you what you can like.

Organize your CSS a bit better. The hover CSS styles should be right underneath the CSS styles for the default element. Your .nav-link:hover is on CSS line 109 but .nav-link is on line 13. I always put media at the bottom of the CSS code.
Try a box shadow on your navigation elements. And when you hover over a navigation element, use CSS transitions to make the shadow bigger and more blurry. Not sure about this part though and wouldn’t say it is required.

box-shadow: 2px 2px 5px;

That 5px on the end causes a blur for the shadow. You should tried adding this to all of your box shadows to make it seem a little more real.

For your navigation bar, their is a brief period during resizing that causes the navigation elements to wrap the text to the next line and it doesn’t look as good.

At around 820 pixels the text inside the “what can we do for you” section wraps to the next line which looks weird. Otherwise you did a nice job on it.

For your issue with the navigation bar, I am still a little confused on what the problem is. Do you want the navigation bar to be fixed to the top of the screen? I am able to hit the navigation buttons and go to the sections with no issues. I just need to scroll back up to the bar in order to use it again.

Try adding more of a margin to the top and bottom of your cat. Its almost touching the navigation bar.
On smaller screens when the navigation bar is removed, the margin is uneven on the cat photo. Minor thing.

Try adding a little bit more content to the container. More pictures to start to fill in each sections. Maybe a fake team photo under the “Who are we section” or some other cat pictures inside container. Nothing too big, maybe smaller then your original cat photo you have right now.

Nice work dude. Keep it up and keep trying!

33P · June 16, 2020, 6:25pm

@michaelnicol Don’t worry! For some reason I’ve received it just now (it was the afternoon. Now I’m writing you at night after I fixed the page). I was editing my post to add a question you may answer if you like. The question was, honestly, do you think I will ever make a living with this?
I fixed things here and there, changed some colors with the help of the page coolors you presented me, made some border radius for the header for it to be seen in smaller screens and give them a better finish. I added pictures as you suggested…but I was bold and added big Egyptian cats pictures and I think they work fine! Added some text to go with the first one of them too. When you call the sections they look awesome. Even in smaller screens. I added shadow blurs as you told me too. Great improvement. I think the page looks a lot better now. I tried to tidy the CSS putting everything in place.
I took out the space between container and header because it looked awful in smaller screens. But I spaced the cat photo to give it some air as you told me.
Also, the page did pass the tests which I wasn’t passing for the fixed header thing…not needed anymore, sorry for my insistence. At a point it did not pass all the tests. But now it does.
I’m proud of this little thing. Waiting for your feedback as always…and please answer the little question I posted earlier.
https://codepen.io/33P/pen/VwvojEv

michaelnicol · June 17, 2020, 3:57am

Nice work, but I would remove the image from the header. The header box doesn’t match the theme as well.

I would make all the images smaller. Maybe make a photo gallery under “who are we section” where you have a bunch of 200x200 px images of cats lined up in a row. The image resolution is not scaling up that well, so many of the images are lower quality.

This photo gallery can become a column on smaller screens and then each image widths are changed to fit the screen size.

Do you think you will make a living? It depends. Just knowing HTML usually isn’t enough. Once you start learning JavaScript you will start to make more complex webpages and programs. Even then you will also need to know Python, C, and various other things. You aren’t bad, their is just a lot of industry standards that are hard to come across with people who are self taught.

I would suggest going for a Computer Science degree if you want to turn this into a career. In the United States it is four years for a bachelors degree which is entry level into lots of Computer Science jobs. The thing with programming is that their is no test to show that you are a good programmer. Making one HTML element is technically programming, so anyone can call themselves a developer without knowing what they should know. That is why a degree is so important.

I am a High School Student in the United states (16 years old) and am going into my junior year when school starts again in September. I will be taking my second AP class in computer science, and have a decent background in HTML, CSS, JS, and Python. I go to a hard charter school, which means most of my classwork is already collage level. This results in me already getting collage credit for most of my programming work. At school i used mostly code.org this past school year in order to learn 25% programming and 75% computer science (how the internet works, number systems, etc).

My future career is in cyber security but am not sure about which part of the field I want to go into.

Feel discouraged? Around 2/3rds of all computer science students at Harvard had no background in computers before entering the course. Programming is not like learning a spoken language, but rather about basic problem solving. Its not like physics or mathematics which require a high mental capacity that not everyone can do. It just takes time and patients and you will get their.

Just because you didn’t take it in high school does not mean you just can’t start now. In fact, most computer science courses in collage are designed with this in mind. Taking my computer science classes now gives me a head start and maybe a application boost.

I have heard of online collage courses and I would guess their is also some in your home country. freeCodeCamp is a nice introduction, but it is only a beginners course. You will not learn 95% of the industry standards on this site. It is still very nice and I suggest continuing.

Keep in mind that learning your first programming language, like JavaScript, makes everything so much easier. Python was just about learning what was different from JavaScript, rather then Python itself. Programming is mostly just logical thinking regardless of language.

You can do this. If programming was easy everyone would have made a webpage by now. But they haven’t. You are 10 steps ahead of others just by starting. I was in the same spot 2 years ago. It will work out if you try and get proper education.

33P · June 17, 2020, 5:00am

@michaelnicol 16 years old! Well I’m 46 and taking care of my sick mum. I can’t go to college. Earlier this year I took a Python basics course and that was all. I’m amazed at what you’re achieving. Congratulations dude! You know a lot for your age. I’m unemployed. Used to work as a translator but online translation programs and more and more people knowing English finished it for me. There’s no way I could afford a college education now.
Thank you for being so clear to me.
I won’t wish you good luck because well, luck has nothing to do with it. I wish you the best of futures. Godspeed!

michaelnicol · June 18, 2020, 12:37am

Thank you. It sucks you fell on hard times, but I congratulate you on trying hard. You are also a great person for taking care of your mom. You are making progress in HTML and if you go at it for a couple more years with learning computer science you can get very far.

I have seen people make it as a self taught front end developer by doing courses like freeCodecamp. Do the entire freeCodeCamp course, get all the certifications, and see where to go from their. Those certifications, along with your portfolio, will be a showing to what you know and will allow you to get better and better jobs. You won’t get any jobs until you are done freeCodeCamp and maybe do some other certifications.

I recommended the collage degree because its gives you direction on what to learn and makes sure you don’t miss anything. However, you can also learn all of that from doing these online courses and improving over time.

I wouldn’t say go back to collage completely, but look out for payed online certificates that will allow you to get credibility in the industry. Some certifications are worth a lot and some aren’t.

Harvard has a free Computer science course called CS50 which allows you to start out as if you know nothing and work your way up to knowing a little something in each programming language. Its very hard. If you complete it (8 week course), you can go back and do it again with the $150 version and get a certificate for your resume. People say this certificate isn’t as valuable though. CS50 is the first certification from Harvard in a long line of computer science courses that they offer that build on each other all the way up to Machine learning/ AI. I would suggest finishing freeCodeCamp first before trying it to build those logical thinking skills. Maybe you could try both at once.

The reason it is 8 weeks is because most collage students in the US don’t go to collage 5 days a week, but rather a few hours a day for a couple days out of the week and spend the rest working. That is why a collage degrees can take 4 years.

I would suggest going on the career advice section of this forum to ask for direction. If you complete freeCodeCamp, that will be the first major milestone in your career. And keep in mind the more you code, the better you will get. Your first major project is coming out great and will improve over time.

But lets say you do find a steady job in the translation field again. I understand you might choose that over programming because you have the experience. If you do get the job, don’t feel like your time here was wasted because you did learn and you are doing well. Lot to learn, but on the way to learn.

I am always here to help. Don’t be afraid to tag me in any post in asking for help about project review or anything.

On a side not, how did you like the Python course?

33P · June 18, 2020, 1:10am

@michaelnicol I hope you realize how kind you are and such a good person. I can’t thank you enough.
I think those people who made a career online and for free are very capable people.
I still haven’t finished my first major project and if I do it will be all thanks to you.
I don’t think I have the gift. To be honest I feel quite depressed over this whole matter. I know all you do is trying to help me in any way you can and that goes to show the great person you are.
But I don’t feel anymore like I could make it. Not in such a competitive world as it is. And let’s face it, I’m not a natural.
About the Python course it was just an introduction. I liked it though but for me it was difficult. I passed the tests though.
I can’t thank you enough Mike. I don’t know yet what I’m going to do, but if I go on it will be all to your credit.

michaelnicol · June 18, 2020, 2:32pm

I don’t think I have a gift either. It just takes a ton of time and work overall. Programming is hard for everyone except a select few people and you rarely come across a gifted person. You will work hard to make it anywhere in any field, but especially in programming.

I have seen many successful people in this field, and not one of them was gifted. All worked for years to get to the point where they are at today. All of your teachers worked for decades in the Computer science field to get to the point to teach it to others. Its easy to see the end result of successful people but never their struggles. In fact, I almost gave up in some parts because I was using the wrong tools (Bootstrap instead of Flexbox).

You stayed up all night to work on your webpage and it worked. That is interest and passion, even if you don’t see it. The thing that may be lacking is your motivation and self coincidence, which will build over time with every project. Trust me, even struggles as much as you did at the start. That is normal, but should become easier over time (which is seems to be doing).

HTML/ CSS is a good skill and introduction to computer science, but it doesn’t have to be your career. HTML and CSS is graphic design, so it would be given to a graphic design artist when it comes to making any major website. Then someone else comes along and specializes in JavaScript, Python or some other language to work on the functionality. Then someone else comes along with C++ and specializes in working on the databases. Then someone else comes along with a engineering background and designs the physical hardware for the database. Then someone else wrote the software for the tools to do any of the above. All of which are full time careers with their own requirements. You don’t need to be able to do all of the above to make it in the field: Just find your place.

Its like being upset you don’t known German as a English to Spanish translator. Not that you hate it, just not your place.

Find the part you like and at least be somewhat knowledgeable in the parts you aren’t. No job will be 100% love and shouldn’t be the center of your life. Maybe being a translator could become your hobby in the future or vice versa. Its your choice.

Continue trying with the Python. If you do liked it continue with it and start to learn how to work on more backend work. I like doing JavaScript and Python more then HTML/ CSS since i’m not that much into art. Getting good at Javascript, and Python with basic HTML/ CSS skills is a great start. And once you learn your first major programming language, everything else will become much easier.

C++ is very hard even for experts, so don’t get caught up in that until much later. This is because it is a lower end programming language, which means it closer to machine code then readable text. Python is the opposite, being closer to human logic and text rather then machine code. This is why is it is so popular and great for starters, with JavaScript being a little bit harder and Java following.

Keep in mind HTML/ CSS is being a little bit phased out in future times do to better tools to automatically create nice looking webpages. Like using the Photoshop application instead of physically painting. However, Python and any other logical thinking programming language will never be phased out. So again, not loving 10% of the computer science field isn’t a big deal.

Keep in mind that programmers also do google things… a lot. We know how to program, but can’t remember every single function or HTML element. We just know where to work and how to incorporate it. Its 70% research and 30% programming is most cases. I can’t remember most Python functions, but I know where to look and how to use them once I find them.

Take more classes! Congrats on your Python course - mine was also very hard but I made it along with you. Try doing more of that and putting in the work and you can make it. Life is hard sometimes, but their is always a reason for why it is. And maybe sometimes it is for the better and it improves you. Maybe this is your opportunity. I don’t want you to do something you don’t enjoy, but trust me, you would have given up a long time ago if you didn’t enjoy it.

33P · June 18, 2020, 6:55pm

You talk like a sage and you’re only sixteen! Congratulations on your take on life and things. In fact I took web design because I like designing more than programming. I know something about Photoshop self-taught and having read somewhat. But I’ll take your advice. You’re right, self-made pages are taking on the scene. But I’d like to finish what I started. Are you in it with me? You’re not forced to say yes. I’ll take the rest of the challenges. And see what it takes. My best friend told me to go on and she’s as wise as you are. Photoshop courses are rarer in internet. Remember my background picture that didn’t fit in? That was me on Photoshop.
Thank you yet again Mike. May life gives you as much as you give to others!
Some abstract thingys I did on Photoshop

michaelnicol · June 19, 2020, 4:43am

And that’s fine that you also like HTML/ CSS too. You can choose that graphic design front end developer path if you want also. You can ask on career advice for certifications and the path you should take to get to making websites too. I just would be careful with it and make sure it isn’t your 100% skill set do to it being phased out slightly. It still be needed for a decent amount of time in the future though. Just make sure you have the backend work (Python, JS) to support your skill set in the future.

I am in it to help you. I can do this as much as you need. I suggest continuing on and learning to make your webpages. You are doing fantastic and have lots of passion.

Your designs are nice. Just keep in mind many webpages now have shifted to black and white modern feel so abstract doesn’t always work, even if they are nice designs. Many webpages are starting to become cut and paste templates simply because the design works. But then again, someone has to design all of those templates and all the functional code behind it.

I suggest trying your own experiments and paths to do trial and error. Maybe make your own photo gallery website for your portfilo when you are to that level.

Graphic design is not 100% in line with programming, but it is a great set to have in the field because it gives you the ability to make great color pallets, add good images, make your own images, etc. Make that page pop: It will come in use in some way or another. Graphic design is like being a race car driver making a race car. It will improve the outcome significantly.

Continue on with FCC! Get those certifications! Its a big learning curve but once your over it you will like it.

33P · June 21, 2020, 1:28am

@michaelnicol Hi Mike! It took a while to get on track again. I was down but now I’m up again I think. Thanks to you dude I just needed a time to recover.
Well I did what you said, it’s wonderful how the change from row to column solves all the portability problems. I had a rough time because I had put the @media section right below each item. Result was, it worked fine in small screens and awful in larger screens. I solved that.
I put a slight gradient on the header.
The thing with the cat photo is, the test asks you for an image in the header. And second, I have a fondness for that image hahaha I did so many things on it. And third, I love my animation. But the only mandatory one is the first one, I admit.
So take a look.
I have thought a long while about everything you said. I’m going to get deeper into Python first. That’s for sure. And I’m going to keep on with the responsive web design projects.
So thanks little guy. You have helped me beyond all hopes.
https://codepen.io/33P/pen/VwvojEv
Edit: I changed the background color of the container to white. Tomorrow I’ll take care of the header.

michaelnicol · June 21, 2020, 2:15am

I’m glad about your work and you have come a long way.

I tried seeing what making your header transparent would look like and to me it looks cleaner. The header is only supposed to be a smaller portion of the page and not the main focus, so having the big box their can be distracting.

It turned out as:

I then tried making your navigation bar pop more by adding a box shadow. To do that I added a wrapper around your navigation bar.

And then I added some CSS to match the navigation bar width and height along with adding a box shadow.

Finally I changed the hover affect of the navigation links. When I hover over a navigation item, it expands the box shadow by 5 more pixels to give it a 3D affect.

End result:

Hover:

Not sure if the responsive code will still work with the wrapper I added. That is for you to figure out if you choose to do what I did.

I then added a hover affect for each image in the gallery.

End result. Its a hard to see in this picture but once you code it you will understand:

Figuring out a different color scheme can be hard on this page. You may might even want to make the navigation bar have no margins besides in the bottom to make it flush with the edge of the screen. Navigation bars are normally not on pages of this style and size but rather on web pages like the portfolio I linked a few comments back. However, it is for the challenge and to help you learn which is good.

I normally don’t give people code, but you understand what is happening here and this is more minor stuff at this point. Congrats and keep on going!

33P · June 21, 2020, 2:37am

At long last!
Hi Mike! I love your portfolio page, it’s stunning specially the space travel section. I got the thing with the colors combinations and the black and white thing. In fact I don’t know whether you saw my very first page that was a tribute page posted here for the first project. I used white on black and a lot of text and images. But it had no header so it was easy. But I want to show it to you so you can see a plainer but more personal page.
Here it is:

And it even looks better on cell-phones.
About our page, I changed the button. I think you deserve that I call it ours. You helped me so much but that goes without saying. So thanks dude. And congratulations on your Portfolio page. It looks amazing. One thing, though, I recommend you take another read at your html because there are a lot of typos in it, that maybe you didn’t see when you first typed the code. For instance in the main photograph of the portfolio it says “Devoloper” instead of “Developer”. There are a lot of those so I think just a quick read at your html will come handy.
So I guess I’ll think about my next project. We’ll keep in touch! A big motherly hug!

michaelnicol · June 23, 2020, 4:49am

Its looking good!

Try combining what you know about CSS transitions when it comes to shadows and colors to make your email section button look more realistic. Clicking on it should lower the box shadow then when you are just hovering over/ viewing it.
Your color combination looks decent and is readable without eye strain. Try focusing on more of a white and gold theme. When choosing colors I always try to make them light by going mostly towards white with a hint of the color I want mixed in. Over saturated or bright colors will cause eye strain. You red background is mostly white with a hint of red which is why it looks good and non-distracting.

This is not related to your webpage, but keep in mind some colors will never look good. Yellow and brown mostly always look bad and the same can be said with any bright color. Yellow can look good if you use it for gold highlights, which is what you did.

Here is my use of some colored backgrounds. Your pages direction started to remind me of what I did for some past projects. Most of my pages are simple and modern which is why they look so interesting and popping. The less clutter you have the better each item can look if done right.

Most of these colors were found from just fooling around with slight variations of colors until I found the right one. I use these styles when I don’t have enough content to make a full page. Too dark and it distracts the user, too bright and it strains the users eyes (like reading into a flashlight).

Light green: #6D8763

Red/ Pink combo: #B2636B

Teal Color: #1C6F7A

None of these webpages had enough content to making anything massive, so I just settled on a simple container with a background.

However, lets say you have a lot more content.

My Portfolio page. (These images only show off a few parts of the page, so check it out to see the entire thing)

Notice how I had enough content to make up a full page, so I went to 100% width and used images to compliment my page instead of first and secondary colors. Instead of two tones of a white container over a colored background, its now a mixture of images and sections to add that diversity that color would normally add.

With the sections I go either completely reverse the colors to white text on black background, or a light gray background is used with black text. Nothing drastic to give it that modern feel. The reason I do these sections is to create help redirect the users eyes as the scroll down the page onto different parts for different purposes. It also helps to break up the webpage and add detail and not just be solid white all the way down. No need for purple or any other color at this point, white and black works most of the time better then any other color.

Their is only a few select styles that look good in HTML but you can change up those styles to make them unique to you. Nothing you see in those images are hard to make, but the look so good because the content matches my style. Most people don’t see this unless it is pointed out because it is so well hidden but so obviously good looking.

I don’t know the frog game, but I am glad it helped. I happy to help you and no matter what computer science path you take I hope it works out. I also hope that people can read through this thread later and see the helpful tips, tools, and art styles that can transform a webpage.

I don’t want you to specifically learn how to make this webpage again and this only, but how to use basic HTML art styles to make something look better. And not every page needs to be spectacular and unique. You can reuse most of the same styles and such throughout each webpage, just try to change up the colors or something small (like I did). Also only have a Nav bar on full sized webpages like the portfolio one I linked (mine three bars in the upper right corner). Otherwise it adds cluttered and never gets used. I do understand how it was for the FCC challenge however and glad you learned how to make one.

You are approaching the completion of this webpage and I suggest starting to look at the next project. Congratulations dude, this your first official good and working looking HTML. Bust out those alcohol free drinks and give yourself a pat on the back. Practice on more pages in the future and what I said before will stick.