FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

Stephen James

@sjames1958gm

@Nooy90 Make sure that your container is the full width, if you don't give you container width flex-end really means little

Nooy90

@Nooy90

I have nav as the container, it is full width when I inspect element

Kris Baillargeon

@krisb1220

@sjames1958gm Because you have it wrapped in a <nav> element, you need to apply the display:flex and justify-content:flex-end to the <nav> instead.

@sjames1958gm Right now you have it applied to the .container element

I applied it to the <nav> and it looks like this. Not sure if that's what you wanted, but it is aligned to the flex-end

It should work if you literally just change the .container code block in your CSS to nav. Alternatively, you can just apply the .container to your nav element and remove the <div> altogether.

Christopher McCormack

@cmccormack

@krisb1220 I think you meant that for @Nooy90 no?

Kris Baillargeon

@krisb1220

Woops, yes I did! lol

@Nooy90 Let me know if that solves your issue

@sjames1958gm my bad!

Stephen James

@sjames1958gm

All good :)

Hope Huggles

@flowmid

Hi all, I'm used to software development but feel like a complete noob when it comes to CSS. I'm trying to slowly build my own site on the side while working through the FCC courses, and currently I've gotten close to making these ribbon buttons that I want but they could use some fine-tuning / some advice from someone more experienced on tips / better practices I'm likely overlooking.

Here's the codepen I'm practicing in: https://codepen.io/flowmid/pen/RwPGvrm
The goal with the ribbons currently is to fix the issue with how the squares which cut the ribbons line up (they get offset after the first one), and make it so that when I hover over a ribbon it gets larger, but without bringing the square that's behind it to the foreground. Anyone able to help with these?

Srinivasan

@kksrini89

@matrixersp test file is already added.

Martin Flischman

@MartinFlischman

Can someone please help me? I have been searching the net for a solution, watching YouTube tutorials and still can't find a solution. The list items/text just does not want to align to the left, between the Starting price and button. https://codepen.io/mdezigned/pen/KKpqqmz?editors=1100

hensn5250

@hensn5250

@Mdezigned This is the default CSS style for an unorder list element, <ul>.
As you can see below it has 40px of padding-left. To align its content to the left set padding-left to zero;

// <ul> default styles
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;

// from https://www.w3schools.com/cssref/css_default_values.asp

Kris Baillargeon

@krisb1220

@Mdezigned Quickest solution to any problem like this:

Learn how to use Chrome DevTools

Whenever I have a problem related to styling, CSS, or Javascript, the solution is almost always solved by popping over to Chrome DevTools. Namely, the "Select An Element To Inspect" saves my life all the time. I'll attach a GIF to show you how your problem could have been solved in less than 5 seconds using DevTools.

If you see in the GIF above, I click the "Select an element to inspect" in the top left-hand corner. The button looks like a mouse-pointer with a box around it.

After that, I hover over the element in question

You can see that, to the left of the element, there's a big green box. This indicates that there's a padding-left of 40px preventing it from aligning correctly. Green indicates padding while yellow/orange indicates margin.

Also, you can see directly above the element there's a little info-box that pops up. This shows you most of the styling info related to that specific element.

Specifically, it shows you that element has a padding-left of 40px

To open Chrome DevTools you press: Ctrl+Shift+i". This opens it up for you, most likely at the bottom. I have it set up so that it opens up in a different window. This makes it so that it doesn't obstruct my view depending on where I place it on the screen, but that's up to you.

Kris Baillargeon

@krisb1220

While learning ANYTHING related to Web Development, DevTools is your best friend. When you're learning HTML/CSS, it allows you to inspect your elements visually. You can also make quick edits. While learning JavaScript, it lets you play around with your code and quickly experiment without having to console.log() everything. It gives you a MASSIVE leg up and will save you years over time.

I've definitely learned the most through projects; however, I've learned a hell of a lot by just playing around in the console. I've spent hours just tinkering with different things, and over time it's taught me more things than I can count. The best way to learn the console is to just play with it. But, there is a video that I recommend to anyone that doesn't know much about it.

