I finished the design projects. I’m looking for more practice with HTML and CSS before I move on to the Javascript at freecodecamp.
I would especially like to practice and improve the responsive nature of the webpages I create. I need the pages to be easily condensed on collapsed browser, mobile phone and tablet.
I’m also going over the layout (flexbox and grid) portion of the course, and would like any opportunity to improve on these.
Does anyone have any advice for a newb/ wanna-be designer/ developer? Where should I go to get more experience?
I think you have the right idea.
Return to your previous projects, and work on making them more responsive.
Then, when you have them where you are happy, add them to your final portfolio. This will give you a little more experience, and you will feel better about your progress.
We’d love to see your finished projects once you feel they are great!
But, don’t go for perfection. You may find that your JavaScript challenges and projects allow you to bring an even greater dimension to your previous projects.
1 Like
@camperextraordinaire ill link you the first three. the technical data page i just did with ipsum text and the portfolio page i really just slapped together because i was getting frustrated (tbh i dont think i went over the challenges carefully enough and spent much less than 300hrs on the curriculum).
Tribute Page:
Survey:
Landing Page:
@KoniKodes thanks for the advice! where do i go if i want to share my projects when they are finished
@MarkSugden
The first two look good overall. The last one has some issues with your hyper links and the images showing properly.
It’s honestly not my product type, but it can probably pass once you fix those.
I created a GitHub Portfolio page to showcase my projects. It would be my first suggestion for you. You can link back to your CodePen pages, yet still keep a strong design in place for your visitors.
@konikodes i thought it was a good idea. its something people probably dont go to a store to buy and would rather order online. maybe it wasnt appropriate for fcc, but i was enthusiastic about making it.
i can fix the links. i dont have stock images for the other two items. my main problem is the header. when the screen zooms in, the header retracts (probably because the width is in px and not 100%. ). when i set the header to 100% and the screen condenses to a very small size you can see the links collapse into the page and off of the header.
ive already created a profile on github. the interface takes some getting used to, but its good to know thats the place to post when im ready.
thanks
i fixed the links at the top of the page:
i dont know if the bottom links can redirect you somewhere out of the website or not. i know they cant on my page, but i dont know if theyre capable of redirecting in codepen.
@MarkSugden
I’m sure that’s how some of businesses of that type began. Still, you may wish to make it about a different subject if you want to showcase to potential clients. It’s not a bad job that you did, but some people may find it slightly offensive.
As you say, stock images of that type may also be a problem.
On GitHub, you can create a gh-pages branch to hold your files, and then call it with the https://YourUserName/YourPortfolioName/ url.
Is this your actual website?
On CodePen, you need to make outside links include 'target="_blank" ’ so that you can leave the pen.
That’s great advice. How do the moderators on this site have all the answers?
I’m sorry if my site is offensive. The idea just popped into my head and I was like; “Something people buy online. Niche market. Sounds fun!”. I didn’t mean to offend anybody.
here’s my technical data page with the ipsum text:
let me know what you think besides the fact that there’s no real text. 
… and i’ll post my portfolio as well. apologies in advance if there are problems with the code as it appears in your browser. as i said i’m having problems understanding the responsive characteristics of html and css and the site may appear as a mess.
Your problem with the images is that you are calling to your personal C: drive. CodePen, and most apis, should not be able to access them.
I solved that problem by adding an ssl on my website and creating a special fcc image folder.
You should be able to find a secure image hosting site that you can store images on…
lol sheeeit, you should label your landing page as not safe for work!
You could look at the challenges on codecademy, otherwise you could refactor your current projects and add more flashy stuff like CSS animations
@camelcamper Thank you. I think the landing page is outside of the code of conduct:
freeCodeCamp is a friendly place to learn to code. We’re committed to keeping it that way.
By using freeCodeCamp, you agree that you’ll follow this code of conduct.
In short: Be nice. No harassment, trolling, or spamming.
Harassment includes sexual language and imagery …
@MarkSugden Please create a different landing page - most any subject but not that one or similar. It doesn’t matter what you do on your personal sites, but your portfolio should reflect the freeCodeCamp code of conduct and honor.
When I taught SAT-prep, my comments regarding essays were: “Keep it clean. Would you want your Coach, Pastor, parents, grand-parents or anyone that you respect to see this?”
You have the coding experience now, just find a subject that interests you without offending others.
Then we can help answer your questions.
@camelcamper @KoniKodes when i was making the page i wasnt expecting it to offend people. i just saw the product as something embarrassing that people wouldnt buy in store and would go on the internet to order. that inspired the theme.
if its really as offensive as it is i can change or create a new landing page.
my biggest problem currently is that the pages dont look good on mobile and tablet and the thumbnails in the personal portfolio. but yeah if everyone has a problem with the landing page ill make another one.
Thank you @MarkSugden I understand that you addressed a need you thought you can fill. But, yes, some of us are a little more sensitive, and it is always safe to just keep sexual everything out of the equation. Again, would someone you respect want to see it?
As to your mobile issues, look up media queries and you should be able to fix a few of them.
A new landing page would be great. Let me know when you’re ready, and I’ll be happy to help.
Personally, I don’t find it offensive but it is inappropriate for FCC as there is a wide audience here which likely includes younger people and people from backgrounds where that kind of content is unacceptable.
Like I said, I think you should have at least labeled it as NSFW so sensitive individuals can avoid it and people like me can avoid opening it up in an open office on a 27" monitor!
@KoniKodes i redid the codepen quickly, while fixing a few functional problems it had. its not perfect, but heres my progress
@camelcamper must be nice having a job…
@MarkSugden Thank you so much! I feel much more comfortable looking at this topic.
CodePen says that: The owner of this Pen needs to verify their email address to enable Full Page View.
Can you do that please? It helps me to see the overall page as well as looking at the code in Editor view.
Your images are still not showing up, and your nav links aren’t happening yet. But it’s easier for me to focus on what you are trying to accomplish.
@camelcamper I agree. I’m in a home-based office so only my husband can see if I open the window when he’s in there. And, since we both work remote, he pops in whenever he has a thought or question.
It would be much more embarrassing if I were working on my lunch break in a cubicle and never know who’s passing by …
Pixabay.com has labels on certain images as “Adult Content”. But this change in topic is better for the fCC environment.
Are you using Bootstrap or jQuery? These two will help with your responsive design and scrolling.
On the Personal Portfolio, Your contact link works on-page, but your outgoing links aren’t working. Try putting “https://www.” in front of gitter.com and then add your username. I think the best way to showcase them is to sign on to your GitHub, Facebook and Twitter pages. Then capture each url in address line. You can copy that into your link to the proper page.
You are still having image issues because it is trying to read off of your computer. It doesn’t like to do that, and you really don’t want anyone else doing it either. By the, your Portfolio link does to go to that other site.
Once you’re happy with the new landing page then you can change that.
Your Document Page looks good at first glance, but you may want to add actual content when you are ready to add to your portfolio. It helps the future client realize that you know what you’re talking about. I’m still having issues with my Document page but here’s what I mean: https://codepen.io/KoniKodes/full/gKjyGj/
I hope this helps a little.
@KoniKodes both the navlinks and the images were working on the landing page when i sent it to you (maybe i made a mistake in labeling or something).
i’m not using bootstrap or jquery yet.
your technical documentation page looks great! it’s very well styled and organized. i can add real text in place of the ipsum text to the technical documentation page, although i still have a long road before i’m trying to find work using a real portfolio page. i assumed we were doing these projects as more of an exercise.
i dont know what you mean by ‘email verification’. verify my email where? i logged into codepen with my email already.
for the portolio. i don’t feel comfortable attaching my facebook and twitter to a landing page. for me these things are private. and i dont want my friends to know i’m a newb.