alpox

@alpox

Sidenote: it is F12 to open devtools on some computers

Kris Baillargeon

@krisb1220

@alpox Thanks bro :D

Didn't know that!

Brad

@bradtaniguchi

I learned "programming" by pounding my head against the cmd on windows xp. Great to learn surface level stuff

Johnathon Sykes

@seesykescode

Doesn't seem like this channel gets a lot of action but I figured I put it here. How can I level up my design chops on my FEWD projects? I know enough to pass tests, but usually feel uninspired by what i end up putting out from a looks department.

Usually I go to other sites for inspiration and try to mimic that.

but is that really the way? "borrowing" from someone else until it's yours.

Brad

@bradtaniguchi

@seesykescode There are such things as "design languages", that provide specs and guidelines on how to make stuff look. An example would be Material Design, which is implemented by a lot of Google products so they all look similar

so "taking" a design isn't that bad, you actually end up making your product look more "familiar". You could also go out of your way to build your own design, but this usually is harder since you need an eye for design

All depends on what your goals are, if you want to be able to design your own UI's from the ground up then practice building stuff better via different techniques and what not like any artist. If you don't really care to much and are fine using existing designs then look into ones you could leverage and stick with it.

I personally totally suck at design and thus usually stick with an off the shelve UI lib and or UI guidelines. I'd rather build the functionality then design the UI

Johnathon Sykes

@seesykescode

Yea, That's how I am as well. I like the functionality side of things but designing is just not my fortay. Do I even need to put stock into that, job wise?

also, thank you for your quick answer @bradtaniguchi

Brad

@bradtaniguchi

@seesykescode It depends on the job, if your just doing front-end work, usually you need to be pretty decent or at least versatile in design, as you will be building custom UI's. For people/clients that are less picky on the UI either want a lot of custom functionality, or are cheap. The cheap people are the ones that wouldn't mind someone building out their website using wordpress or wix or the like, and as such developing a site from the ground up doesn't make as much sense.

So that leaves custom functionality situations where people/clients want something along the lines of a web-app, this is where functionality and full stack comes in. So if you are ok in the UI department, but still want to stay relevant, being able to build full stack usually is the next best bet.

Kris Baillargeon

@krisb1220

@bradtaniguchi I personally have a website design company focused around WordPress, and take it from me: the clients are cheap. They're mostly small businesses or startups that have been sold the dream. Most of them think they need a business plan, a website, and business cards. They want all of that for less than $1,000 most of the time.

I've learned, however, to have fair pricing. It takes me less than 8 hours to do the sites, so charging them $700 gives me about $100/hour. Pretty decent, and fair in my opinion. However, my pricing is firm. I don't work with bargain buyers. If they try to get a deal/bargain, I usually tell them I'm not the right fit for their projects.

I also offer a good amount of "free" bonuses with my websites. I include logos, business cards, a flyer, web hosting, a domain, and a strategically written Facebook ad. I do 99% of the free shit in Canva, so it takes me less than 1 hours for that stuff.

Overall, it takes me about 8-9 hours for the projects and about $13 in hosting.

So, I wouldn't say steer clear of it, but I would say that it's not sustainable by any means. If you're going to start a website design company that can make $1-5 million per year, it has to be custom design projects. WordPress is good to feed yourself, not anyone else :P

Srinivasan

@kksrini89

Hello guys, can anyone review my Technical Documentation project?

Tom

@moT01

looks pretty good overall @kksrini89

when you shrink the window a little, before the hamburger menu shows up - all the text overflows to the right of the window, bringing up the horizontal scroll bar. it would be nice if that wrapped instead of overflowed

the blue hamburger button doesn't match the green scheme

that button gets hidden behind the menu - you can still close it by clicking outside which is nice. but you might want to move it somewhere it's visible

there's some unused space at the bottom of the side menu, you could maybe extend it to use all that space

Where communities thrive

People

Repo info

Activity